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

實作

• 安裝 Amplify 程式庫

  我們的專案將需要兩個 Amplify 程式庫。主要 aws-amplify 程式庫包含用於與我們將使用的各種 AWS 服務進行互動的所有用戶端 API，而@aws-amplify/ui-react 程式庫包含框架特定 UI 元件。在專案的根目錄中安裝這些程式庫。
  

  npm install aws-amplify @aws-amplify/ui-react

  Code snippet copied

  複製
• 建立身分驗證服務

  要建立身份驗證服務，請使用 Amplify CLI：
  

  amplify add auth
  
  ? Do you want to use the default authentication and security configuration? Default configuration
  ? How do you want users to be able to sign in? Username
  ? Do you want to configure advanced settings? No, I am done.

  Code snippet copied

  複製
• 部署身份驗證服務

  現在已經在本機設定了身份驗證服務，我們可以透過執行 Amplify push 命令來部署它：
  

  amplify push --y

  Code snippet copied

  複製
• 使用 Amplify 資源設定 React 專案

  CLI 已在專案的 src 目錄中建立名為 aws-exports.js 的檔案，並將持續對其進行更新。我們將使用此檔案告知 React 專案 Amplify 專案中可用的不同 AWS 資源。

  要使用這些資源設定應用程式，請開啟 src/index.js，並在最後一個 import 下面新增以下程式碼：

  import { Amplify } from 'aws-amplify';
  import config from './aws-exports';
  Amplify.configure(config);
  

  Code snippet copied

  複製
• 在 App.js 中新增身分驗證流程

  接下來，開啟 src/App.js 並使用以下程式碼進行更新：

  import logo from "./logo.svg";
  import "@aws-amplify/ui-react/styles.css";
  import {
    withAuthenticator,
    Button,
    Heading,
    Image,
    View,
    Card,
  } from "@aws-amplify/ui-react";
  
  function App({ signOut }) {
    return (
      <View className="App">
        <Card>
          <Image src={logo} className="App-logo" alt="logo" />
          <Heading level={1}>We now have Auth!</Heading>
        </Card>
        <Button onClick={signOut}>Sign Out</Button>
      </View>
    );
  }
  
  export default withAuthenticator(App);

  Code snippet copied

  複製

  在此元件中，我們使用了 withAuthenticator 元件。該元件將建立一個完整的使用者身分驗證流程，允許使用者註冊、登入、重置密碼並確認登入以進行多重因素認證 (MFA)。我們還新增了一個登出按鈕，用於讓使用者登出。
  

• 在本機執行應用程式

  等待資源完成部署，然後執行應用程式，以查看保護應用程式的新驗證流程：
  

  npm start

  Code snippet copied

  複製

  

  在這裡，您可以嘗試註冊，這會將驗證碼傳送至您的電子郵件。使用驗證碼登入應用程式。登入後，您應該會看到一個登出按鈕，該按鈕將讓您登出並重新啟動驗證流程。

  

• 設定前端和後端的 CI/CD

  接下來，我們需要設定 Amplify 建置程序，以新增後端做為持續部署工作流程的一部分。從終端視窗執行：
  

  amplify console
  ? Which site do you want to open? AWS console

  Code snippet copied

  複製

  這會開啟 Amplify 主控台。在導覽窗格中，選擇應用程式設定 > 建置設定，然後對其進行修改，將後端部分 (下方程式碼中的 2-7 行) 新增至 amplify.yml 中。進行編輯之後，選擇儲存。
  

  version: 1
  backend:
    phases:
      build:
        commands:
          - '# Execute Amplify CLI with the helper script'
          - amplifyPush --simple
  frontend:
    phases:
      preBuild:
        commands:
          - yarn install
      build:
        commands:
          - yarn run build
    artifacts:
      baseDirectory: build
      files:
        - '**/*'
    cache:
      paths:
        - node_modules/**/*

  Code snippet copied

  複製

  向下捲動至建置影像設定，然後選擇編輯。選取新增套件版本覆寫 下拉式清單，然後選取放大 CLI。它應預設為如圖所示的最新版本。

  

  接下來，更新前端分支，以指向您剛建立的後端環境。在分支名稱下，選擇編輯，然後將主分支指向您剛建立的暫存後端。選擇儲存。
  

  

  

  如果看到訊息請設定服務角色...，請依照提供的指示操作，再繼續設定服務角色並將服務角色附接至您的應用程式。

• 將變更部署到實際使用的環境

  現在返回本機終端視窗，並將變更部署至 GitHub，以在 Amplify 主控台中開始新的建置：

  git add .
  git commit -m "added auth"
  git push origin main
  

  Code snippet copied

  複製