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

在《手把手应用 VuePress 搭建 Element 组件文档》这篇文章中，咱们应用 VuePress 搭建了一个极简的 Element 文档。明天咱们尝试应用 Serverless 把这个网站部署到生产环境中，可能让所有人失常拜访。

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

在给 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 = Serverless Computing 架构 = FaaS 架构 = Trigger(事件驱动) + FaaS（函数即服务）+ BaaS（后端即服务，长久化和第三方服务）

狭义的 Serverless = 服务端免运维 = 具备 Serverless 特色的云服务

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

Serverless Framework 是一个无服务器利用框架，它通过一个 CLI 工具与腾讯云进行了严密的单干，提供了基于组件（serverless components）的残缺解决方案。咱们能够通过一个简略的 serverless.yml 配置，进行 serverless 利用的创立、调试和部署工作。

更多文档请参考官网：serverless.com

应用 npm 全局装置 Serverless CLI

npm install -g serverless

在我的项目的根目录下创立 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/ 就可能看到页面已胜利拜访。怎么样，是不是超级简略~

蒲松洋（秦粤）-Serverless 入门课
6 岁了！是时候从新开始意识下 Serverless 了
手把手应用 VuePress 搭建 Element 的组件库文档官网

Github-Lee-Tanghui/vuepress-element-doc

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

Serverless 介绍

Serverless 解决了什么问题？

Serverless 到底是什么？

Serverless Framework 介绍

实战部署 VuePress 到腾讯云

装置 Serverless CLI

新建 YML 文件

运行部署命令

进行域名解析

参考资料

源码地址