使用Serverless框架将个人博客部署到腾讯云

  公司新闻     |      2023-08-23
使用Serverless框架将个人博客部署到腾讯云

引言

2021年初,个人博客:serverlesslife.cn使用Serverless框架部署在腾讯云上。总体来说,我体验到了Serverless带来的一些便利:

无需管理或操作服务器按使用付费(有免费配额) 也体验Serverless Framwwork CLI 的便利:大大降低了操作的复杂度,用户体验比控制台更好。当然,也有不好的经历,但总是难以忘怀。在实践的过程中,我也踩过产品的一些坑,也都报了。抱怨不好的经历是为了让它变得更好!

在整个实践过程中,我学到了很多新知识,也明白了一些背后的逻辑。本文将分享它们。

本次实践涉及到的腾讯云云服务

Serverless FrameworkCOS(对象存储)API网关DNSPod 域名注册、域名记录、域名解析SSL证书CDN(内容分发网络)

域名购买与备案

2021/01/21 购买DNSPod中的域名serverlesslife(被腾讯收购)在2011年)。 cn并进行了实名认证。购买域名后,在中国大陆,如果想使用该域名提供服务,还需要对该域名进行备案。 2021年1月31日,在“腾讯云网站备案”小程序提交备案申请;经过两轮审核(腾讯云审核+行政审核),8天后于2021/02/07审核通过。

Serverless Framework 简介

Serverless Framework是serverless.com推出的一款流行的Serverless框架,可以将Serverless功能/应用部署到不同云厂商的Serverless平台上。在国内,腾讯云与serverless.com达成战略合作,对其进行了很多定制和组件,可以轻松地将Serverless功能/应用部署到腾讯云。

使用 Hugo 搭建个人博客

搭建个人独立博客,有很多开源建站工具可供使用,例如:WordPress、Hexo、Jekyll、Hugo等,不胜枚举。因为之前用过Hugo并且比较喜欢它,所以这里使用Hugo搭建个人博客。 Hugo是一个用Go语言实现的静态网站生成器。简单、易用、高效、易扩展、部署快。 Hugo 很容易扩展,因为它有丰富的主题可供选择。这也是我喜欢它的原因之一。每个人都可以选择自己喜欢的主题。

Hugo 网站初始化后,从众多主题中选择了一个主题:LoveIt(多好听的名字啊!)。主题还有很多参数,可以根据自己的需要进行配置。

基本框架搭建完成后,如果你想写博文,只需要添加Markdown文件和相关静态资源文件即可。 Hugo支持本地实时预览,在编写Markdown文件的同时可以通过浏览器实时查看效果。当然,部署到生产服务器时需要进行编译,而编译成站点的任务只需一条hugo命令即可完成。

网站源码托管在GitHub上:https://github.com/serverlesslife-cn/serverlesslife

同样使用GitHub Actions 将代码同步到Gitee:https://gitee.com/serverlesslife/serverlesslife

部署站点

站点编译完成后,可以使用Serverless Framework CLI部署到腾讯云。 Serverless Framework CLI需要配置文件serverless.yml,配置文件内容如下:

component: website #(必填)是指组件的名称,目前使用的是tencent-website组件name: serverlesslife-2021 #(必填)网站组件创建的实例名称app: serverlesslife-2021 #(可选)应用程序name of the website stage: prod # (可选)用于区分环境信息,默认值为devinputs: src: src:/public index: index.html Region: ap-guangzhou bucketName: serverlesslife-2021 protocol: https copy 其中public目录为hugo所在目录站点文件在编译后找到。使用serverlessdeploy命令进行部署。如果本地.env中没有配置secretid和secretkey,则需要使用微信扫描登录。部署过程中,会在COS中创建一个bucket,并将public目录下的文件上传到该bucket中,然后就会生成腾讯云四级域名的访问地址。 Bucket前缀为serverlesslife-2021,工具会自动添加腾讯云账号的APPID作为后缀。

在Serverless Framework控制台下,会有一个名为serverlesslife-2021的应用程序。该应用将会有一个腾讯云四级域名的访问地址,如下:

在COS 存储桶列表页面,可以看到名为serverlesslife-2021-1259061164 的存储桶,如下所示:

自定义域名 + SSL 证书 + 自动刷新 CDN

配置“自定义域名+SSL证书+自动刷新CDN”,需要在serverless.yml中添加一些配置信息。整个serverless.yml文件如下:

component: website #(必填)是指组件的名称,目前使用的是tencent-website组件name: serverlesslife-2021 #(必填)网站组件创建的实例名称app: serverlesslife-2021 #(可选)应用程序网站名称stage: prod # (可选)用于区分环境信息,默认为devinputs: src: src:/public index: index.html Region: ap-guangzhou bucketName: serverlesslife-2021 protocol: https ports ports : - host: serverlesslife.cn autoReRefresh333 60 真实#Open自动CDN刷新,OnlyRefresh: false #首次部署后建议将此参数配置为true,即忽略其他CDN配置,仅在certInfo:上的http2:上执行刷新操作https: switch: certId: 'kBM9GLPt'复制上面的配置文件支持配置多个域名,还可以在每个域名下配置其他信息,如SSL证书ID、自动刷新CDN等。使用自定义域名时,如果需要配置SSL证书,必须使用CDN,因为可以在CDN下配置证书。

SSL证书需要提前在SSL证书控制台申请。此处应用免费证书。该证书的有效期为一年。申请成功后,会有一个ID:kBM9GLPt,如下图:

配置好域名相关信息后,Serverless Framework在部署后做了很多事情,大大简化了配置成本。如果不使用Serverless Framework,则需要在不使用云服务的控制台的多个地方来回配置。

我们来看看Serverless Framework在“自定义域名+SSL证书”的配置背后做了什么:

1、CDN控制台下,证书管理-配置证书,将域名和证书关联在一起,如下图:

2、CDN控制台下,域名管理-添加域名,添加新记录,为serverlesslife.cn启用静态加速,使用COS静态网站作为源站点,生成CNAME:

3. 在COS 控制台下,点击进入serverlesslife-2021-1259061164 存储桶,在域名转移与管理- 自定义CDN 加速域名中,还会看到一条记录:

此时要正常访问域名,需要手动配置域名解析:打开DNSPod控制台,为serverlesslife.cn添加一条CNAME记录,记录值为CDN生成的CNAME:serverlesslife.cn .cdn.dnsv1.com。

注意:第一次部署后,将onlyRefresh参数配置为true,即忽略其他CDN配置,只进行刷新操作,否则部署时间会比较长。

参考

https://hugoloveit.com/https://cloud.tencent.com/document/product/1154/39276https://github.com/serverless-components/tencent-website/blob/master/docs/configure.md