关于javascript:Serverless入门实战部署VuePress前端项目

在《手把手应用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