使用 Docker、AWS CodeBuild、AWS ECS、AWS CodePipeline 和 GitHub 为容器化的 React 应用设置 CI/CD。

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

这是“面向前端开发人员的 DevOps”系列的最后一部分。我假设您已经具备以下条件：

-使用 Docker 将 React 应用容器化
-使用 Fargate 将其部署到 AWS ECS
-将 ELB 和域名绑定到容器
-为 ELB 绑定 SSL 并启用 HTTPS -
为项目设置 GitHub 代码库并将代码推送到该代码库

1. 设置 CodeBuild 项目

从 AWS 控制台导航到 CodeBuild。在 CodeBuild 的主页上，选择“创建项目”。

一个 CodeBuild 项目包含 6-7 个部分（截至撰写本文时）：

项目配置

输入名称（必填）、描述（可选）和标签（可选）。如果您想在 GitHub 代码库页面上显示构建成功/失败徽章，请点击“启用构建徽章”。

来源

选择 GitHub，选择“我的 GitHub 帐户中的仓库”，点击“使用 OAuth 连接（您也可以选择使用访问令牌方法）”，然后点击“连接到 GitHub”。系统会要求您登录并授权。如果您要授权组织内的仓库，则还需要授予该组织访问权限。之后，系统会要求您输入 GitHub 密码。

输入Github密码后，将跳转到CodeBuild页面，然后从该页面选择“确认”。

获得授权后，您将被带回 CodeBuild。搜索并选择您的仓库（在我的例子中是“my-app”），然后在“源版本”字段中输入分支名称（您想要从中构建的分支，例如在我的例子中是 master）。

主要来源 webhook 事件

请勿勾选，因为我们将使用代码管道触发构建。

环境

选择：
- 环境镜像选择“托管镜像”
- 操作系统选择“Ubuntu”
- 运行时选择“标准” -
镜像下拉列表中选择最新版本（撰写本文时最新版本为“aws/codebuild/standard:4.0”）
- 镜像版本选择“始终使用此运行时版本的最新镜像”
- 环境类型选择“Linux” -
启用“特权”标志
- 服务角色选择“新建服务角色”（系统会自动填充下一个字段，您可以根据需要编辑自定义名称）
- 其他配置保持不变（除非您需要增加计算能力等）

构建规范

在“Buildspec 名称”字段中输入“Buildspec.prod.yml”（我们稍后会创建此文件）。

工件和日志

离开这些部分，然后点击“创建构建项目”。

创建并推送 Buildspec 文件

在你的项目（react 应用）根目录中创建一个新文件，并将其命名为“Buildspec.prod.yml”，然后将以下代码片段粘贴到该文件中。

version: 0.2
phases:
  install:
    runtime-versions:
      docker: 19
  pre_build:
    commands:
      - $(aws ecr get-login --region $AWS_DEFAULT_REGION --no-include-email)
      - REPOSITORY_URI=681373743177.dkr.ecr.us-east-2.amazonaws.com/my-app
      - COMMIT_HASH=$(echo $CODEBUILD_RESOLVED_SOURCE_VERSION | cut -c 1-7)
      - IMAGE_TAG=${COMMIT_HASH:=latest}
  build:
    commands:
      - docker build -t $REPOSITORY_URI:latest -f Dockerfile.prod .
      - docker tag $REPOSITORY_URI:latest $REPOSITORY_URI:$IMAGE_TAG
  post_build:
    commands:
      - docker push $REPOSITORY_URI:latest
      - docker push $REPOSITORY_URI:$IMAGE_TAG
      - printf '[{"name":"my-app-default-container","imageUri":"%s"}]' $REPOSITORY_URI:$IMAGE_TAG > imagedefinitions.json
artifacts:
  files: imagedefinitions.json

将容器名称（“my-app-default-container”）替换为您在之前的文章中创建任务定义时使用的名称。将 替换YOUR_ECR_IMAGE_URI_HERE为您的镜像 URI，您可以从 AWS ECR 获取该 URI。 保存文件，提交更改，然后推送到您的 GitHub 仓库。

