Serverless入门——实战部署VuePress前端项目

在《手把手使用VuePress搭建Element组件文档》这篇文章中,我们使用VuePress搭建了一个极简的Element文档。今天我们尝试使用Serverless把这个网站部署到生产环境中,能够让所有人正常访问。
这边我们使用到的是Serverless Framework + 腾讯云的方式部署该前端项目。如果是第一次接触Serverless的人可能会被这些名字给搞糊涂:“Serverless和Serverless Framework到底是什么?两者是什么关系呢?”
Serverless介绍 Serverless解决了什么问题?
【Serverless入门——实战部署VuePress前端项目】在给Serverless下定义前,我们首先来看看它究竟解决了什么问题?为什么像阿里云和腾讯云这些云厂商都在推荐使用Serverless?首先Serverless要解决的是成本问题。
就拿部署一套博客系统为例,前端采用Vue,后端采用Node.js的MVC架构。我们需要购买像阿里云这些云服务商的Linux虚拟机,在虚拟机上安装Node.js、数据库(Mongo或MySQL)、Web Server(Nginx或者Apache),并进行相应配置。如果你对博客的响应时间有要求的话,可能还需要增加Redis缓存、负载均衡、CDN等。这些算下来一年的最小开销也是几千元。但是如果你使用Serverless,成本可能不到几百元就能搞定。
Serverless入门——实战部署VuePress前端项目
文章图片

大家可以感受一下腾讯云对于Serverless新用户的推广力度。如果你部署的是一个纯前端项目,假设你的访问量不超过百万次,那么可以做到免费也没有问题,访问速度也是要比熟知的Github Page要好很多。
Serverless入门——实战部署VuePress前端项目
文章图片

不仅是实打实的费用成本,对于数据库和服务器等进行配置也有很多运维成本,这些我们都可以交给Serverless去完成,可以让一个零运维经验的人快速部署项目上线。所以Serverless这里省下的成本是金钱 + 时间。
其次Serverless可以提高研发效能。 首先对于运维同学来说,可以通过Serverless把可用性、容灾、备份和监控等传统的运维工作托管到云端。前端同学可以利用Serverless + Node.js实现SFF(Serverless For FrontEnd),让前端同学能够负责数据接口的编排工作。后端同学可以采用FasS(函数即服务) + BaaS(后端即服务)的理念,更加关注领域设计。
Serverless到底是什么?
当和同事谈到Serverless的话题时,大多数人对于Serverless的概念认知很模糊,主要原因是Serverless这个概念所包含的内容很大。总的来说,Serverless可以定义为广义的Serverless和狭义的Serverless两种:

  1. 狭义的Serverless = Serverless Computing架构 = FaaS架构 = Trigger(事件驱动) + FaaS(函数即服务) + BaaS(后端即服务,持久化和第三方服务)
  1. 广义的Serverless = 服务端免运维 = 具备Serverless特征的云服务
Serverless入门——实战部署VuePress前端项目
文章图片

所以Serverless并不是一项具体的技术,而是一种理念。我们常说的Serverless大多都是狭义的Serverless,目前主流的Serverless产品体现就是Function Compute。大多数人从云厂商中第一次接触Serverless就是从函数计算FC开始。对于更多的认识Serverless基本概念,可以看一下这篇文章《6 岁!是时候重新认识下 Serverless 了》
Serverless入门——实战部署VuePress前端项目
文章图片

Serverless Framework介绍
Serverless Framework是一个无服务器应用框架,它通过一个CLI工具与腾讯云进行了紧密的合作,提供了基于组件(serverless components)的完整解决方案。我们可以通过一个简单的 serverless.yml 配置,进行serverless应用的创建、调试和部署工作。
更多文档请参考官网: serverless.com
实战部署VuePress到腾讯云 安装Serverless CLI
使用npm全局安装Serverless CLI
npm install -g serverless

新建YML文件
在项目的根目录下创建 serverless.yml 配置文件。
# serverless.ymlcomponent: website # (必填) 引用 component 的名称,当前用到的是 tencent-website 组件 name: element # (必填) 该 website 组件创建的实例名称 app: element# (可选) 该 website 应用名称 stage: pro # (可选) 用于区分环境信息inputs: src: src: ./docs/.vuepress # 执行目录路径 dist: ./docs/.vuepress/dist # 部署目录路劲 index: index.html # 网站主页入口文件 error: 404.html # 网站错误入口文件 hook: npm run build #构建命令,在代码上传之前执行 region: ap-beijing # 地区 protocol: http # 协议 bucket: element-website #OSS存储桶名称 hosts: - host: element.tanghui.tech # 自定义域名 async: false # 是否同步等待 CDN 配置。配置为 false 时,参数 autoRefresh 自动刷新才会生效,如果关联多域名时,为防止超时建议配置为 true。 autoRefresh: true #开启自动 CDN 刷新,用于快速更新和同步加速域名中展示的站点内容

运行部署命令
运行命令,使用微信扫描出现的二维码后部署
serverless deploy

部署成功后,终端上会出现以下信息
Action: "deploy" - Stage: "pro" - App: "element" - Instance: "element"region:ap-beijing website:http://element-website-1258339218.cos-website.ap-beijing.myqcloud.com cdnDomains: - domain:http://element.tanghui.tech cname:element.tanghui.tech.cdn.dnsv1.com refreshUrls: - http://element.tanghui.tech - https://element.tanghui.techFull details: https://serverless.cloud.tencent.com/apps/element/element/pro

只要访问 http://element-website-1258339218.cos-website.ap-beijing.myqcloud.com这个地址其实就能够看到我们部署成功了。
Serverless入门——实战部署VuePress前端项目
文章图片

但是想要进行自定义域名的访问,还需要在腾讯云的后台进行域名解析操作。
进行域名解析
进入腾讯域名管理后台页面,新增一条CNAME解析记录,记录的值为最终部署成功后CLI出现的cname值。
Serverless入门——实战部署VuePress前端项目
文章图片

保存后稍等几分钟再次访问 http://element.tanghui.tech/ 就能够看到页面已成功访问。怎么样,是不是超级简单~
参考资料
  1. 蒲松洋(秦粤)-Serverless入门课
  2. 6岁了!是时候重新开始认识下Serverless了
  3. 手把手使用VuePress搭建Element的组件库文档官网
源码地址 Github-Lee-Tanghui/vuepress-element-doc

    推荐阅读