如何合作 Github Action 扩展,自动部署到云开发

无需加好友免费技术支持

作者： bookerzhao，腾讯 CSIG web前端开发工程师

Github 为静态页面显示提供开源项目 Pages 服务方面，很多开发者都在上面托管了自己的静态网站和博客，很多开源项目的案例和文档页面也采用了这种方式。不过由于 Pages 的 CDN 大多数节点在国外，在中国的访问速度不是很理想。许多开发者希望提高网站在中国的访问速度和稳定性。今天，我将介绍如何合作 Github Action 持续集成服务和 云开发 Github Action 扩展，自动部署到云开发静态托管服务，访问速度更快。

云开发静态托管是云开发提供的静态网站托管能力（HTML、CSS、JavaScript、字体等)由腾讯云对象存储 COS 腾讯云拥有多个边缘网点 CDN 提供支持。

云开发静态托管是云开发提供的静态网站托管能力，静态资源（HTML、CSS、JavaScript、字体等)由腾讯云对象存储 COS 腾讯云拥有多个边缘网点 CDN 提供支持。通过腾讯云控制台、命令行工具和下面提到的云开发 Github Action 管理部署。云开发提供免费的二级域名(不绑定自定义域名的下行速度有限)，支持开发者自定义域名的免费绑定。

享受第一个环境 1GB 容量和每月 5GB 免费流量应该足够个人博客，个人博客访问量不访问量不是很大。如果流量很大也没关系，费用是根据具体使用费用的支付方式，具体信息可以查看费用价格文件

云开发静态托管部署的网站也可以使用云开发提供的一站式网站 Serverless 云函数、云数据库、云存储、身份服务等后端能力。例如，云函数和云数据库可以用于静态托管的个人博客，以实现评论和留言板功能，或者博客的内容管理可以从原始静态文件部署转变为动态内容管理。有很多用途可以扩展，开发者可以继续深入探索。

下面演示如何将 Github 静态页面自动部署到云开发的静态托管中，以获得稳定的访问速度和更多的扩展能力。

例如，开发者的个人博客 Github 工程结构如下：

|-- src

|-- build

|-- README.md

希望项目下 build 将目录生成的静态网站代码部署到云开发开通的静态网站托管的根目录下。

首先，项目目录配置如下 Github Action 文件

.github/workflows/main.yml，若已配置 Github Action 不需要重建，然后参考以下配置填写。

on: [push] # push 代码时触发

jobs:

deploy:

runs-on: ubuntu-latest

name: Tencent Cloudbase Github Action Example

steps:

- name: Checkout

uses: actions/checkout@v2

# 使用云开发 Github Action 部署

- name: Deploy static to Tencent CloudBase

id: deployStatic

uses: TencentCloudBase/cloudbase-action@v1

with:

# 云开发访问密钥 secretId 和 secretKey

secretId: ${{ secrets.SECRET_ID }}

secretKey: ${{ secrets.SECRET_KEY }}

# 云开发环境id

envId: ${{ secrets.ENV_ID }}

# Github 项目静态文件路径

staticSrcPath: build

可见配置主要用于配置 云开发 Github Action 扩展

TencentCloudBase/cloudbase-action@v1 部署静态文件。

在配置文件中注意参数部分 secretId、secretKey 、envId属于敏感信息，需要放在项目中 secret 在存储过程中，不需要在这里填写真实值，只需按照上述实例填写变量即可。

staticSrcPath 这里填写了静态网站建设产生的目录 build，如果您想将静态资源部署到云中的子目录，而不是根目录，您可以配置另一个参数 staticDestPath 。

我们还需要项目 Secrets 中配置 SECRET_ID、SECRET_KEY、ENV_ID 以下是这些私人信息的具体配置方法。

首先要开通云开发静态网站，可以参考开通指南:

环境开放后，云开发环境列表 页面可以获得环境ID ENV_ID ，然后在腾讯云 访问管理 一对可配置一对 API 访问密钥，即SECRET_ID、SECRET_KEY。

然后的 Github 项目内的 Setting/Secrets 里设置 SECRET_ID, SECRET_KEY, ENV_ID 信息即可。

配置后，可以提交代码体验自动部署，每次 git push Actions 它将自动运行，将项目的静态资源部署到自己的云开发静态托管环境中。部署成功后，您可以访问云开发提供的二级域名。

云开发提供的免费二级域名的下行速度有限。开发人员最好绑定自己的域名。绑定域名是免费的腾讯云也可以配置免费域名 SSL 通过证书 HTTPS 访问自己的网站。

可以参考本文档自定义域名的方法

配置完成后，根据测速数据可以看出，部署在云开发静态托管网站的访问速度非常快。

云开发 Tencent CloudBase Github Action 这个扩展会 Github 项目自动部署到云开发环境，目前支持静态托管功能，后续部署其他资源，如使用 Node JS 、 Java、PHP 一键部署到云开发等语言开发服务端项目，来获得 Serverless 动态网站服务。或者自动化部署带有数据库、前端、后端的全栈应用。

Tencent CloudBase Github Action 扩大市场地址：

Tencent CloudBase Github Action 代码开源地址：

欢迎大家多体验，Star 支持或者提交 Issue / Pull request 参与贡献。

云开发还推出了9.9元静态网站托管包年度赞助计划。只要您是技术博客/技术网站，迁移到云开发静态网站托管服务，您就可以申请赞助计划。 申请链接： 静态网站托管产品介绍：