亚马逊 CodeCatalyst 不再向新买家开放。现有客户可以继续正常使用该服务。有关更多信息，请参阅 [如何从中迁移 CodeCatalyst](migration.md)。
本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。
# 教程：创建和更新 React 应用程序
作为蓝图作者，您可以开发自定义蓝图并将这些蓝图添加到空间的蓝图目录中。然后，空间成员可以使用这些蓝图来创建新项目，或者将蓝图添加到现有项目中。您可以继续对自己的蓝图进行更改，然后通过拉取请求将这些蓝图作为更新提供。
本教程从蓝图作者和蓝图用户的角度提供了演练。本教程演示如何创建 React 单页 Web 应用程序蓝图。然后，使用该蓝图创建新的项目。使用所做的更改来更新蓝图时，根据蓝图创建的项目会通过拉取请求合并这些更改。
**Topics**
+ [先决条件](#blueprint-getting-started-prerequisites)
+ [步骤 1：创建自定义蓝图](#react-bluprint-tutorial-create-bp)
+ [步骤 2：查看发布工作流](#blueprint-getting-started-view-workflow)
+ [步骤 3：将蓝图添加到目录](#blueprint-getting-started-add-to-catalog)
+ [步骤 4：使用蓝图创建项目](#blueprint-getting-started-create-project)
+ [步骤 5：更新蓝图](#blueprint-getting-started-update-blueprint)
+ [步骤 6：将蓝图的已发布目录版本更新为新版本](#blueprint-getting-started-update-catalog-version)
+ [步骤 7：使用新蓝图版本更新项目](#blueprint-getting-started-update-project)
+ [步骤 8：查看项目中的更改](#blueprint-getting-started-view-changes)
## 先决条件
要创建和更新自定义蓝图，您必须按以下方式完成[设置并登录 CodeCatalyst设置并登录 CodeCatalyst](setting-up-topnode.md) 中的任务：
+ 拥有用于登录 CodeCatalyst 的 AWS 构建者 ID。
+ 属于某个空间，并且在该空间中已为您分配了**空间管理员**或**高级用户**角色。有关更多信息，请参阅[创建空间](spaces-create.md)、[向用户授予空间权限](spaces-members.md)和[空间管理员角色](ipa-role-types.md#ipa-role-space-admin)。
## 步骤 1：创建自定义蓝图
当您创建自定义蓝图时，会创建一个 CodeCatalyst 项目，其中包含您的蓝图源代码以及开发工具和资源。您在自己的项目中开发、测试和发布蓝图。
1. 通过访问 [https://codecatalyst.aws/](https://codecatalyst.aws/) 打开 CodeCatalyst 控制台。
1. 在 CodeCatalyst 控制台中，导航到要在其中创建蓝图的空间。
1. 选择**设置**以导航到空间设置。
1. 在**空间设置**选项卡中，选择**蓝图**，然后选择**创建蓝图**。
1. 使用以下值更新蓝图创建向导中的字段：
+ 在**蓝图名称**中，输入 `react-app-blueprint`。
+ 在**蓝图显示名称**中，输入 `react-app-blueprint`。
1. 您也可以选择**查看代码**来预览蓝图的蓝图源代码。类似地，选择**查看工作流**可预览将在构建和发布蓝图的项目中创建的工作流。
1. 选择**创建蓝图**。
1. 完成蓝图的创建后，您将转到蓝图的项目。该项目包含蓝图源代码，以及开发、测试和发布蓝图所需的各种工具和资源。发布工作流已生成，该工作流会自动将您的蓝图发布到空间。
1. 现在，您的蓝图和蓝图项目已创建，下一步是通过更新源代码来配置蓝图。您可以使用开发环境，直接在浏览器中打开和编辑源存储库。
在导航窗格中，选择**代码**，然后选择**开发环境**。
1. 选择**创建开发环境**，然后选择 **AWS Cloud9（在浏览器中）**。
1. 保留其余默认设置，然后选择**创建**。
1. 在 AWS Cloud9 终端中，运行以下命令，导航到您的蓝图项目目录：
```
cd react-app-blueprint
```
1. 创建蓝图时，会自动创建并填充 `static-assets` 文件夹。在本教程中，您将删除默认文件夹，并为 react 应用程序蓝图生成新文件夹。
运行以下命令，删除 static-assets 文件夹：
```
rm -r static-assets
```
AWS Cloud9 是在基于 Linux 的平台上构建的。如果您使用 Windows 操作系统，可以改为使用下面的命令：
```
rmdir /s /q static-assets
```
1. 现在默认文件夹已删除，请运行以下命令，为 react-app 蓝图创建一个 `static-assets` 文件夹：
```
npx create-react-app static-assets
```
出现提示时，请输入 `y` 继续。
在 `static-assets` 文件夹中创建了一个新的 react 应用程序，其中包含必要的软件包。这些更改需要推送到您的远程 CodeCatalyst 源存储库。
1. 确保您具有最新的更改，然后运行以下命令来提交更改并推送到蓝图的 CodeCatalyst 源存储库：
```
git pull
```
```
git add .
```
```
git commit -m "Add React app to static-assets"
```
```
git push
```
将更改推送到蓝图源存储库时，发布工作流将会自动启动。此工作流会递增蓝图版本，构建蓝图并将蓝图发布到您的空间。在下一步中，您将导航到运行的发布工作流以查看执行的操作。
## 步骤 2：查看发布工作流
1. 在 CodeCatalyst 控制台的导航窗格中，选择 **CI/CD**，然后选择**工作流**。
1. 选择**蓝图发布**工作流。
1. 您可以看到工作流包含用于构建和发布蓝图的操作。
1. 在**最近的运行**下，选择工作流运行链接，查看您所做的代码更改中运行的操作。
1. 运行完成后，您的新蓝图版本就会发布。已发布的蓝图版本可以在空间**设置**中看到，但在将蓝图添加到空间的蓝图目录中之前，不能在项目中使用。在下一步中，您将向目录中添加蓝图。
## 步骤 3：将蓝图添加到目录
将蓝图添加到空间的蓝图目录中后，该蓝图就可以在空间内的所有项目中使用。空间成员可以使用蓝图创建新项目，或者将蓝图添加到现有项目中。
1. 在 CodeCatalyst 控制台中，导航回该空间。
1. 选择**设置**，然后选择**蓝图**。
1. 选择 **react-app-blueprint**，然后选择**添加到目录**。
1. 选择**保存**。
## 步骤 4：使用蓝图创建项目
现在，蓝图已添加到目录中，可在项目中使用。在此步骤中，您将使用刚创建的蓝图来创建项目。在后续步骤中，您将通过更新和发布蓝图的新版本来更新此项目。
1. 选择**项目**选项卡，然后选择**创建项目**。
1. 选择**空间蓝图**，然后选择 **react-app-blueprint**。
**注意**
选择蓝图后，您可以看到蓝图的 `README.md` 文件的内容。
1. 选择**下一步**。
1.
**注意**
此项目创建向导的内容可以在蓝图中配置。
以蓝图用户身份输入项目名称。在本教程中，请输入 `react-app-project`。有关更多信息，请参阅 [开发自定义蓝图以满足项目要求](develop-bp.md)。
接下来，您将更新蓝图并将新版本添加到目录中，然后使用新版本来更新此项目。
## 步骤 5：更新蓝图
在使用蓝图创建新项目或者将蓝图应用于现有项目后，您可以继续以蓝图作者的身份进行更新。在此步骤中，您将对蓝图进行更改并自动向空间发布新版本。然后，新版本可以添加作为目录版本。
1. 导航到[教程：创建和更新 React 应用程序](#blueprint-getting-started-tutorial)中创建的 **react-app-blueprint** 项目。
1. 打开在[教程：创建和更新 React 应用程序](#blueprint-getting-started-tutorial)中创建的开发环境。
1. 在导航窗格中，选择**代码**，然后选择**开发环境**。
1. 从表中找到“开发环境”，然后选择**在 AWS Cloud9 中打开（在浏览器中）**。
1. 运行蓝图发布工作流时，会通过更新 `package.json` 文件来递增蓝图版本。通过在 AWS Cloud9 终端中运行以下命令提取更改：
```
git pull
```
1. 通过运行以下命令，导航到 `static-assets` 文件夹：
```
cd /projects/react-app-blueprint/static-assets
```
1. 通过运行以下命令，在 `static-assets` 文件夹中创建 `hello-world.txt` 文件：
```
touch hello-world.txt
```
AWS Cloud9 是在基于 Linux 的平台上构建的。如果您使用 Windows 操作系统，可以改为使用下面的命令：
```
echo > hello-world.text
```
1. 在左侧导航栏中，双击 `hello-world.txt` 文件以在编辑器中打开文件，然后添加以下内容：
```
Hello, world!
```
保存该文件。
1. 确保您具有最新的更改，然后运行以下命令来提交更改并推送到蓝图的 CodeCatalyst 源存储库：
```
git pull
```
```
git add .
```
```
git commit -m "prettier setup"
```
```
git push
```
在推送更改时已启动了发布工作流，该工作流会自动将新版本的蓝图发布到空间。
## 步骤 6：将蓝图的已发布目录版本更新为新版本
在使用蓝图创建新项目或者将蓝图应用于现有项目后，您仍能以蓝图作者的身份更新该蓝图。在此步骤中，您将对蓝图进行更改，并更改蓝图的目录版本。
1. 在 CodeCatalyst 控制台中，导航回该空间。
1. 选择**设置**，然后选择**蓝图**。
1. 选择 **react-app-blueprint**，然后选择**管理目录版本**。
1. 选择新版本，然后选择**保存**。
## 步骤 7：使用新蓝图版本更新项目
新版本现已在该空间的蓝图目录中可用。作为蓝图用户，您可以更新在[步骤 4：使用蓝图创建项目](#blueprint-getting-started-create-project)中创建的项目版本。这样可以确保您获得满足最佳实践所需的最新更改和修复程序。
1. 在 CodeCatalyst 控制台中，导航到在[步骤 4：使用蓝图创建项目](#blueprint-getting-started-create-project)中创建的 **react-app-project** 项目。
1. 在导航窗格中，选择**蓝图**。
1. 在信息框中，选择**更新蓝图**。
1. 在右侧的**代码更改**面板中，您可以看到 `hello-world.txt` 和 `package.json` 更新。
1. 选择**应用更新**。
选择**应用更新**将在项目中创建拉取请求，其中带有更新的蓝图版本中的更改。要对项目进行更新，您必须合并拉取请求。有关更多信息，请参阅[审核拉取请求](pull-requests-review.md)和[合并拉取请求](pull-requests-merge.md)。
1. 在**蓝图**表中，找到蓝图。在**状态**列中，选择**待处理拉取请求**，然后选择指向已打开拉取请求的链接。
1. 查看拉取请求，然后选择**合并**。
1. 选择**快进合并**以保留默认值，然后选择**合并**。
## 步骤 8：查看项目中的更改
在[步骤 7：使用新蓝图版本更新项目](#blueprint-getting-started-update-project)后，对蓝图的更改现在已在您的项目中可用。作为蓝图用户，您可以查看源存储库中的更改。
1. 在导航窗格中，选择**源存储库**，然后选择在创建项目时创建的源存储库的名称。
1. 在**文件**下，您可以查看在[步骤 5：更新蓝图](#blueprint-getting-started-update-blueprint)中创建的 `hello-world.txt` 文件。
1. 选择 `hello-world.txt` 以查看内容文件。
借助生命周期管理，蓝图作者能够集中管理包含特定蓝图的每个项目的软件开发生命周期。如本教程所示，您可以推送蓝图更新，然后通过使用蓝图来创建新项目或者将蓝图应用于现有项目的项目，可以合并这些更新。有关更多信息，请参阅 [以蓝图作者的身份使用生命周期管理功能](lifecycle-management-dev.md)。