注意*：请确保在上面的代码片段中，通过“-f Dockerfile.prod”提供您的 Dockerfile 名称。

授予 CodeBuild 访问权限

ECR权限

现在您需要授予 AWS CodeBuild 访问 AWS ECR 代码库的权限。为此，请返回 ECR 并单击您的代码库。在代码库中，单击左侧边栏中的“权限”。

点击“编辑策略 JSON”，将以下 JSON 添加到弹出窗口中，然后点击“保存”。

{
  "Version": "2008-10-17",
  "Statement": [
    {
      "Sid": "new statement",
      "Effect": "Allow",
      "Principal": {
        "Service": "codebuild.amazonaws.com"
      },
      "Action": [
        "ecr:BatchCheckLayerAvailability",
        "ecr:BatchGetImage",
        "ecr:GetDownloadUrlForLayer"
      ]
    }
  ]
}

CodeBuild 角色策略

从 AWS 控制台转到 IAM，然后从左侧边栏选择“策略”。在“策略”页面中，单击“创建策略”。

选择 JSON，输入以下代码片段，然后点击“查看策略”。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "ecr:CompleteLayerUpload",
                "ecr:GetAuthorizationToken",
                "ecr:UploadLayerPart",
                "ecr:InitiateLayerUpload",
                "ecr:BatchCheckLayerAvailability",
                "ecr:PutImage"
            ],
            "Resource": "*"
        }
    ]
}

将您的策略​​命名为“CodebuildToECR”，如果需要，可以添加描述，然后单击“创建策略”。

策略创建完成后，需要将其添加到 CodeBuild 的服务角色（之前已创建）。为此，请从左侧边栏选择“角色”。

搜索并选择之前创建的 CodeBuild 角色。

点击“附加保单”。

搜索我们之前创建的策略（即 CodebuildToECR），选择它并单击“附加策略”。

现在我们准备使用 CodeBuild 构建项目。但我们仍然需要自动化 CodeBuild 和部署到 ECS 的步骤，请继续往下看。

2. 设置 CodePipeline

从 AWS 控制台主页，转到 CodePipeline。单击“创建管道”。

输入管道名称，然后单击“下一步”。

和之前一样，选择“Github”作为来源提供程序，使用 OAuth 授予访问权限，选择并搜索仓库（在我的例子中是 my-repo），然后输入分支名称（在我的例子中是 master）。点击“下一步”。

选择“AWS CodeBuild”作为构建提供程序。搜索并选择我们之前创建的 CodeBuild 项目，然后单击“下一步”。

选择“Amazon ECS”作为部署提供程序。选择我们之前（在之前的文章中）创建的集群和服务，然后单击“下一步”。检查配置，然后单击“创建管道”。

就这样。创建好流水线后，它将自动开始构建和部署（首次）。之后，每当您向主分支（或您之前提供的分支）推送代码时，流水线都会自动触发。

您可以使用 AWS Chatbot 和 Slack（我们就是这么做的）设置通知规则，或者使用 SNS 和您喜欢的任何其他服务。我将在其他系列文章中介绍这部分内容。

严格来说，我们目前所做的只是持续交付（CD）。持续集成（CI）则在我们想要合并分支/PR等操作时才会发挥作用，而这需要编写在合并之前执行的测试用例。

为了实现持续集成 (CI)，我们将使用 GitHub Workflows。在应用根目录下创建一个名为“.github”的文件夹。在该文件夹内创建一个名为“workflows”的子文件夹。在该子文件夹内创建一个名为“react.yml”的新文件。您也可以使用以下命令来完成此操作。

mkdir .github
cd .github
mkdir workflows
touch react.yml

用文本编辑器打开“react.yml”文件，并粘贴以下代码片段：

name: React CI

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - run: yarn
    - run: yarn test

保存文件。提交更改并推送到您的 GitHub 仓库。就这么简单。现在，每当您修改代码并创建新的 PR 时，它都会自动运行测试用例。您可以通过访问 GitHub 仓库中的“操作”选项卡来查看您的工作流程。

延伸阅读：https://www.atlassian.com/continuous-delivery/principles/continuous-integration-vs-delivery-vs-deployment