在 AWS Amplify 上部署 Web 应用程序

入门指南

模块 1:新建 Amplify 项目

在本模块中,您将新建一个 Web 应用程序并配置 Amplify

简介

在本模块中,您将使用 React (用于构建用户界面的 JavaScript 库) 新建一个 Web 应用程序,同时了解如何为第一个项目配置 AWS Amplify。

您将学到的内容

  • 新建 Web 应用程序
  • 在您的项目上设置 Amplify

 完成时间

5 分钟

 模块先决条件

  • 具有管理员级访问权限的 AWS 账户**
  • 推荐的浏览器:最新版 Chrome 或 Firefox

[**] 过去 24 小时内创建的账户可能尚不具有访问此教程所需服务的权限。

实施

检查环境

通过在终端/控制台窗口中运行 node -vnpm -v,验证您至少运行的是 Node.js 版本 12.x 以及 npm 版本 6.x 或更高版本。如果不是上述版本,请访问 nodejs npm 网站以获取更多信息。

node -v

# Your output may differ based on the version installed.
12.1.1

npm -v

# Your output may differ based on the version installed.
6.14.6

Amplify 命令行界面 (CLI) 是一个统一的工具链,可用于为您的应用程序创建 AWS 云服务。让我们继续安装 Amplify CLI。

npm install -g @aws-amplify/cli

注意:我们在全球范围内安装 Amplify CLI,因此您可能需要根据自己的系统策略使用 sudo 运行上述命令。

安装完成后,通过运行以下命令配置 Amplify:

amplify configure

amplify configure 将打开浏览器并要求您登录 AWS 控制台。

登录后,Amplify CLI 会要求您创建 IAM 用户。

Specify the AWS Region
? region:  # Your preferred region
Specify the username of the new IAM user:
? user name:  # User name for Amplify IAM user
Complete the user creation using the AWS console

创建对您账户拥有 AdministratorAccess 权限的用户,以便预置 AWS 资源,例如 AppSync、Cognito 等。

gsg-build-amplify-4

创建用户后,Amplify CLI 会要求您提供 accessKeyId 和 secretAccessKey,以将 Amplify CLI 与新创建的 IAM 用户连接起来。

Enter the access key of the newly created user:
? accessKeyId:  # YOUR_ACCESS_KEY_ID
? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY
This would update/create the AWS Profile in your local machine
? Profile Name:  # (default)

Successfully set up the new user.

创建 React 应用程序

要新建 React 应用程序,您将使用 create-react-app,这是一个无需配置即可帮助您入门的工具链。

创建名为 amplify-app 的应用程序,然后使用 amplify init 对其进行初始化:

# note npx is installed with npm
npx create-react-app amplify-app
cd amplify-app
amplify init

运行 amplify init 时,它会询问有关应用程序的信息,此时请使用下面提供的值:

? Enter a name for the project amplifyapp

? Enter a name for the environment dev

? Choose your default editor: None

? Choose the type of app that you're building javascript

Please tell us about your project
? What javascript framework are you using react

? Source Directory Path:  src

? Distribution Directory Path: build

? Build Command:  npm run-script build

? Start Command: npm run-script start

Using default provider  awscloudformation

? Select the authentication method you want to use: AWS profile

? Please choose the profile you want to use amplify

回答最后一个提示问题之后,该命令就会创建所需的基础设施,输出看起来类似于如下:

⠼ Initializing project in the cloud...

CREATE_IN_PROGRESS DeploymentBucket              AWS::S3::Bucket            Fri Sep 17 2021 08:48:24 GMT+0200 (South Africa Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS AuthRole                      AWS::IAM::Role             Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS UnauthRole                    AWS::IAM::Role             Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS DeploymentBucket              AWS::S3::Bucket            Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time)                            
CREATE_IN_PROGRESS AuthRole                      AWS::IAM::Role             Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time)                            
CREATE_IN_PROGRESS UnauthRole                    AWS::IAM::Role             Fri Sep 17 2021 08:48:22 GMT+0200 (South Africa Standard Time)                            
CREATE_IN_PROGRESS amplify-amplifyapp-dev-144814 AWS::CloudFormation::Stack Fri Sep 17 2021 08:48:19 GMT+0200 (South Africa Standard Time) User Initiated             
⠼ Initializing project in the cloud...

CREATE_COMPLETE AuthRole   AWS::IAM::Role Fri Sep 17 2021 08:48:38 GMT+0200 (South Africa Standard Time) 
CREATE_COMPLETE UnauthRole AWS::IAM::Role Fri Sep 17 2021 08:48:38 GMT+0200 (South Africa Standard Time) 
⠸ Initializing project in the cloud...

CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Fri Sep 17 2021 08:48:45 GMT+0200 (South Africa Standard Time) 
⠴ Initializing project in the cloud...

CREATE_COMPLETE amplify-amplifyapp-dev-144814 AWS::CloudFormation::Stack Fri Sep 17 2021 08:48:47 GMT+0200 (South Africa Standard Time) 
✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything

您刚刚创建了什么?

运行 amplify init 以初始化一个新项目时,Amplify 将:

  • 分析您的项目并确认上述的项目设置,包括将使用哪个 AWS 配置文件来配置应用程序所需的云资源。
  • 在项目目录中创建名为 amplify 的文件夹。此文件夹包含应用程序的后端配置。
  • 在项目目录中创建名为 src/aws-exports.js 的文件。此文件包含 Amplify 在您向应用程序添加更多功能时所预置服务的配置。
  • AWS Amplify 控制台中为您的应用程序创建一个云项目,您可以在其中查看和管理自己的 Amplify 项目。
gsg-build-amplify-1

结论

在本模块中,您学习了如何创建 React 前端应用程序,以及使用 Amplify 对其进行初始化,以准备将其部署到您的 AWS 账户。在下一个模块中,您将学习如何使用 GraphQL 向前端应用程序添加 API。

下一步:连接 API

请就我们的表现提供反馈。

感谢您的反馈
很高兴此页面对您有所帮助。您是否乐意分享更多详细信息,以帮助我们继续改进?
关闭
感谢您的反馈
很抱歉,此页面未能帮到您。您是否乐意分享更多详细信息,以帮助我们继续改进?
关闭