先决条件步骤 1：创建自定义蓝图第 2 步：查看发布工作流程步骤 3：将蓝图添加到目录第 4 步：使用蓝图创建项目步骤 5：更新蓝图步骤 6：将蓝图的已发布目录版本更新为新版本第 7 步：使用新的蓝图版本更新项目第 8 步：查看项目中的更改

教程：创建和更新 React 应用程序

作为蓝图作者，您可以开发自定义蓝图并将其添加到空间的蓝图目录中。然后，空间成员可以使用这些蓝图来创建新项目或将其添加到现有项目中。您可以继续对蓝图进行更改，然后通过拉取请求将其作为更新提供。

本教程从蓝图作者的视角和蓝图用户的角度提供了演练。本教程展示了如何创建 React 单页 Web 应用程序蓝图。然后使用该蓝图来创建新项目。当使用更改更新蓝图时，根据蓝图创建的项目会通过拉取请求合并这些更改。

先决条件

要创建和更新自定义蓝图，必须设置并登录 CodeCatalyst按以下方式完成中的任务：

拥有用于登录的 AWS 生成器 ID CodeCatalyst。
属于某个空间，并在该空间中为您分配空间管理员或高级用户角色。有关更多信息，请参阅创建空间、向用户授予空间权限和空间管理员角色。

步骤 1：创建自定义蓝图

创建自定义蓝图时，会创建一个包含蓝图源代码以及开发工具和资源的 CodeCatalyst 项目。您的项目是开发、测试和发布蓝图的地方。

打开 CodeCatalyst 控制台，网址为 https://codecatalyst.aws/。
在 CodeCatalyst 控制台中，导航到要创建蓝图的空间。
选择 “设置” 以导航到空间设置。
在空间设置选项卡中，选择蓝图并选择创建蓝图。
使用以下值更新蓝图创建向导中的字段：
- 在蓝图名称中，输入react-app-blueprint。
- 在蓝图显示名称中，输入react-app-blueprint。
或者，选择查看代码以预览蓝图的蓝图源代码。同样，选择查看工作流程以预览将在构建和发布蓝图的项目中创建的工作流程。
选择创建蓝图。
蓝图创建完成后，您将被带到蓝图的项目。该项目包含蓝图源代码以及开发、测试和发布蓝图所需的工具和资源。发布工作流程已生成，它会自动将您的蓝图发布到空间。
现在，您的蓝图和蓝图项目已创建，下一步是通过更新源代码对其进行配置。您可以使用开发环境直接在浏览器中打开和编辑源存储库。

在导航窗格中，选择 “代码”，然后选择 “开发环境”。
选择 “创建开发环境”，然后选择 AWS Cloud9 （在浏览器中）。
保留默认设置并选择 “创建”。
在 AWS Cloud9 终端中，通过运行以下命令导航到您的蓝图项目目录：
```
cd react-app-blueprint
```
创建蓝图时会自动创建并填充static-assets文件夹。在本教程中，您将删除默认文件夹，并为 react 应用程序蓝图生成一个新文件夹。

通过运行以下命令删除静态资产文件夹：
```
rm -r static-assets
```
AWS Cloud9 是在基于 Linux 的平台上构建的。如果你使用的是 Windows 操作系统，则可以改用以下命令：
```
rmdir /s /q static-assets
```
既然默认文件夹已删除，请运行以下命令为 react-app 蓝图创建一个static-assets文件夹：
```
npx create-react-app static-assets
```
如果出现提示，请输入y以继续。

在该static-assets文件夹中创建了一个新的 react 应用程序，其中包含必要的软件包。需要将更改推送到您的远程 CodeCatalyst 源代码库。
确保您有最新的更改，然后通过运行以下命令提交更改并将其推送到蓝图的 CodeCatalyst 源存储库：
```
git pull
```
```
git add .
```
```
git commit -m "Add React app to static-assets"
```
```
git push
```

将更改推送到蓝图的源存储库时，发布工作流程将自动启动。此工作流程会增加蓝图版本，构建蓝图并将其发布到您的空间。在下一步中，您将导航到发布工作流程运行以查看其运行情况。

第 2 步：查看发布工作流程

在 CodeCatalyst 控制台的导航窗格中，选择 C I/CD，然后选择工作流程。
选择蓝图发布工作流程。
您可以看到工作流程包含构建和发布蓝图的操作。
在 “最新运行” 下，选择工作流程运行链接以查看您所做的代码更改中的运行情况。
运行完成后，您的新蓝图版本即会发布。已发布的蓝图版本可以在空间的 “设置” 中查看，但在将其添加到空间的蓝图目录中之前，不能在项目中使用。在下一步中，您将把蓝图添加到目录中。

步骤 3：将蓝图添加到目录

将蓝图添加到空间的蓝图目录中，即可在空间中的所有项目中使用该蓝图。空间成员可以使用蓝图创建新项目或将其添加到现有项目中。

在 CodeCatalyst 控制台中，导航回空间。
选择 “设置”，然后选择 “蓝图”。
选择 react-app-blueprint，然后选择 “添加到目录”。
选择保存。

