背景
如果你有使用 vuepress、vitepress、astro 这种文档网站来作为博客然后通过一些云服务厂商的 cos 服务进行部署的需求,那你会发现每次更新完内容后就会需要手动去打包、然后把打包结果放到 cos 服务对应目录下面,如果你有了解 CI/CD,你肯定会想要通过自动化部署来解决问题,还能避免手动误操作导致问题,本着这个想法,我打算尝试一下
知识点
在开发之前,让我们先了解一下 github actions ,它是一个持续集成和持续交付(CI/CD)平台,它的工作原理如下:
- 基于事件的触发系统
- GitHub Actions 通过仓库中的事件来触发工作流程,例如:
- 代码推送(push)
- 拉取请求(pull request)创建
- 问题(issue)创建
- 预定的时间(scheduled)
- 手动触发(workflow_dispatch)
- 运行环境(Runner)
GitHub Actions 是在服务器上运行的。具体来说:
- GitHub 提供了名为"Runner"的虚拟机环境来执行工作流
- 官方提供了 Linux(Ubuntu)、Windows 和 macOS 虚拟机
- 每个 job 都在一个全新的虚拟机实例上独立运行
- 也可以选择使用自己的服务器作为"自托管运行器"(self-hosted runner)
- 工作流组件
GitHub Actions 工作流由以下几个主要部分组成:
- 工作流(Workflow):整个自动化过程的配置
- 作业(Job):工作流中的独立单元,可以并行或顺序执行
- 步骤(Step):作业中的最小执行单位
- 动作(Action):可重用的自动化单元(如 actions/checkout@v3)
- 执行流程
根据yaml配置进行执行我们的流程,下面会讲解
- 安全凭证管理
GitHub 提供了"Secrets"功能来安全地存储敏感信息(如 API 密钥),可以在工作流中使用 ${{ secrets.SECRET_NAME }} 语法引用。
开发
先梳理一下需求:
我目前希望的流程是当我提交代码更新后,通过 github actions 来实现监听文件变化,自动打包、同步到腾讯云 cos 服务
创建静态网站的存储桶
创建,第一步填写好之后,我们下一步,使用默认即可
配置静态网站
配置源站:
去域名解析添加解析
完成上面的内容后,我们就可以把我们网站内容上传上来了!
通过脚本 + github actions 实现文件自动上传
yaml
name: 构建并部署到腾讯云 COS
on:
push:
branches: [main] # 可以改为你的主分支名称
workflow_dispatch: # 允许手动触发
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: 检出代码
uses: actions/checkout@v3
- name: 设置 Node.js 环境
uses: actions/setup-node@v3
with:
node-version: "16" # 根据你的项目需求选择版本
- name: 安装依赖
run: npm install
- name: 缓存依赖
uses: actions/cache@v3
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- name: 构建
run: npm run docs:build
# 添加这个步骤以设置兼容的 Python 版本
- name: 设置 Python 3.10
uses: actions/setup-python@v4
with:
python-version: "3.10"
- name: 安装腾讯云 CLI
run: pip install coscmd
- name: 配置腾讯云 COS 认证
run: |
coscmd config -a ${{ secrets.TENCENT_SECRET_ID }} -s ${{ secrets.TENCENT_SECRET_KEY }} -b ${{ secrets.COS_BUCKET }} -r ${{ secrets.COS_REGION }}
- name: 上传到腾讯云 COS
run: |
coscmd upload -r .vuepress/dist/ /
# - name: 部署到腾讯云 COS
# uses: TencentCloud/cos-action@v1
# with:
# secret_id: ${{ secrets.TENCENT_SECRET_ID }}
# secret_key: ${{ secrets.TENCENT_SECRET_KEY }}
# cos_bucket: ${{ secrets.COS_BUCKET }}
# cos_region: ${{ secrets.COS_REGION }}
# local_path: .vuepress/dist/
# remote_path:
# clean: true # 可选:上传前清空目标路径
这里我们使用 腾讯云 CLI 进行文件上传,这里有几个注意点:
- branches 要设置为自己更新的分支名
- node-version:node 版本需要看一下是否符合你项目的需求
- coscmd upload -r .vuepress/dist/ /
- .vuepress/dist/:代表着你构建产物的路径
- /:你要放到存储桶的对应地址
首先我们去 console.cloud.tencent.com/cam/capi 这里获取我们的 腾讯云 cos 服务需要的TENCENT_SECRET_ID 和 TENCENT_SECRET_KEY,然后还需要:
- COS_BUCKET:桶名称
- COS_REGION :桶地区
获取到这些后,我们需要去 github 配置密钥的地方进行配置。
填写密钥信息:
我们可以进行一次文件上传,然后会去 Actions 下看到:
yaml
# 新增邮件通知服务
- name: 安装 nodemailer
if: success() # 仅在上述步骤成功时执行
run: npm install nodemailer
- name: 发送邮件通知
if: success() # 仅在上述步骤成功时执行
run: node .github/scripts/send-email.js "${{ secrets.EMAIL_USER }}" "${{ secrets.EMAIL_PASS }}" "${{ secrets.EMAIL_TO }}"
最后去 github 添加对应的密钥:
EMAIL_USER: 发件人邮箱地址(如 [email protected])
EMAIL_PASS: 邮箱授权码(不是邮箱密码,对于 QQ 邮箱需要在设置中生成授权码)
EMAIL_TO: 收件人邮箱地址
最后,我们再次进行推送文件,然后你应该会收到邮件:
打开对应网站,发现内容 也更新了!
完美,再也不用手动上传,有这时间可以开心的摸鱼了!