开始使用 CodeCatalyst 源存储库和单页应用程序蓝图 - Amazon CodeCatalyst
使用蓝图创建项目查看项目的存储库创建开发环境创建拉取请求合并拉取请求查看已部署的代码清理资源

开始使用 CodeCatalyst 源存储库和单页应用程序蓝图

按照本教程中的步骤学习如何在 Amazon CodeCatalyst 中使用源存储库。

在 Amazon CodeCatalyst 中开始使用源存储库的最快方法是使用模板创建一个项目。使用模板创建项目时，系统会为您创建资源，包括其中含有示例代码的源存储库。您可以使用此存储库和代码示例来了解如何执行以下操作：

  • 查看项目的源存储库并浏览其内容

  • 创建一个带有新分支的开发环境，在其中开发代码

  • 更改文件，提交并推送更改内容

  • 创建拉取请求，并与其他项目成员一起审查代码更改

  • 查看自动构建和测试拉取请求源分支中的更改的项目工作流

  • 将源分支中的更改合并到目标分支，并关闭拉取请求

  • 查看自动构建和部署的合并更改

要充分学习本教程的内容，请邀请他人加入您的项目，以便共同完成拉取请求。您还可以探索 CodeCatalyst 的其他功能，如创建事务并将其与拉取请求关联，或配置通知并在相关工作流运行时获取警报。如需全面了解 CodeCatalyst，请参阅入门教程。

使用蓝图创建项目

要协同工作，首先要创建项目。您可以使用蓝图来创建项目，这还会创建一个包含示例代码的源存储库和一个工作流，当您更改代码时，工作流会自动构建和部署您的代码。在本教程中，我们将指导您完成一个使用单页应用程序蓝图创建的项目，不过您也可以对任何有源存储库的项目使用这些步骤。在创建项目时，确保选择一个 IAM 角色或添加一个 IAM 角色（如果没有）。我们建议您在此项目中使用 CodeCatalystWorkflowDevelopmentRole-spaceName 服务角色。

如果您已经有一个项目，可以跳到查看项目的存储库。

注意

只有具有空间管理员或高级用户角色的用户才能在 CodeCatalyst 中创建项目。如果您没有此角色，但需要一个项目来完成本教程，请让具有这些角色之一的人员为您创建一个项目，并将您添加到已创建的项目中。有关更多信息，请参阅 使用用户角色授予访问权限。

使用蓝图创建项目

  1. 在 CodeCatalyst 控制台中，导航到要在其中创建项目的空间。

  2. 在空间控制面板上，选择创建项目。

  3. 选择从蓝图开始。

    提示

    您可以选择向 Amazon Q 提供您的项目需求，让 Amazon Q 为您推荐蓝图，以此来添加蓝图。有关更多信息，请参阅创建项目或添加功能时使用 Amazon Q 选择蓝图和使用 Amazon Q 通过蓝图创建项目或添加功能时的最佳实践。此功能仅在美国西部（俄勒冈州）区域中提供。

    此功能要求为空间启用生成式人工智能功能。有关更多信息，请参阅 Managing generative AI features。

  4. 从 CodeCatalyst 蓝图或空间蓝图选项卡中选择一个蓝图，然后选择下一步。

  5. 在命名项目下，输入要分配给项目的名称及其关联资源名称。该名称在空间内必须是唯一的。

  6. （可选）默认情况下，蓝图创建的源代码存储在 CodeCatalyst 存储库中。此外，您可以选择将蓝图源代码存储在第三方存储库中。有关更多信息，请参阅 在 CodeCatalyst 中使用扩展向项目添加功能。

    重要

    CodeCatalyst 不支持检测已链接存储库的默认分支中的更改。要更改已链接存储库的默认分支，您必须先取消该存储库与 CodeCatalyst 的链接，更改默认分支，然后重新链接该存储库。有关更多信息，请参阅 在 CodeCatalyst 中链接 GitHub 存储库、Bitbucket 存储库、GitLab 项目存储库和 Jira 项目。

    作为最佳实践，在链接存储库之前，请始终确保您拥有最新版本的扩展。

    根据要使用的第三方存储库提供商，执行以下操作之一：

    • GitHub 存储库：连接 GitHub 账户。

      选择高级下拉菜单，选择 GitHub 作为存储库提供商，然后选择用于存储蓝图所创建的源代码的 GitHub 账户。

      注意

      如果连接的是 GitHub 账户，则必须创建个人连接，以便在 CodeCatalyst 身份和 GitHub 身份之间建立身份映射。有关更多信息，请参阅个人连接和使用个人连接访问 GitHub 资源。

    • Bitbucket 存储库：连接 Bitbucket 工作区。

      选择高级下拉菜单，选择 Bitbucket 作为存储库提供商，然后选择用于存储蓝图所创建的源代码的 Bitbucket 工作区。

    • GitLab 存储库：连接 GitLab 用户。

      选择高级下拉菜单，选择 GitLab 作为存储库提供商，然后选择用于存储蓝图所创建的源代码的 GitLab 用户。

  7. 在项目资源下，配置蓝图参数。根据蓝图的不同，您可以选择命名源存储库名称。

  8. （可选）要根据您选择的项目参数查看包含更新的定义文件，请从生成项目预览中选择查看代码或查看工作流。

  9. （可选）从蓝图卡中选择查看详细信息，查看蓝图的具体详细信息，如蓝图架构概述、所需连接和权限，以及蓝图创建的资源种类。

  10. 选择创建项目。