第 4 步：使用蓝图创建项目

现在，蓝图已添加到目录中，可以在项目中使用。在此步骤中，您将使用刚刚创建的蓝图创建一个项目。在后面的步骤中，您将通过更新和发布蓝图的新版本来更新此项目。

选择 “项目” 选项卡，然后选择 “创建项目”。
选择 “太空蓝图”，然后选择react-app-blueprint。

注意
选择蓝图后，您可以看到蓝图README.md文件的内容。
选择下一步。
注意
可以在蓝图中配置此项目创建向导的内容。

以蓝图用户身份输入项目名称。在本教程中，请输入 react-app-project。有关更多信息，请参阅开发自定义蓝图以满足项目要求。

接下来，您将更新蓝图并将新版本添加到目录中，您将用它来更新此项目。

步骤 5：更新蓝图

在使用蓝图创建新项目或将蓝图应用于现有项目后，您可以继续以蓝图作者的身份进行更新。在此步骤中，您将对蓝图进行更改并自动向空间发布新版本。然后可以将新版本添加为目录版本。

导航到中创建的react-app-blueprint项目教程：创建和更新 React 应用程序。
打开在中创建的开发环境教程：创建和更新 React 应用程序。
1. 在导航窗格中，选择 “代码”，然后选择 “开发环境”。
2. 从表格中找到 “开发环境”，然后选择 “打开方式” AWS Cloud9 （在浏览器中）。
运行蓝图发布工作流程时，它通过更新package.json文件来增加蓝图版本。通过在 AWS Cloud9 终端中运行以下命令来提取更改：
```
git pull
```
通过运行以下命令导航到该static-assets文件夹：
```
cd /projects/react-app-blueprint/static-assets
```
通过运行以下命令在static-assets文件夹中创建hello-world.txt文件：
```
touch hello-world.txt
```
AWS Cloud9 是在基于 Linux 的平台上构建的。如果你使用的是 Windows 操作系统，则可以改用以下命令：
```
echo > hello-world.text
```
在左侧导航栏中，双击hello-world.txt文件以在编辑器中将其打开，然后添加以下内容：
```
Hello, world!
```
保存该文件。
确保您有最新的更改，然后通过运行以下命令提交更改并将其推送到蓝图的 CodeCatalyst 源存储库：
```
git pull
```
```
git add .
```
```
git commit -m "prettier setup"
```
```
git push
```

推送更改启动了发布工作流程，该工作流程将自动将新版本的蓝图发布到空间。

步骤 6：将蓝图的已发布目录版本更新为新版本

在使用蓝图创建新项目或将其应用于现有项目后，您仍然可以以蓝图作者的身份更新该蓝图。在此步骤中，您将对蓝图进行更改并更改蓝图的目录版本。

在 CodeCatalyst 控制台中，导航回空间。
选择 “设置”，然后选择 “蓝图”。
选择 react-app-blueprint，然后选择管理目录版本。
选择新版本，然后选择 “保存”。

第 7 步：使用新的蓝图版本更新项目

该空间的蓝图目录中现已推出新版本。作为蓝图用户，您可以更新在中创建的项目的版本第 4 步：使用蓝图创建项目。这样可以确保您获得符合最佳实践所需的最新更改和修复。

在 CodeCatalyst 控制台中，导航到中创建的react-app-project项目第 4 步：使用蓝图创建项目。
在导航窗格中，选择蓝图。
在信息框中选择更新蓝图。
在右侧的 “代码更改” 面板中，您可以看到hello-world.txt和package.json更新。
选择 “应用更新”。

选择 A pply up date 将在项目中创建拉取请求，其中包含更新后的蓝图版本中的更改。要对项目进行更新，必须合并拉取请求。有关更多信息，请参阅查看拉取请求和合并拉取请求。

在蓝图表中，找到蓝图。在 “状态” 列中，选择 “待处理拉取请求”，然后选择指向已打开拉取请求的链接。
查看拉取请求，然后选择 “合并”。
选择 “快进合并” 以保留默认值，然后选择 “合并”。

第 8 步：查看项目中的更改

之后，对蓝图的更改现在可以在您的项目中使用第 7 步：使用新的蓝图版本更新项目。作为蓝图用户，您可以查看源存储库中的更改。

在导航窗格中，选择源存储库，然后选择创建项目时创建的源存储库的名称。
在 “文件” 下，您可以查看在中创建的hello-world.txt文件步骤 5：更新蓝图。
选择hello-world.txt可查看文件内容。

生命周期管理使蓝图作者能够集中管理包含特定蓝图的每个项目的软件开发生命周期。如本教程所示，您可以推送蓝图的更新，然后使用该蓝图创建新项目或将其应用于现有项目的项目可以合并这些更新。有关更多信息，请参阅以蓝图作者的身份参与生命周期管理。

Javascript 在您的浏览器中被禁用或不可用。

要使用 Amazon Web Services 文档，必须启用 Javascript。请参阅浏览器的帮助页面以了解相关说明。

文档惯例

自定义蓝图入门

将源存储库转换为自定义蓝图