操作步骤

• 安装 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) 的登录。我们还添加了一个 Sign Out（登出）按钮，用于用户登出。
  

• 在本地运行应用程序

  等待资源部署完成，然后运行应用程序，查看保护应用程序的新身份验证流程：
  

  npm start

  Code snippet copied

  复制

  

  在这里，您可以尝试注册，注册后系统会向您的邮箱发送验证码。使用验证码登录应用程序。登录后，您会看到一个 Sign Out（登出）按钮，点击该按钮可以登出并重新启动身份验证流程。
  

  

• 设置前端和后端的 CI/CD 管道

  接下来，我们需要配置 Amplify 构建流程，将后端添加至持续部署工作流。在终端窗口中运行：
  

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

  Code snippet copied

  复制

  这将打开 Amplify 控制台。在导航栏中，选择 App settings > Build settings（应用程序设置>构建设置），然后进行修改，将后端部分（下方代码中的第 2-7 行）添加到 amplify.yml。编辑完成后，选择 Save（保存）。
  

  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

  复制

  向下滚动到 Build image settings（构建镜像设置），然后选择 Edit（编辑）。点击 Add package version override（添加软件包版本覆盖）下拉列表，然后选择 Amplify CLI。如图所示，它应默认为最新版本。
  

  

  接下来，更新前端分支，使其指向您刚刚创建的后端环境。在分支名称下方，选择 Edit（编辑），然后将 main（主）分支指向您刚刚创建的 staging（暂存）后端。点击 Save（保存）。
  

  

  

  如果看到消息 Please set up a service role...（请设置服务角色……），请在继续设置并将服务角色附加到应用程序之前按照提供的说明进行操作。
  

• 将更改部署到生产环境

  现在返回本地终端窗口，将更改部署到 GitHub，以便在 Amplify 控制台中开始新的构建：
  

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

  Code snippet copied

  复制