创建项目或接受项目邀请并完成登录过程后，项目概述页面就会打开。新项目的项目概述页面不包含待解决事务或拉取请求。您可以选择性创建一个事务并将其分配给自己。您也可以选择邀请其他人加入您的项目。有关更多信息，请参阅在 CodeCatalyst 中创建事务和邀请用户加入项目。

查看项目的存储库

作为项目成员，您可以查看项目的源存储库。您还可以选择创建其他存储库。如果具有空间管理员角色的人员安装并配置了 GitHub 存储库、Bitbucket 存储库或 GitLab 存储库扩展，您还可以在为该扩展配置的 GitHub 账户、Bitbucket 工作区或 GitLab 用户中添加指向第三方存储库的链接。有关更多信息，请参阅创建源存储库和快速入门：在 CodeCatalyst 中安装扩展、连接提供程序和链接资源。

注意

对于使用单页应用程序蓝图创建的项目，包含示例代码的源存储库的默认名称是 spa-app。

导航到项目的源存储库

  1. 导航到您的项目，然后执行下列操作之一：

    • 在项目的摘要页面上，从列表中选择所需的存储库，然后选择查看存储库。

    • 在导航窗格中，选择代码，然后选择源存储库。在源存储库中，从列表中选择存储库的名称。您可以通过在筛选栏中键入部分存储库名称，筛选存储库列表。

  2. 在存储库主页上，查看存储库的内容以及有关关联资源的信息，例如拉取请求和工作流的数量。默认情况下，会显示默认分支的内容。您可通过选择此下拉列表中的其他分支来更改视图。

存储库的概述页面包含有关为该存储库的分支及其文件配置的工作流和拉取请求的信息。如果您刚刚创建项目，那么构建、测试和部署代码的初始工作流仍在运行，因为它们需要几分钟才能完成。您可以通过选择相关工作流下方的数字来查看相关工作流及其状态，但这将在 CI/CD 中打开工作流页面。在本教程中，请继续浏览概述页面，并探索存储库中的代码。README.md 文件的内容会显示在该页面上的存储库文件下方。在文件中，显示默认分支的内容。如果有其他分支，您可以更改文件视图以显示其他分支的内容。.codecatalyst 文件夹包含用于项目其他部分的代码，如工作流 YAML 文件。

要查看文件夹的内容，请选择文件夹名称旁边的箭头展开文件夹。例如，选择 src 旁边的箭头可查看该文件夹中包含的单页 Web 应用程序的文件。要查看某个文件的内容，请从列表中选择该文件。这将打开查看文件，您可以在其中浏览多个文件的内容。您也可以在控制台中编辑单个文件，但要编辑多个文件，建议您创建一个开发环境。

创建开发环境

您可以在 Amazon CodeCatalyst 控制台中添加和更改源存储库中的文件。不过，要高效处理多个文件和分支，我们建议使用开发环境或将存储库克隆到本地计算机。在本教程中，我们将创建一个带有名为 develop 的分支的 AWS Cloud9 开发环境。您可以选择不同的分支名称，但只要将分支命名为 develop，在本教程稍后创建拉取请求时，工作流就会自动运行，以构建和测试您的代码。

提示

