选择您的 Cookie 首选项

我们使用必要 Cookie 和类似工具提供我们的网站和服务。我们使用性能 Cookie 收集匿名统计数据,以便我们可以了解客户如何使用我们的网站并进行改进。必要 Cookie 无法停用,但您可以单击“自定义”或“拒绝”来拒绝性能 Cookie。

如果您同意,AWS 和经批准的第三方还将使用 Cookie 提供有用的网站功能、记住您的首选项并显示相关内容,包括相关广告。要接受或拒绝所有非必要 Cookie,请单击“接受”或“拒绝”。要做出更详细的选择,请单击“自定义”。

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

聚焦模式
使用 CodeBuild Lambda Node.js 创建单页 React 应用程序 - AWS CodeBuild

创建 React 应用程序是一种创建单页 React 应用程序的方法。以下 Node.js 示例使用 Node.js 通过“创建 React 应用程序”构建源构件并返回构建构件。

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

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

设置源存储库和构件存储桶
  1. 在本地计算机上运行 yarn create react-app <app-name> 来创建简单的 React 应用程序。

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

创建 CodeBuild Lambda Node.js 项目

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

创建 CodeBuild Lambda Node.js 项目
  1. https://console.aws.amazon.com/codesuite/codebuild/home 打开 AWS CodeBuild 控制台。

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

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

  4. 中,选择 AWS SAM 项目所在的源存储库。

  5. 环境中:

    • 计算中,选择 Lambda

    • 运行时中,选择 Node.js

    • 映像中,选择 aws/codebuild/amazonlinux-x86_64-lambda-standard:nodejs20

  6. 构件中:

    • 类型中,选择 Amazon S3

    • 存储桶名称中,选择您之前创建的项目构件存储桶。

    • 构件打包中,选择 Zip

  7. 选择 Create build project(创建构建项目)

设置项目 buildspec

为了构建您的 React 应用程序,CodeBuild 会从 buildspec 文件读取并执行构建命令。

设置项目 buildspec
  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. 选择更新 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: 下面的 localhost URL,查看您的 React 应用程序。

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

清除基础设施

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

清除基础设施
  1. 删除项目构件 Amazon S3 存储桶

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

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

隐私网站条款Cookie 首选项
© 2025, Amazon Web Services, Inc. 或其附属公司。保留所有权利。