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

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

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

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

准备项目源文件

首先,你需要在Github上创建一个空仓库,创建后将项目源文件提交到仓库中。提交后,你需要确保仓库中包含构建dist的必要文件。例如 srcpackage.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分钟之内,除非你的依赖非常非常多。

文章《通过Github Action自动化部署静态文件在COS存储桶》由 MengXi 撰写而成,未经博主许可不得转载文章任何内容(包括图片/视频/文本)。
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