操作步骤

• 创建新的 React 应用程序

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

  npx create-react-app amplifyapp
  cd amplifyapp
  npm start

  Code snippet copied

  复制
• 初始化 GitHub 存储库

  在这一步中，您将创建一个 GitHub 存储库，并将代码提交到该存储库。您需要一个 GitHub 账户来完成这一步 — 如果您还没有账户，请在此处注册。

  a. 为您的应用程序创建一个新的 GitHub 代码库。
  

  

  b. 打开一个新终端，切换至应用程序的根文件夹，例如 amplifyapp。

  c. 使用 create-react-app 将自动初始化 Git 存储库并进行首次提交。如果您试图部署一个 Git 尚未初始化的现有 React 应用程序，请确保在继续之前输入以下命令：
  

  git init
  git add .
  git commit -m "initial commit"

  Code snippet copied

  复制

  d. 如果您从未在电脑上使用过 GitHub，请按照以下步骤操作，以允许连接到您的账户。
  

  在命令行界面执行以下命令，将应用程序推送到新的 GitHub 存储库：
  

  git remote add origin git@github.com:username/reponame.git
  git branch -M main
  git push -u origin main

  Code snippet copied

  复制
• 登录 AWS 管理控制台

  在新的浏览器窗口中打开 AWS 管理控制台，使本分步指南保持打开状态，以便一边操作一边参照本教程。页面加载后，输入您的用户名和密码即可开始使用。然后在搜索栏中输入 Amplify 并选择 AWS Amplify 打开控制台。
  

  

• 使用 AWS Amplify 部署应用程序

  在此步骤中，您将把刚刚创建的 GitHub 存储库连接到 AWS Amplify 服务，从而在 AWS 上构建、部署和托管您的应用程序。

  a. 在 AWS Amplify 服务控制台中，点击 Amplify Hosting （Amplify 托管）下的 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;

  Code snippet copied

  复制

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

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

  Code snippet copied

  复制

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