基于云cos服务+github actions实现静态网站自动部署

背景

如果你有使用 vuepress、vitepress、astro 这种文档网站来作为博客然后通过一些云服务厂商的 cos 服务进行部署的需求,那你会发现每次更新完内容后就会需要手动去打包、然后把打包结果放到 cos 服务对应目录下面,如果你有了解 CI/CD,你肯定会想要通过自动化部署来解决问题,还能避免手动误操作导致问题,本着这个想法,我打算尝试一下

知识点

在开发之前,让我们先了解一下 github actions ,它是一个持续集成和持续交付(CI/CD)平台,它的工作原理如下:

  1. 基于事件的触发系统
  • GitHub Actions 通过仓库中的事件来触发工作流程,例如:
  • 代码推送(push)
  • 拉取请求(pull request)创建
  • 问题(issue)创建
  • 预定的时间(scheduled)
  • 手动触发(workflow_dispatch)
  1. 运行环境(Runner)

GitHub Actions 是在服务器上运行的。具体来说:

  • GitHub 提供了名为"Runner"的虚拟机环境来执行工作流
  • 官方提供了 Linux(Ubuntu)、Windows 和 macOS 虚拟机
  • 每个 job 都在一个全新的虚拟机实例上独立运行
  • 也可以选择使用自己的服务器作为"自托管运行器"(self-hosted runner)
  1. 工作流组件

GitHub Actions 工作流由以下几个主要部分组成:

  • 工作流(Workflow):整个自动化过程的配置
  • 作业(Job):工作流中的独立单元,可以并行或顺序执行
  • 步骤(Step):作业中的最小执行单位
  • 动作(Action):可重用的自动化单元(如 actions/checkout@v3)
  1. 执行流程

根据yaml配置进行执行我们的流程,下面会讲解

  1. 安全凭证管理

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 进行文件上传,这里有几个注意点

  1. branches 要设置为自己更新的分支名
  2. node-version:node 版本需要看一下是否符合你项目的需求
  3. coscmd upload -r .vuepress/dist/ /
    1. .vuepress/dist/:代表着你构建产物的路径
    2. /:你要放到存储桶的对应地址

首先我们去 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: 收件人邮箱地址

最后,我们再次进行推送文件,然后你应该会收到邮件:

打开对应网站,发现内容 也更新了!

完美,再也不用手动上传,有这时间可以开心的摸鱼了!

相关推荐
萌萌哒草头将军6 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
小彭努力中6 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊7 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
LinDaiuuj7 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝7 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3117 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion8 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜8 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf
珠峰下的沙砾8 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
航Hang*8 小时前
WEBSTORM前端 —— 第2章:CSS —— 第3节:背景属性与显示模式
前端·css·css3·html5·webstorm