准备知识

1、GitHub Actions

GitHub Actions 是 Github 官方提供的自动化软件开发工作流程。

GitHub Actions 帮助您自动完成软件开发周期内的任务。
GitHub Actions 是事件驱动的，在 GitHub Actions 的仓库中自动化、自定义和执行软件开发工作流程。
您可以发现、创建和共享操作以执行您喜欢的任何作业（包括 CI/CD），并将操作合并到完全自定义的工作流程中。

快速入门参考

2、云开发CloudBase

后端即服务

CloudBase 是腾讯云官方提供的可靠、丰富的一站式后端能力。
并提供多语言 SDK，轻松开发多端应用。

入门文档

项目配置

在这里以vuepress的部署为例

1、添加CI文件

在项目中新建 .github/workflows/ci.yml 文件，并拷入以下代码：

  1. # 工作流程名称
  2. name: Blog CI
  3. on: [push]
  5. # 触发构建动作
  6. #    push:
  7. #        # 触发构建分支[默认分支]
  8. #        branches: [ $default-branch ]
  9. #    pull_request:
  12. # 作业是在同一运行服务器上执行的一组步骤
  13. jobs:
  14.     # 作业名称
  15.     deploy:
  16.         # 运行器（这里是Ubuntu系统）
  17.         runs-on: ubuntu-latest
  18.         # 作业名称（同deploy）
  19.         name: Deploy
  20.         # 步骤是可以在作业中运行命令的单个任务
  21.         # 步骤可以是操作或 shell 命令
  22.         steps:
  23.             # 检出推送的代码
  24.             - name: Checkout
  25.               uses: actions/checkout@v2
  26.             # 发布到云开发
  27.             - name: Deploy to Tencent CloudBase
  28.               uses: TencentCloudBase/cloudbase-action@v2
  29.               with:
  30.               # 以下参数配置于 github secrets
  31.                  secretId: ${{secrets.SECRETID}}
  32.                  secretKey: ${{secrets.SECRETKEY}}
  33.                  envId: ${{secrets.ENV_ID}}

ci.yml文件
image.png

2、获取并替换以下变量

secretId、secretKey、envId

secrets配置于GitHub仓库当中。

腾讯云secretId与secretKey获取

访问管理
登录腾讯云，访问管理，复制secretId与secretKey。
通过secretId与secretKey活动对应的腾讯云账号部分权限，安全起见，可以通过策略去添加子账号。
image.png

云开发envId获取

云开发控制台
登录腾讯云，打开云开发控制台，获取云开发环境id。
image.png

GitHub Secret添加

在GitHub仓库中，Settings/Secrets中添加以上变量，这样就可以在 ci.yml文件中访问设置的Secret变量。
image.png

3、添加 cloudbaserc.json 文件

配置说明
在根目录添加 cloudbaserc.json文件，并添加一下代码。

  1. {
  2.     "envId": "{{env.ENV_ID}}",
  3.     "$schema": "https://framework-1258016615.tcloudbaseapp.com/schema/latest.json",
  4.     "framework": {
  5.         "name": "blog",
  6.         "plugins": {
  7.             "client": {
  8.                 "use": "@cloudbase/framework-plugin-website",
  9.                 "inputs": {
  10.                     "buildCommand": "npm run build",
  11.                     "outputPath": "docs/.vuepress/dist",
  12.                     "cloudPath": "/"
  13.                 }
  14.             }
  15.         }
  16.     }
  17. }

不同的项目可以修改 打包输出dist目录，outputPath。

至此，准备工作完成。

触发部署

在ci.yml，我们设置了 只要push了代码就会触发GitHub Actions，继而触发CloudBase的代码部署。

一个部署完成的Action。
image.png

最后

演示项目的GitHub Actions

感谢Star…