一次横跨三个不同云基础设施的超长流水线尝试

前言

Tencent Pages 是腾讯云推出的一款静态网站托管服务，可以通过腾讯云的自有 CDN 将静态网站部署至全球访问（免费）。
最近，我一直在致力于将部分静态网站迁移到这个服务上。然而，由于 Pages 服务本身的一些限制，例如 yarn build 时内存溢出，导致部署失败。

因此，我考虑了多种方案来实现自动化部署，以下是我探索的几种选择：

1、从 Docker 镜像中直接将 HTML 文件复制出来，然后手动提交到 GitHub 仓库。
2、使用 Aliyun Flow 进行代码编译，编译后的代码直接提交到 GitHub 仓库。
3、使用 GitHub Actions 进行编译后提交到 GitHub 仓库。

最终，我选择了第二种方案。第一种方案需要手动操作，第三种方案无法直接提交代码。

部署流程

部署方案经历了多次曲折，包括编译失败和 Git 代码提交失败等。最终完整的流程如下：
1、将https://github.com/standardnotes/app 仓库 fork 到自己的 GitHub 仓库中。
2、在 Aliyun Codeup 新建同名仓库，并使用 GitHub Actions 将代码提交到 Aliyun Codeup。
3、在 Aliyun Flow 中新建一个流程，将 Aliyun Codeup 中的代码进行编译，编译后的 dist 提交到 OSS。
4、在 Aliyun Codeup 新建 dist 仓库，将 OSS 中的 dist 文件提交到 dist 仓库。
5、在 GitHub 新建 dist 仓库，并使用 GitHub Actions 将 dist 仓库中的代码提交到 GitHub dist 仓库。
6、在 Tencent Pages 中新建一个静态网站，将 GitHub dist 仓库中的代码部署到 Tencent Pages 中。

最终通过自定义域名访问 Tencent Pages 中的静态网站。

这是一个超长的流水线流程，但最终实现了自动化部署，省去了很多手动操作，也是一次不错的尝试。

总流程：将 GitHub 仓库中的代码通过 GitHub Actions 提交到 Aliyun Codeup → Aliyun Flow 编译并上传到 OSS → Aliyun Flow 下载并提交到 GitHub → 最终部署到 Tencent Pages。

相关细节

GitHub Actions 定时同步仓库

GitHub Actions 的定时同步使用了 dislazy/hub-mirror-action@v2.0.3，具体配置如下：

# This is a basic workflow to help you get started with Actions

name: github2codeup

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  #   push:
  #  branches: [ main ]  注释代表全部分支、
  schedule:
    - cron: 0 */8 * * *

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  repo-sync:
    env:
      dst_key: ${{ secrets.GIT_PRIVATE_KEY }}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          persist-credentials: false

      - name: sync github repo to codeup repo
        uses: dislazy/hub-mirror-action@v2.0.3
        if: env.dst_key
        with:
          # 必选，需要同步的 git 用户（源）
          src: 'github.com/${{ github.repository_owner }}'
          # 必选，需要同步到的 git 用户（目的）
          dst: 'codeup.aliyun.com/${{ github.repository_owner }}'
          # 必选，公钥对应的私钥，https://gitee.com/profile/sshkeys
          dst_key: ${{ secrets.GIT_PRIVATE_KEY }}
          # 直接取当前项目的仓库名
          static_list: "standrardnotes-app"
          #启用git push -f强制同步，注意：开启后，会强制覆盖目的端仓库。
          force_update: true
          #配置cache
          cache_path: /codeup/workspace/codeup-cache

Aliyun Flow 编译并上传至 OSS

编译过程比较简单，主要是将 Aliyun Codeup 中的代码进行编译，编译后的 dist 提交到 OSS，具体配置如下：

其中 webhook 的作用是当构建流程完成并上传至 OSS 后，调用另外一个 flow 流水线，下载 OSS 文件然后提交代码到 Aliyun Codeup 中。

Aliyun Flow 将 OSS 文件下载并上传至仓库

这一步是 Aliyun Flow 的核心，主要是将 OSS 中的文件下载到 CI 中，然后提交到 Aliyun Codeup 中，提交后调用 GitHub API 启动 GitHub Actions，具体配置如下：

1、提交代码到 Aliyun Codeup 的配置如下：

# input your command here
echo hello,world!
git config --global user.email "xx@xx.com"
git config --global user.name "jack"
git config --global push.default simple
echo ${TIMESTAMP} > version.txt
ls -a 
git add .
git commit -m 'fix'
git push -f

2、调用 GitHub API 请求的配置如下：

# GITHUB_TOKEN  token
# GITHUB_API_URL https://api.github.com/repos/username/repo/dispatches
# GITHUB_EVENT_TYPE  自己在github action中定义的event_type: codeup2github
# client_payload 自己在github action中定义的client_payload
curl -X POST -H "Accept: application/vnd.github.v3+json" \
-H "Authorization: token ${GITHUB_TOKEN}" \
  ${GITHUB_API_URL} \
  -d '{
"event_type": "'${GITHUB_EVENT_TYPE}'",
"client_payload": {
  "repo": "'${CI_SOURCE_NAME}'",
  "message": "github action sync"
}
}'

3、API对应的 GitHub Actions 配置如下：

# This is a basic workflow to help you get started with Actions

name: codeup2github

# Controls when the workflow will run
on: 
 repository_dispatch:
   types:
     # 自定义的事件类型
     - codeup2github

  # Allows you to run this workflow manually from the Actions tab
 workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  repo-sync:
    env:
      # GIT_PRIVATE_KEY 同一个公钥在github 和 codeup中都需要配置
      dst_key: ${{ secrets.GIT_PRIVATE_KEY }}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          persist-credentials: false

      - name: sync codeup repo to github repo
        uses: dislazy/hub-mirror-action@v2.0.3
        if: env.dst_key
        with:
          # 必选，需要同步的 git 用户（源）
          src: 'codeup.aliyun.com/${{ github.repository_owner }}'
          # 必选，需要同步到的 git 用户（目的）
          dst: 'github.com/${{ github.repository_owner }}'
          # 必选，Gitee公钥对应的私钥，https://gitee.com/profile/sshkeys
          dst_key: ${{ secrets.GIT_PRIVATE_KEY }}
          # 直接取当前项目的仓库名
          static_list: ${{ github.event.client_payload.repo }}
          #启用git push -f强制同步，注意：开启后，会强制覆盖目的端仓库。
          force_update: true
          #配置cache
          cache_path: /codeup/workspace/${{ github.event.client_payload.repo }}

Tencent Pages 部署

Pages 部署非常简单，选择仓库，然后将静态文件上传到 Pages 中，然后选择自定义域名即可。

总结

最初，我直接使用 Tencent Pages 进行部署，但由于内存溢出导致部署失败，经过多次配置仍无法解决。然后，我考虑使用 Aliyun Flow 进行打包构建，在此过程中也遇到了一些奇怪的问题，例如 Node 和 Yarn 版本要求不一致。在编译成功后，我还尝试过直接克隆一个新仓库并提交，但也失败了。

最终，通过 GitHub Actions 的定时同步，将代码提交到 Aliyun Codeup，然后通过 Aliyun Flow 进行编译，编译后的代码提交到 OSS，再通过 Aliyun Flow 将 OSS 中的代码下载到 CI 中，然后提交到 Aliyun Codeup，最后通过 GitHub Actions 将代码提交到 GitHub，最终部署到 Tencent Pages 中。

折腾一些有趣的东西，自己也会从中得到收获与满足。共勉。