使用 CodeBuild Lambda Node.js 创建单页 React 应用程序 - Amazon CodeBuild
设置您的源存储库和构件存储桶创建一个 CodeBuild Lambda Node.js 项目设置项目构建规范构建并运行你的 React 应用程序清理您的基础架构
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅 中国的 Amazon Web Services 服务入门 (PDF)。

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

使用 CodeBuild Lambda Node.js 创建单页 React 应用程序

创建 React 应用程序是一种创建单页 React 应用程序的方法。以下 Node.js 示例使用 Node.js 从 Create React App 中构建源工件并返回构建工件。

设置您的源存储库和构件存储桶

使用 yarn 和创建 React App 为你的项目创建源代码库。

设置源存储库和构件存储桶

  1. 在你的本地计算机上，运行yarn create react-app <app-name>创建一个简单的 React 应用程序。

  2. 将 React 应用程序项目文件夹上传到支持的源存储库。有关支持的源类型的列表，请参阅ProjectSource。

创建一个 CodeBuild Lambda Node.js 项目

创建一个 Amazon CodeBuild Lambda Node.js 项目。

创建你的 CodeBuild Lambda Node.js 项目

  1. 从 https://console.aws.amazon.com/codesuite/codebuild/home 打开 Amazon CodeBuild 控制台。

  2. 如果显示 CodeBuild 信息页面，请选择 “创建构建项目”。否则，请在导航窗格中，展开构建，选择构建项目，然后选择创建构建项目。

  3. 在项目名称中，输入此构建项目的名称。构建项目名称在您的各个 Amazon 账户内必须是唯一的。您还可以包含构建项目的可选描述，以帮助其他用户了解此项目的用途。

  4. 在源代码中，选择Amazon SAM项目所在的源存储库。

  5. 在环境中：

    • 对于计算，选择 Lambda。

    • 对于 “运行时”，选择 Node.js。

    • 对于图片，选择 aws/codebuild/amazonlinux-x86_64-lambda-standard: nodejs20。

  6. 在构件中：

    • 在 “类型” 中，选择 Amazon S3。

    • 在存储桶名称中，选择您之前创建的项目项目存储桶。

    • 对于工件打包，请选择 Zip。

  7. 选择创建构建项目。

设置项目构建规范

为了构建 React 应用程序，需要从 buildspec 文件中 CodeBuild 读取和执行构建命令。

要设置您的项目构建规范

  1. 在 CodeBuild 控制台中，选择您的构建项目，然后选择 “编辑” 和 “Buildspec”。

  2. 在 Buildspec 中，选择 “插入生成命令”，然后选择 “切换到编辑器”。

  3. 删除预先填充的构建命令并粘贴到以下 buildspec 中。

    version: 0.2
phases:
  build:
    commands:
      - yarn
      - yarn add --dev jest-junit @babel/plugin-proposal-private-property-in-object
      - yarn run build
      - yarn run test -- --coverage --watchAll=false --testResultsProcessor="jest-junit" --detectOpenHandles
artifacts:
  name: "build-output"
  files:
    - "**/*"
reports:
  test-report:
    files:
      - 'junit.xml'
    file-format: 'JUNITXML'
  coverage-report:
    files:
      - 'coverage/clover.xml'
    file-format: 'CLOVERXML'

  4. 选择 Update buildspec (更新构建规范)。

构建并运行你的 React 应用程序

在 CodeBuild Lambda 上构建 React 应用程序，下载构建工件，然后在本地运行 React 应用程序。

构建和运行你的 React 应用程序

  1. 选择启动构建。

  2. 构建完成后，导航到您的 Amazon S3 项目工件存储桶并下载 React 应用程序工件。

  3. 将 React 编译工件解run npm install -g serve && serve -s build压到项目文件夹中。

  4. 该serve命令将在本地端口上为静态站点提供服务，并将输出打印到您的终端。你可以访问终端输出Local:中的本地主机 URL 来查看你的 React 应用程序。

要详细了解如何处理基于 React 的服务器的部署，请参阅创建 React 应用程序部署。

清理您的基础架构

为避免对您在本教程中使用的资源收取更多费用，请删除为您的 CodeBuild 项目创建的资源。

清理您的基础架构

  1. 删除您的项目项目 Amazon S3 存储桶

  2. 导航到 CloudWatch 控制台并删除与您的 CodeBuild 项目关联的 CloudWatch 日志组。

  3. 导航到 CodeBuild 控制台并通过选择删除构建 CodeBuild 项目来删除您的项目。