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

Posted 2021-08-21 熠辉

在《手把手使用VuePress搭建Element组件文档》这篇文章中，我们使用VuePress搭建了一个极简的Element文档。今天我们尝试使用Serverless把这个网站部署到生产环境中，能够让所有人正常访问。

这边我们使用到的是Serverless Framework + 腾讯云的方式部署该前端项目。如果是第一次接触Serverless的人可能会被这些名字给搞糊涂：“Serverless和Serverless Framework到底是什么？两者是什么关系呢？”

Serverless介绍

Serverless解决了什么问题？

在给Serverless下定义前，我们首先来看看它究竟解决了什么问题？为什么像阿里云和腾讯云这些云厂商都在推荐使用Serverless？首先Serverless要解决的是成本问题。

就拿部署一套博客系统为例，前端采用Vue，后端采用Node.js的MVC架构。我们需要购买像阿里云这些云服务商的Linux虚拟机，在虚拟机上安装Node.js、数据库（Mongo或mysql）、Web Server（nginx或者Apache），并进行相应配置。如果你对博客的响应时间有要求的话，可能还需要增加Redis缓存、负载均衡、CDN等。这些算下来一年的最小开销也是几千元。但是如果你使用Serverless，成本可能不到几百元就能搞定。

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

不仅是实打实的费用成本，对于数据库和服务器等进行配置也有很多运维成本，这些我们都可以交给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（后端即服务，持久化和第三方服务）

2. 广义的Serverless = 服务端免运维 = 具备Serverless特征的云服务

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

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.yml

component: 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.tech

Full details: https://serverless.cloud.tencent.com/apps/element/element/pro

只要访问 http://element-website-1258339218.cos-website.ap-beijing.myqcloud.com这个地址其实就能够看到我们部署成功了。

但是想要进行自定义域名的访问，还需要在腾讯云的后台进行域名解析操作。

进行域名解析

进入腾讯域名管理后台页面，新增一条CNAME解析记录，记录的值为最终部署成功后CLI出现的cname值。

保存后稍等几分钟再次访问 http://element.tanghui.tech/ 就能够看到页面已成功访问。怎么样，是不是超级简单~

参考资料

1. 蒲松洋（秦粤）-Serverless入门课
2. 6岁了！是时候重新开始认识下Serverless了
3. 手把手使用VuePress搭建Element的组件库文档官网

源码地址

Github-Lee-Tanghui/vuepress-element-doc