使用 AWS Amplify 控制台

部署和托管 ReactJS 应用程序

AWS Amplify 控制台提供了基于 Git 的 CI/CD 工作流程,用于开发、部署和托管具有无服务器后端的单页面 Web 应用程序或静态站点。连接到 Git 代码库后,Amplify 会确定前端框架和使用 Amplify CLI 配置的任何无服务器后端资源的构建设置,并在每次提交代码时自动部署更新。

在本教程中,我们首先要创建一个新的 React 应用程序,并将其推送到 GitHub 代码库。  然后,您将这个代码库连接到 Amplify 控制台并将其部署到 amplifyapp.com 域上托管的全球可用内容分发网络 (CDN)。接下来,我们将通过更改 React 应用程序并将新版本推送到可自动开始新部署的主分支,来演示连续部署功能。

在本教程中完成的所有操作均符合免费套餐条件。

关于本教程
时间 10 分钟                                           
费用 免费套餐资格
使用案例 网站和 Web 应用程序
产品 AWS Amplify 控制台
受众 开发人员
级别 新手
上次更新日期 03/04/2018

1.注册 AWS

您需要一个 AWS 账户才能在 AWS Amplify 控制台上跟着本教程的介绍操作。按照本教程使用 AWS Amplify 操作无需额外付费。您在本教程中创建的资源符合免费套餐条件。 

2.确认环境设置

打开命令行界面,然后输入以下命令:

node -v;

如果此命令返回的版本低于 v8.0,则将节点升级到高于版本 8 的版本。如果找不到该命令,请从以下位置安装该节点:nodejs.org/download

3.创建新的 React 应用程序

创建 React 应用程序的最简单方法是使用 create-react-app 命令。使用以下命令安装此软件包:

npx create-react-app amplifyapp
cd amplifyapp
npm start

4.初始化 GitHub 代码库

在此步骤中,您将创建一个 GitHub 代码库并将代码提交到该代码库。您将需要一个 GitHub 账户来完成此步骤 - 如果您没有账户,请在此处注册。 

a.为您的应用创建一个新的 GitHub 代码库(链接)。

b.初始化 git 并将应用程序推送到新的 GitHub 代码库,在命令行界面中执行以下命令:

git init
git remote add origin git@github.com:username/reponame.git
git add .
git commit -m ‘initial commit’
git push origin master

5.登录到 AWS Amplify 控制台

在新浏览器窗口中打开 AWS 管理控制台,以便您可以将本分步指南保持打开状态。此屏幕加载后,请输入您的用户名和密码以便开始操作。在搜索栏中输入 Amplify,然后选择 AWS Amplify 以便打开服务控制台。

6.将您的应用程序部署到 AWS Amplify

在此步骤中,您会将刚刚创建的 GitHub 代码库连接到 AWS Amplify 服务。这将使您能够在 AWS 上构建、部署和托管应用程序。

a.选择部署下的开始使用

b.选择 GitHub 作为代码库服务,然后选择下一步

c.完成 GitHub 的身份验证,然后返回到 Amplify 控制台。选择您之前创建的代码库和主分支,然后选择下一步

d.接受默认的构建设置并选择下一步

e.检查最终细节并选择保存并部署

f.AWS Amplify 控制台现在将在以下位置构建您的源代码并部署您的应用程序:https://<分支名称>.<appid>.amplifyapp.com

g.构建完成后,选择缩略图以查看您的 Web 应用程序并已启动并上线运行。

tmt-react-ClickThumnail

7.自动部署代码更改

在此步骤中,您将对代码进行一些更改,并将更改推送到应用程序的主分支。

a.编辑 src/App.js 文件。

b.构建完成后,请在 AWS Amplify 控制台上选择缩略图以查看更新后的应用程序。

tmt-react-7b-2

8.清除您的资源

您可以轻松终止在 AWS Amplify 控制台上创建的资源。实际上,最好的做法是终止不再使用的资源,以免继续产生费用。

选择操作,再选择 删除应用程序。在打开的模式中,键入 delete 确认您要删除应用程序。您的应用现已删除。

恭喜

您已经通过与 GitHub 集成并使用 Amplify 控制台在云中部署了 React 应用程序。

借助 AWS Amplify 控制台,您可以在云中连续部署应用程序,并将其托管在全球可用的 CDN 上。

本教程对您是否有帮助?

谢谢
请告知我们您喜欢什么。
很抱歉让您失望了
是否存在过时、令人困惑或不准确的内容? 请向我们提供反馈,帮助我们改进本教程。