使用 S3 和 CloudFront 部署到 AWS

导航到 GitLab 的 CI/CD 设置部分，如下所示：

Figure 14. Figure 14.46: CI/CD in the Settings menu

我们需要添加变量，所以让我们扩展该部分。您将看到一条消息，如以下屏幕截图所示：

Figure 15. Figure 14.47: The Variables section of the GitLab CI/CD settings expanded

接下来，我们将使用 UI 添加 AWS_ACCESS_KEY_ID 和 AWS_SECRET_ACCESS_KEY（这些值未显示，因为它们是敏感的 API 密钥），如下所示：

Figure 16. Figure 14.48: Entering the AWS_ACCESS_KEY_ID environment variable

然后，我们可以使用 UI 添加默认的 AWS_REGION 变量。这不是那么敏感，所以它的值如下面的截图所示：

Figure 17. Figure 14.49: Entering the AWS_DEFAULT_REGION environment variable

现在我们已经在 GitLab CI/CD 上设置了环境变量，我们可以开始更新 .gitlab-ci.yml 文件。 首先，我们希望在构建步骤之后开始缓存 dist 目录。 为此，我们需要向构建作业添加一个缓存属性：

build:
    # other properties
    cache:
        key: $CI_COMMIT_REF_SLUG
        paths:
          - dist
    # other properties
# other jobs

我们现在可以添加部署(deploy)作业，这将是部署(deploy)阶段的一部分。 要访问 AWS CLI，我们将使用 Python 映像 (python:latest) 并在 before_script 步骤中使用 pip（Python 包管理器）安装 AWS CLI。安装 AWS CLI 后，我们将使用我们用于从本地计算机部署的 aws s3 sync 命令在脚本步骤中运行部署：

# other jobs
deploy:
    image: python:latest
    stage: deploy
    cache:
        key: $CI_COMMIT_REF_SLUG
        paths:
          - dist
    before_script:
      - pip install awscli
    script:
      - aws s3 sync ./dist s3://vue-workshop --acl=public-read

首先，我们需要在本地运行生产构建。我们可以使用常规命令来构建所有用于生产的 Vue CLI 项目。 我们还需要检查相关资源（JavaScript、CSS 和 HTML）是否正确生成。

我们期望 dist 文件夹包含类似的结构，如下所示：

Figure 19. Figure 14.51: Sample contents of the dist folder (generated using the tree command) after a Vue CLI production build run

为了运行 GitLab CI/CD，我们需要一个 .gitlab-ci.yml 文件。我们将向 .gitlab-ci.yml 添加一个作业，在构建阶段运行软件包的安装，然后在 Node.js LTS Docker 容器中进行生产构建。我们还将确保缓存生产版本的输出。

一旦我们使用 git add .gitlab-ci.yml 并提交并推送更改，我们应该看到以下 GitLab CI/CD 管道运行，其中包括处于运行状态的 build 作业：

Figure 20. Figure 14.52: The GitLab CI/CD pipeline with the build job running

另一方面，以下屏幕截图表示构建作业已完成并处于通过状态时的 GitLab CI/CD 管道：

Figure 21. Figure 14.53: GitLab CI/CD pipeline with the build job passed

接下来，我们希望将代码质量作业添加到 GitLab CI/CD 的测试阶段（通过更新 .gitlab-ci.yml）。我们将该作业称为 lint，它将运行依赖项的安装以及通过 Vue CLI 进行 linting。

一旦我们使用 git add .gitlab-ci.yml 并提交并推送更改，我们应该看到以下 GitLab CI/CD 管道运行，其中包括处于运行状态的 lint 作业：

Figure 22. Figure 14.54: The GitLab CI/CD pipeline with the lint job running

以下屏幕截图显示了 GitLab CI/CD 管道，其中 lint 作业已成功完成：

Figure 23. Figure 14.55: GitLab CI/CD pipeline with the lint job passed

为了部署我们的应用程序，我们需要创建一个 vue-workshopbook-search S3 存储桶，并使用 S3 控制台启用公共访问。

S3 存储桶创建页面应如下所示：

Figure 24. Figure 14.56: The S3 bucket creation page with vue-workshop-book-search entered as the bucket name

以下屏幕截图显示了 S3 存储桶创建页面上的公共访问和免责声明信息：

Figure 25. Figure 14.57: The S3 bucket creation page with public access enabled and the relevant disclaimer accepted

要通过网络访问 S3 存储桶内容，我们还需要将其配置为网络托管。我们可以通过 S3 控制台配置 Web 托管属性。

它应该配置如下，索引和错误页面设置为 index.html：

Figure 26. Figure 14.58: The S3 bucket properties page with web hosting enabled and configured with the index and error page set to index.html

为了使 GitLab CI/CD 能够在 S3 上创建和更新文件，我们需要将相关的 AWS 密钥添加到我们的 GitLab 存储库 CI/CD 设置中。这些秘密可在 AWS 管理控制台的 Username 下拉列表中找到 | My Security Credentials | Access keys（access key ID 和 加密访问密钥）| 创建新的访问密钥（或选择要重复使用的密钥）。以下屏幕截图显示了这些详细信息：

Figure 27. Figure 14.59: The GitLab CI/CD settings page with required the AWS environment variables added (with values masked)

接下来，我们希望将部署作业添加到 GitLab CI/CD 上的部署阶段（通过更新 .gitlab-ci.yml）。我们将作业称为 deploy；它需要下载 awscli pip 包（Python 包管理器），这意味着最有意义的 Docker 镜像是 python:latest。部署作业将从缓存加载构建的生产版本，使用 pip 安装 awscli，并运行 aws s3sync <build_directory> s3://<s3-bucket-name> --acl=public-read。

一旦我们使用 git add .gitlab-ci.yml 并提交并推送更改，我们应该看到以下 GitLab CI/CD 管道运行，其中包括处于运行状态的部署(deploy)作业：

Figure 28. Figure 14.60: The GitLab CI/CD pipeline with the deploy job running

以下屏幕截图显示了部署作业成功完成的 GitLab CI/CD 管道：

Figure 29. Figure 14.61: The GitLab CI/CD pipeline with the deploy job passed

管道完成后，我们的应用程序应该可以通过 Web S3 端点使用，如以下屏幕截图所示：

Figure 30. Figure 14.62: Book search accessed through the S3 web endpoint URL

最后，我们将创建一个 CloudFront 发行版，充当 Web S3 端点的 CDN。 我们需要将 origin 设置为 S3 存储桶 Web 端点的原点，并确保我们已启用“将 HTTP 重定向到 HTTPS”，如以下屏幕截图所示：