使用 Serverless Framework 部署个人博客到腾讯云

donghui2020 2021-02-22 21:02:00
github cos yml hugo


serverlesslife.cn 上线背后的故事~
本文来源: ServerlessLife 公众号
2021年年初,使用 Serverless Framework  在提腾讯云上部署了一个个人博客:serverlesslife.cn。
整体下来体会到了 Serverless 带来的一些便利:
  • 不需要管理或运维服务器
  • 按使用付费(有免费额度)
也体验到了 Serverless Framwwork CLI 的便利性:它大大降低了操作复杂度,用户体验完胜控制台。
 
在整个实践中,学到了很多新的知识,了解了一些背后的逻辑,本文将对它们做一下分享。
 

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

  • Serverless Framework
  • COS(对象存储)
  • API 网关
  • DNSPod 域名注册、域名备案、域名解析
  • SSL 证书
  • CDN(内容分发网络)
 

域名购买与备案

2021/01/21 在 DNSPod(2011 年被腾讯收购)购买了域名 serverlesslife.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 # (必填) 引用 component 的名称,当前用到的是 tencent-website 组件
name: serverlesslife-2021 # (必填) 该 website 组件创建的实例名称
app: serverlesslife-2021 # (可选) 该 website 应用名称
stage: prod # (可选) 用于区分环境信息,默认值是 dev
inputs:
  src:
    src: ./public
    index: index.html
  region: ap-guangzhou
  bucketName: serverlesslife-2021
  protocol: https

 

其中 public 目录是 hugo 编译之后站点文件所在目录。
使用 serverless deploy 命令进行部署操作,如果没有在本地的 .env 配置 secretid 和 secretkey,需要使用微信进行扫描登录。
部署过程中,会在 COS 创建一个 bucket 并将 public 目录下的文件上传到这个 bucket 中,然后会生成一个腾讯云四级域名的访问地址。其中该 bucket 前缀是 serverlesslife-2021,工具会自动加上腾讯云账号的 APPID 作为后缀。
 
Serverless Framework 控制台下,会有一个应用名称为 serverlesslife-2021 的应用,这个应用会有一个腾讯云四级域名的访问地址,如下所示:
 
在 COS 对象存储的存储桶列表页,可以看到有一个名称为 serverlesslife-2021-1259061164  的 bucket,如下所示:
 

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

配置「自定义域名 + SSL 证书 + 自动刷新 CDN」还需要在 serverless.yml 中增加一些配置信息,整个 serverless.yml 文件如下:
component: website # (必填) 引用 component 的名称,当前用到的是 tencent-website 组件
name: serverlesslife-2021 # (必填) 该 website 组件创建的实例名称
app: serverlesslife-2021 # (可选) 该 website 应用名称
stage: prod # (可选) 用于区分环境信息,默认值是 dev
inputs:
  src:
    src: ./public
    index: index.html
  region: ap-guangzhou
  bucketName: serverlesslife-2021
  protocol: https
  hosts:
    - host: serverlesslife.cn
      autoRefresh: true #开启自动 CDN 刷新,用于快速更新和同步加速域名中展示的站点内容
      onlyRefresh: false #建议首次部署后,将此参数配置为 true,即忽略其他 CDN 配置,只进行刷新操作
      https:
        switch: on
        http2: on
        certInfo:
          certId: 'kBM9GLPt'

 

上面的配置文件支持配置多个域名,每个域名下面还可以配置其他信息,如 SSL 证书 ID、自动刷新 CDN 等。
使用自定义域名时,如果需要配置 SSL 证书,那么就必须使用 CDN,因为在 CDN 下可以配置证书。
 
SSL 证书需要事先在 SSL 证书控制台申请,这里申请了一个免费证书,证书有效期一年,申请成功后会有一个 ID:kBM9GLPt,如下所示:
 
在配置好域名相关信息后,Serverless Framework 在部署后做了大量的事情,大大简化了配置成本。
如果不用 Serverless Framework 的话,那么就需要在不用云服务的控制台多个地方来回进行配置。
 
下面看下在配置「自定义域名 + SSL 证书 」背后,Serverless Framework 都做了哪些事情:
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 配置,只进行刷新操作,否则部署时间会相对比较长。
 

参考

 
版权声明
本文为[donghui2020]所创,转载请带上原文链接,感谢
https://my.oschina.net/donhui/blog/4959773

  1. vue.js项目win10 npm install的时候报错
  2. springboot 开启http2
  3. Vue事件总线(EventBus)
  4. jQuery EasyUI使用教程:自定义数据网格分页
  5. 使用OkHttp和OkHttpGo获取OneNET云平台数据
  6. Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件
  7. Python belongs to back-end development or front-end development? Introduction to Python!
  8. HTTP 1.x 学习笔记 —— Web 性能权威指南
  9. Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件
  10. HTTP 1.x 学习笔记 —— Web 性能权威指南
  11. Javascript中的事件冒泡与捕获
  12. The root element is missing 解决方法
  13. Javascript中的事件冒泡与捕获
  14. 010_ HTML5
  15. 020_ CSS3
  16. 030_ JavaScript
  17. Anti shake and throttling and corresponding react hooks package
  18. Using CSS in JS in svelte
  19. Pure CSS free website with dark mode switching function
  20. Front end interview daily 3 + 1 - day 678
  21. How to insert an element into the specified index of an array?
  22. 配置证书使得ngnix能够发布https的可信网站
  23. HTTP接口调试利器!4.8万Star的HTTP命令行客户端!
  24. 前端url链接带的参数加密
  25. HTTP接口调试利器!4.8万Star的HTTP命令行客户端!
  26. Is react server components OK?
  27. Summary of front end basic knowledge (4) - webpack
  28. Sass nesting rule
  29. 前端三大框架:数据绑定与数据流
  30. axios 源码阅读(一)--探究基础能力的实现
  31. Javascript中的事件冒泡与捕获
  32. #研发解决方案#易车前端监控系统
  33. 【JS】877- 35 个 JavaScript 的奇葩知识,长见识了!
  34. #研发解决方案#易车前端监控系统
  35. 高性能 Nginx HTTPS 调优 - 如何为 HTTPS 提速 30%
  36. Front end, school recruitment, Taobao, guide
  37. Front end, social recruitment, Taobao, guide
  38. javascript 十大经典排序
  39. Draw a mellow cactus with the boneless technique of Meticulous Brushwork
  40. HTTP 1.x 學習筆記 —— Web 效能權威指南
  41. Vue3元件(九)Vue + element-Plus + json = 動態渲染的表單控制元件
  42. 我的 HTTP/1.1 好慢啊!
  43. Vue為何採用非同步渲染
  44. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for
  45. Front end monastery
  46. How to quickly understand a new front end project?
  47. webpack4.X核心工具库之tapable实例对象Hook
  48. webpack4.X核心工具库之tapable实例对象Hook
  49. C++使用libcurl进行http通讯
  50. Can be directly used in HTML special character table Unicode character set
  51. C++使用libcurl进行http通讯
  52. Java traverses list < string > and takes out the string elements in it, and splices them with ","
  53. Self taught web front end more than two months, talk about my harvest and progress, learning summary
  54. vue 中使用 css 变量
  55. 深入了解React中state和props的更新
  56. 百度分享不支持https的解决方案
  57. [practical] ABAP mail sending (HTML + attachment)
  58. [practical] ABAP mail sending (HTML + attachment)
  59. Teach you how to select products with less profit and competition in Amazon Product Development (1)
  60. 【微前端】微前端最终章-qiankun指南以及微前端整体探索