實作

• 建立新的 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 主控台上選取縮略圖，以檢視更新的應用程式。