通过Github Action自动化部署静态文件在COS存储桶

如果您有自动化部署 VuePress/dumi/Astro 等文档站或者是 Hexo 等静态个人博客的需求，您可能需要 Github Action 的帮助。如果你部署在Vercel上，Vercel会全自动完成所有配置操作，只需提交项目源文件即可，无需按照此教程配置工作流文件。

本篇教程建立在你有将静态网站全自动部署在腾讯云COS的需求。

本教程将以部署 Astro站点 为例向你演示如何编写Workflow File，不同框架的指令/Node版本可能不同，请以实际为准。

准备项目源文件

首先，你需要在Github上创建一个空仓库，创建后将项目源文件提交到仓库中。提交后，你需要确保仓库中包含构建dist的必要文件。例如 src 和 package.json 。

创建Workflow File

新仓库正常情况下不会有 .github 目录，这时候你可以手动创建 .github/workflows 文件夹。创建后在此文件夹内创建一个yml文件，这个文件就是你的Action工作流配置文件，我们将在这个文件中配置Action。

比如，我们创建一个 push-online.yml 文件，用于将构建后的dist上传到COS存储桶中

配置yml

基础配置

首先，我们要对工作流进行命名，还要设置对应的分支（同时可以配置运行时忽略的文件/目录）。

name: BuildOnCOS  # 将工作流命名为“BuildOnCOS”
on:
  push:
    branches:
      - master  # 提取master分支下的文件
    paths-ignore:  # 忽略的文件/文件夹列表
      - README.md
      - LICENSE
      - .github/*
      - .gitattributes

最好不要使用中文命名，否则可能会出现部分问题。

运行环境配置

得益于Github的强大配置，我们可以在上面运行Ubuntu虚拟机以及各种虚拟环境。在这个示例中我们使用 Ubuntu&Node.JS 环境进行build和upload。

• node-version：设置Node版本，可以是latest最新版也可以指定版本号。
• cache：包管理器选择，用于缓存依赖，默认情况下是 npm 。
• cache-dependency-path：你的包管理文件名，通常情况下是 package.json 。
• run：安装依赖指令，通常情况下是 包管理器+install 。

jobs:
  PushToCOS:
    runs-on: ubuntu-latest  # 设置运行环境，这里是Ubuntu的最新镜像
    steps:
      - name: Checkout Branch  # 建议设置分支检查，以免出现问题
        uses: actions/checkout@v4
        with:
          ref: master  # 这里的分支和“基础配置”中的分支一致
      - name: Setup node
        uses: actions/setup-node@v4  # 初始化Node环境
        with:
          node-version: 20  # 可以自选Node版本，详情参阅官方文档
          check-latest: false  # 建议false
          cache: 'npm'  # 选择包管理器，默认是npm
          cache-dependency-path: package.json  # 你的包管理文件名，默认情况下不需要更改
      - name: Install Packages
        run: npm install  # 安装依赖文件，否则无法构建静态文件
      - name: Build project
        run: npm run build

如果试运行通过，可以进行最后一步配置文件上传到COS存储桶的步骤。

COS配置

首先，感谢zkqiang的贡献，提供了在Action上上传文件到TencentCOS的程式。

• args：COS命令，可参考TencentCOSCLI文档。
• secret_id&secret_key：RAM账户密钥，在“控制台-访问管理”配置。建议新建一个专用RAM账户用于Action。这些字符切忌不要直接写在yml中，在仓库的环境值中配置。
• bucket：存储桶名称，建议在环境值中配置。
• region：存储桶ap地域，复制完整。

- name: Upload COS
  uses: zkqiang/tencent-cos-action@v0.1.0
  with:
    args: upload -r ./dist/ /client  # 构建后的文件目录
    secret_id: ${{ secrets.SECRET_ID }}  # 这些密钥将在Github仓库环境值中配置
    secret_key: ${{ secrets.SECRET_KEY }}
    bucket: ${{ secrets.BUCKET }}
    region: ap-hongkong  # 你的COS存储桶地域，复制完整ap到此处

环境值配置

完成yml的配置，我们需要写入环境值以替换Workflow File中的 ${{ secrets.XXXXXXX }} 字样。配置环境值可以保护您的数据安全，以防被不法分子替换COS文件。

点击仓库的“setting”，进入设置页面。在设置菜单中选择“Secrets and variables”，并在二级菜单中选择“Actions”。在“Repository secrets”中点击右侧绿色按钮“New repository secret”即可创建一个仓库环境值。

在新页面中，输入相应的Name和Secret并单击“Add secret”以完成配置这个变量。

我们需要配置的Secret：

• BUCKET：存储桶名称（如下图）
• SECRET_ID：子账户操作ID
• SECRET_KEY：子账户操作密钥

提交变量之后，您的Action理应自动运行并会把构建后的dist文件上传到COS桶中。这些操作是即时生效的。流程大概在1分钟之内，除非你的依赖非常非常多。