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

# 使用 CodeBuild Lambda Node.js 创建单页 React 应用程序
<a name="sample-lambda-react-nodejs"></a>

[创建 React 应用程序](https://create-react-app.dev/)是一种创建单页 React 应用程序的方法。以下 Node.js 示例使用 Node.js 通过“创建 React 应用程序”构建源构件并返回构建构件。

## 设置源存储库和构件存储桶
<a name="sample-lambda-react-nodejs.set-up-repo"></a>

使用 yarn 和“创建 React 应用程序”为项目创建源存储库。

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

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

1. 将 React 应用程序项目文件夹上传到支持的源存储库。有关支持的源类型的列表，请参阅[ProjectSource](https://docs.aws.amazon.com/codebuild/latest/APIReference/API_ProjectSource.html)。

## 创建一个 CodeBuild Lambda Node.js 项目
<a name="sample-lambda-react-nodejs.create-project"></a>

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

**创建你的 CodeBuild Lambda Node.js 项目**

1. 在 [https://console.aws.amazon.com/codesuite/codebuild](https://console.aws.amazon.com/codesuite/codebuild/home) /home 中打开 AWS CodeBuild 控制台。

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

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

1. 在**源代码**中，选择 AWS SAM 项目所在的源存储库。

1. 在**环境**中：
   + 在**计算**中，选择 **Lambda**。
   + 在**运行时**中，选择 **Node.js**。
   + 对于**图片**，选择 **aws/codebuild/amazonlinux-x86\$164-lambda-** standard: nodejs20。

1. 在**构件**中：
   + 在**类型**中，选择 **Amazon S3**。
   + 在**存储桶名称**中，选择您之前创建的项目构件存储桶。
   + 在**构件打包**中，选择 **Zip**。

1. 选择 **Create build project（创建构建项目）**。

## 设置项目 buildspec
<a name="sample-lambda-react-nodejs.set-up-buildspec"></a>

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

**设置项目 buildspec**

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

1. 在 **Buildspec** 中，选择**插入构建命令**，然后选择**切换到编辑器**。

1. 删除预先填入的构建命令并粘贴以下 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'
   ```

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

## 构建和运行 React 应用程序
<a name="sample-lambda-react-nodejs.build"></a>

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

**构建和运行 React 应用程序**

1. 选择**启动构建**。

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

1. 解压缩 React 构建构件并在项目文件夹中执行 `run npm install -g serve && serve -s build`。

1. `serve` 命令将在本地端口为静态站点提供服务，并输出到您的终端。您可以访问终端输出中 `Local:` 下面的 localhost URL，查看您的 React 应用程序。

要详细了解如何处理基于 React 的服务器的部署，请参阅[创建 React 应用程序部署](https://create-react-app.dev/docs/deployment/)。

## 清除基础设施
<a name="sample-lambda-react-nodejs.clean-up"></a>

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

**清除基础设施**

1. 删除项目构件 Amazon S3 存储桶

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

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