如果您决定在本地克隆一个存储库，而不是使用开发环境，请确保您的本地计算机上有 Git 或您的 IDE 包含 Git。有关更多信息，请参阅 为使用源存储库进行设置。

使用新分支创建开发环境

  1. 通过访问 https://codecatalyst.aws/ 打开 CodeCatalyst 控制台。

  2. 导航到要在其中创建开发环境的项目。

  3. 从项目的源存储库列表中选择存储库的名称。另外，在导航窗格中，依次选择代码、源存储库以及要为其创建开发环境的存储库。

  4. 在存储库主页上，选择创建开发环境。

  5. 从下拉菜单中选择受支持的 IDE。请参阅开发环境支持的集成式开发环境了解更多信息。

  6. 选择要克隆的存储库，选择在新分支中工作，在分支名称字段中输入分支名称，然后从创建分支自下拉菜单中选择要从中创建新分支的分支。

  7. 可选操作，为开发环境添加别名。

  8. 可选操作，选择开发环境配置编辑按钮，编辑开发环境的计算、存储或超时配置。

  9. 选择创建。在创建开发环境时，开发环境状态列将显示正在启动，开发环境创建完成后，状态列将显示正在运行。将在您选择的 IDE 中打开一个新选项卡，其中包含您的开发环境。您可以编辑代码并提交和推送更改。

创建开发环境后，您就可以编辑文件、提交更改并将更改推送到 test 分支。在本教程中，请编辑 src 文件夹中 App.tsx 文件的 <p> 标签之间的内容，以更改网页上显示的文本。提交并推送更改，然后返回 CodeCatalyst 选项卡。

从 AWS Cloud9 开发环境中进行更改和推送更改

  1. 在 AWS Cloud9 中，展开侧导航菜单，浏览文件。展开 src，然后打开 App.tsx。

  2. 更改 <p> 标签内的文本。

  3. 保存文件，然后使用 Git 菜单提交并推送更改。或者，在终端窗口中使用 git commit 和 git push 命令提交和推送更改。

    git commit -am "Making an example change"
git push
    提示

    您可能需要将终端中的目录更改为 Git 存储库目录，然后才能成功运行 Git 命令。

创建拉取请求

您可以使用拉取请求来协同审查代码更改，包括次要的更改或修复、主要功能添加或已发布软件的新版本。在本教程中，您将创建一个拉取请求，以查看 test 分支与 main 分支相比所做的更改。在使用模板创建的项目中创建拉取请求也会启动相关工作流（如果有的话）的运行。

创建拉取请求

  1. 导航到您的项目。

  2. 请执行以下操作之一：

    • 在导航窗格中，依次选择代码、拉取请求和创建拉取请求。

    • 在存储库主页上，选择更多，然后选择创建拉取请求。

    • 在项目页面上，选择创建拉取请求。

  3. 在源代码库中，确保指定的源存储库是包含所提交代码的存储库。只有在您未从存储库的主页创建拉取请求时，才会显示此选项。

  4. 在目标分支中，在审查代码后，选择要将代码合并到的分支。

  5. 在源分支中，选择包含所提交代码的分支。

  6. 在拉取请求标题中，输入一个标题，帮助其他用户了解需要审查的内容及其原因。

  7. （可选）在拉取请求描述中，提供诸如事务链接或所做更改的描述之类的信息。

    提示

    您可以选择为我编写描述，让 CodeCatalyst 自动生成拉取请求中包含的更改的描述。您可以在将自动生成的描述添加到拉取请求后，对描述进行更改。

    此功能要求为空间启用生成式人工智能功能，并且不适用于链接的存储库中的拉取请求。有关更多信息，请参阅 Managing generative AI features。

  8. （可选）在事务中，选择关联事务，然后从列表中选择事务或输入事务 ID。要取消链接事务，请选择“取消链接”图标。

  9. （可选）在必需的审阅者中，选择添加必需审阅者。从项目成员列表中进行选择，添加审阅者。必需的审阅者必须批准更改，才能将拉取请求合并到目标分支。

    注意

    您不能将审阅者同时添加为必需的审阅者和可选的审阅者。您不能将自己添加为审阅者。

  10. （可选）在可选的审阅者中，选择添加可选审阅者。从项目成员列表中进行选择，添加审阅者。可选的审阅者不必批准更改，这并不是将拉取请求合并到目标分支之前的必备要求。

  11. 审查分支之间的差异。拉取请求中显示的差异是源分支中的修订与合并基准之间的更改，而合并基准是创建拉取请求时目标分支的 HEAD 提交。如果未显示任何更改，则分支可能相同，或者您可能为源和目标选择了相同的分支。

  12. 如果您对拉取请求中包含的希望审查的代码和更改感到满意，请选择创建。

    注意

    创建拉取请求后，可以添加备注。可以将备注添加到拉取请求中或文件内的单独行中，也可以为整个拉取请求添加备注。您可以使用 @ 符号后跟文件名的方式，添加指向文件等资源的链接。

