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

在《手把手使用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新用户的推广力度。如果你部署的是一个纯前端项目，假设你的访问量不超过百万次，那么可以做到免费也没有问题，访问速度也是要比熟知的Github Page要好很多。

文章图片

不仅是实打实的费用成本，对于数据库和服务器等进行配置也有很多运维成本，这些我们都可以交给Serverless去完成，可以让一个零运维经验的人快速部署项目上线。所以Serverless这里省下的成本是金钱 + 时间。
其次Serverless可以提高研发效能。首先对于运维同学来说，可以通过Serverless把可用性、容灾、备份和监控等传统的运维工作托管到云端。前端同学可以利用Serverless + Node.js实现SFF(Serverless For FrontEnd)，让前端同学能够负责数据接口的编排工作。后端同学可以采用FasS（函数即服务） + BaaS（后端即服务）的理念，更加关注领域设计。
Serverless到底是什么？
当和同事谈到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介绍
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这个地址其实就能够看到我们部署成功了。