建置完整堆疊的 React 應用程式

實作

• 建立新的 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 [email protected]: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 託管下選取開始使用。
  

  

  b.選取 GitHub 作為儲存庫服務，然後選取 Continue (繼續)。

  

  c.使用 GitHub 進行身份驗證，然後返回至 Amplify 主控台。選擇您之前建立的儲存器和主要分支，然後選取 Next (下一步)。
  

  

  d.接受預設的建置設定，然後選取 Next (下一步)。

  

  e.檢閱最終詳細資訊，然後選擇儲存並部署。
  

  

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