创建 React 应用程序
设置源存储库和构件存储桶
使用 yarn 和“创建 React 应用程序”为项目创建源存储库。
设置源存储库和构件存储桶
-
在本地计算机上运行
yarn create react-app
来创建简单的 React 应用程序。<app-name>
-
将 React 应用程序项目文件夹上传到支持的源存储库。有关支持的源类型列表,请参阅 ProjectSource。
创建 CodeBuild Lambda Node.js 项目
创建一个 AWS CodeBuild Lambda Node.js 项目。
创建 CodeBuild Lambda Node.js 项目
-
从 https://console.aws.amazon.com/codesuite/codebuild/home
打开 AWS CodeBuild 控制台。 -
如果显示了 CodeBuild 信息页面,请选择创建构建项目。否则,请在导航窗格中,展开构建,选择构建项目,然后选择创建构建项目。
在项目名称中,输入此构建项目的名称。构建项目名称在您的各个 AWS 账户内必须是唯一的。您还可以包含构建项目的可选描述,以帮助其他用户了解此项目的用途。
-
在源中,选择 AWS SAM 项目所在的源存储库。
-
在环境中:
-
在计算中,选择 Lambda。
-
在运行时中,选择 Node.js。
-
在映像中,选择 aws/codebuild/amazonlinux-x86_64-lambda-standard:nodejs20。
-
-
在构件中:
-
在类型中,选择 Amazon S3。
-
在存储桶名称中,选择您之前创建的项目构件存储桶。
-
在构件打包中,选择 Zip。
-
-
选择 Create build project(创建构建项目)。
设置项目 buildspec
为了构建您的 React 应用程序,CodeBuild 会从 buildspec 文件读取并执行构建命令。
设置项目 buildspec
-
在 CodeBuild 控制台中,选择您的构建项目,然后选择编辑和 Buildspec。
-
在 Buildspec 中,选择插入构建命令,然后选择切换到编辑器。
-
删除预先填入的构建命令并粘贴以下 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'
-
选择更新 buildspec。
构建和运行 React 应用程序
在 CodeBuild Lambda 上构建 React 应用程序,下载构建构件,并在本地运行 React 应用程序。
构建和运行 React 应用程序
-
选择启动构建。
-
构建完成后,导航到您的 Amazon S3 项目构件存储桶并下载 React 应用程序构件。
-
解压缩 React 构建构件并在项目文件夹中执行
run npm install -g serve && serve -s build
。 -
serve
命令将在本地端口为静态站点提供服务,并输出到您的终端。您可以访问终端输出中Local:
下面的 localhost URL,查看您的 React 应用程序。
要详细了解如何处理基于 React 的服务器的部署,请参阅创建 React 应用程序部署
清除基础设施
为避免对您在本教程中所用资源收取更多费用,请删除 CodeBuild 项目创建的资源。
清除基础设施
-
删除项目构件 Amazon S3 存储桶
-
导航到 CloudWatch 控制台,删除与您的 CodeBuild 项目关联的 CloudWatch 日志组。
-
导航到 CodeBuild 控制台,然后通过选择删除构建项目来删除您的 CodeBuild 项目。