您可以通过选择概述，然后查看工作流运行下拉取请求详细信息区域中的信息，来查看创建此拉取请求所启动的相关工作流的信息。要查看工作流运行的情况，请选择该运行。

提示

如果您将分支命名为 develop 以外的名称，工作流将不会自动运行以构建和测试您的更改。如果您想进行配置，请编辑 onPullRequestBuildAndTest 工作流的 YAML 文件。有关更多信息，请参阅 创建工作流。

您可以对此拉取请求发表评论，也可以要求其他项目成员发表评论。您还可以选择添加或更改可选或必需的审阅者。您可以选择对存储库的源分支进行更多更改，并查看这些已提交的更改是如何创建拉取请求修订版的。有关更多信息，请参阅审核拉取请求、更新拉取请求、在 Amazon CodeCatalyst 中使用拉取请求审查代码和查看工作流运行状态和详细信息。

合并拉取请求

拉取请求经过审核并获得必需的审阅者的批准后，就可以在 CodeCatalyst 控制台中将其源分支合并到目标分支。合并拉取请求也会通过与目标分支相关联的工作流启动更改的运行。在本教程中，您要将 test 分支合并到 main 分支，这将启动 onPushToMainDeployPipeline 工作流的运行。

合并拉取请求（控制台）

  1. 在拉取请求中，选择您在上一步中创建的拉取请求。在拉取请求中，选择合并。

  2. 从拉取请求的可用合并策略中选择。（可选）选择或取消选择在合并拉取请求后删除源分支的选项，然后选择合并。合并完成后，拉取请求的状态将变为已合并，并不再出现在拉取请求的默认视图中。默认视图显示状态为待解决的拉取请求。您仍然可以查看已合并的拉取请求，但不能审批该拉取请求或更改其状态。

    注意

    如果合并按钮未激活，或者您看到不可合并标签，则说明必需的审阅者尚未批准拉取请求，或者无法在 CodeCatalyst 控制台中合并拉取请求。在拉取请求详细信息区域的概述中，使用时钟图标来指示尚未批准拉取请求的审阅者。如果所有必需的审阅者都已批准了拉取请求，但合并按钮仍未激活，则可能存在合并冲突，或超出了空间的存储配额。您可以在开发环境中解决目标分支的合并冲突，推送更改，然后合并拉取请求，也可以在本地解决冲突并合并，然后将包含合并的提交推送到 CodeCatalyst。有关更多信息，请参阅合并拉取请求（Git）和您的 Git 文档。

查看已部署的代码

现在，您可以查看默认分支中最初部署的代码，以及自动构建、测试和部署后合并的更改。为此，您可以返回存储库的概述页面，选择相关工作流图标旁边的数字，或在导航窗格中选择 CI/CD，然后选择工作流。

查看已部署的代码

  1. 在工作流的 onPushToMainDeployPipeline 中，展开最近的运行。

    注意

    这是使用单页应用程序蓝图创建的项目的工作流默认名称。

  2. 最近的运行是由您合并到 main 分支的拉取请求提交所启动的运行，可能会显示正在进行中状态。从列表中选择成功完成的运行，打开该运行的详细信息。

  3. 选择变量。复制 AppURL 的值。这是已部署的单页 Web 应用程序的 URL。打开一个新的浏览器标签页并粘贴该值，以查看已构建和部署的代码。保持标签页打开状态。

  4. 返回工作流运行的列表，等待最近的运行完成。运行完成后，返回您打开的标签页，以查看 Web 应用程序并刷新浏览器。您应该能在合并的拉取请求中看到所做的更改。

清理资源

在探索了如何使用源存储库和拉取请求后，建议您删除任何不需要的资源。您不能删除拉取请求，但可以关闭它们。您可以删除任何已创建的分支。

如果您不再需要源存储库或项目，也可以删除这些资源。有关更多信息，请参阅删除源存储库和删除项目。