实施

• 创建新的 React 应用程序

  创建 React 应用程序的最简单方法是使用 create-react-app 命令。在命令提示符或终端中使用以下命令安装此软件包：

  npx create-react-app amplifyapp
  cd amplifyapp
  npm start

• 初始化 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

• 登录 AWS 管理控制台

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

  

• 使用 AWS Amplify 部署您的应用程序

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

  a.在 AWS Amplify 服务控制台中，在 Deploy（部署）下选择 "Get Started"（开始使用）。
  

  

  b.选择 GitHub 作为代码库服务，然后选择 Continue（继续）。

  

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

  

  d.受默认的构建设置并选择 Next（下一步）。

  

  e.检查最终细节并选择 Save and Deploy（保存并部署）。
  

  

  f.AWS Amplify 现在将在以下位置构建您的源代码并部署您的应用程序：https://...amplifyapp.com。
  

  

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

  

• 自动部署代码更改

  在此步骤中，您将使用文本编辑器对代码进行一些更改，并将更改推送到应用程序的主分支。

  a.使用下面的代码编辑 src/App.js 并保存。
  

  import React from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  function App() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1>Hello from V2</h1>
        </header>
      </div>
    );
  }
  
  export default App;

  b.在命令提示符 (Windows) 或终端 (macOS) 中将更改推送到 GitHub，以自动开始新构建： 

  git add .
  git commit -m “changes for v2”
  git push origin master

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