专栏首页小程序·云开发专栏【玩转腾讯云】比快更快,Github Action + 云开发部署静态网站
原创

【玩转腾讯云】比快更快,Github Action + 云开发部署静态网站

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

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

Pages 国内测速数据

云开发静态托管介绍

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

首个环境可享受 1GB 容量和每月 5GB 流量的免费额度,对于访问量不是很大的个人博客应该足够了。如果流量大也没关系,计费是按照具体使用收费的按量付费方式,具体信息可以查看计费价格文档 https://cloud.tencent.com/product/wh/pricing

云开发静态托管部署的网站,还可以使用云开发的提供的一站式 Serverless 后端能力,例如云函数、云数据库、云存储、身份服务等。比如可以在静态托管的个人博客上面使用云函数和云数据库实现评论、留言板功能等,或者可以把博客的内容管理从原来的静态文件部署变为动态内容管理等,拓展的用法非常的多,开发者可以继续深入探索。

如何通过 Github Action 一键部署到云开发

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

例如开发者的个人博客 Github 项目结构如下:

|-- src
|-- build
|-- README.md 

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

编写 Github Action 文件

首先在项目目录配置如下的 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 来部署静态文件。

注意配置文件中参数部分的 secretIdsecretKeyenvId属于敏感信息,需要放在项目的 secret 存储中,这里不用填写真实的值,只需要按照上面实例填写变量即可。

staticSrcPath 这里填写了静态网站构建产生的目录 build,如果想把静态资源部署到云端的某个子目录而不是根目录,可以再配置一个参数 staticDestPath

配置云开发访问信息

我们还需要在项目的 Secrets 中配置 SECRET_IDSECRET_KEYENV_ID 这几个私密信息,下面是具体的配置方式。

首先要开通云开发静态网站,可以参考开通指南:https://docs.cloudbase.net/hosting/,开通环境后即可得到环境ID ENV_ID,然后在腾讯云 访问管理 页面可以配置一对 API 访问密钥,也就是SECRET_IDSECRET_KEY

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

配置完之后就可以提交代码体验自动部署了,每次 git push Actions 都会自动运行,将项目的静态资源部署到自己的云开发静态托管环境,部署成功之后即可通过云开发提供的二级域名访问来自己的网站。

云开发静态托管测速数据

配置自定义域名

云开发提供的免费的二级域名下行速度有所限制,开发者最好绑定一个自己的域名,绑定域名是免费的,还可以在腾讯云配置一个免费的 SSL 证书,来通过 HTTPS 访问自己的网站。

自定义域名的方法可以参考这篇文档 https://docs.cloudbase.net/hosting/custom-domain.html

配置完成后,测试下部署在云开发静态托管的网站的访问速度,根据测速数据可以看到各地的访问速度都非常快。

更多扩展玩法

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

Tencent CloudBase Github Action 扩展市场地址

https://github.com/marketplace/actions/tencent-cloudbase-github-action

Tencent CloudBase Github Action 代码开源地址

https://github.com/TencentCloudBase/cloudbase-action

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【攻略】如何在云开发中使用 Redis?

    默认情况下,云开发的函数部署在公共网络中,只可以访问公网。如果开发者需要访问腾讯云的 Redis、TencentDB、CVM、Kafka 等资源,需要建立私有网...

    Booker Zhao
  • 实战分享: 小程序云开发玩转订阅消息

    微信官方为提升小程序模板消息能力的使用体验,对模板消息的下发条件进行了调整。原有的小程序模板消息接口于 2020 年 1 月 10 日下线,届时将无法使用旧的小...

    Booker Zhao
  • 基于服务树的动态资源管理方法

    如果非要说CMDB是ITOM的核心元数据,那么服务树就是CMDB的核心数据。如果非要说应用CMDB最核心的精髓在哪儿,那么服务树必须是其一。

    用户1593318
  • VGRAPH路径规划(Lozano-Perez and Wesley, 1979)

    本文参考了以下项目代码(特别是地图数据、增长障碍物部分代码、线段是否相交检查部分代码),特表示感谢:

    mwangblog
  • Spring事务失效的两种情况

    spring的事务默认是对RuntimeException进行回滚,而不继承RuntimeException的不回滚。因为在java的设计中,它认为不继承Run...

    逝兮诚
  • 【技术贴】从拜占庭问题,谈区块链技术实现及政务应用

    区块链大本营
  • springcloud经验

    一笠风雨任生平
  • 移动安全加固基础版操作指引

    乐固加固提供了专业版加固服务,相比普通版本整体保护强度更高,主要包括SO加壳保护、APK 防二次打包保护、资源防篡改、内存防dump等服务,目前服务于公司内百万...

    腾讯云@移动安全
  • 人类能完全约束人工智能机器人吗?

    前段时间看过一个新闻,Facebook的人工智能实验证关闭了两台机器人的电源,原因是他(它)们使用了自己"发明"的语言进行联系和沟通。 ? Facebook有个...

    企鹅号小编
  • 主从替换之后的复制风暴

    一套MySQL主-备-备-备数据库,其中的备库升级到主库之后,系统监控报警 Seconds_Behind_Master 瞬间为0,瞬间为数十万秒。第一感觉是遇...

    用户1278550

扫码关注云+社区

领取腾讯云代金券