基于云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: 收件人邮箱地址

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

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

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

相关推荐
拉不动的猪1 小时前
vue与react的简单问答
前端·javascript·面试
污斑兔1 小时前
如何在CSS中创建从左上角到右下角的渐变边框
前端
星空寻流年1 小时前
css之定位学习
前端·css·学习
旭久2 小时前
react+antd封装一个可回车自定义option的select并且与某些内容相互禁用
前端·javascript·react.js
是纽扣也是烤奶2 小时前
关于React Redux
前端
阿丽塔~2 小时前
React 函数组件间怎么进行通信?
前端·javascript·react.js
冴羽3 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·svelte
uhakadotcom3 小时前
Langflow:打造AI应用的强大工具
前端·面试·github
前端小张同学3 小时前
AI编程-cursor无限使用, 还有谁不会🎁🎁🎁??
前端·cursor