本文《手把手使用VuePress搭建Element组件文档》，我们使用VuePress搭建了一个极简的Element文档。今天我们尝试使用Serverless将这个网站部署到生产环境，让大家可以正常访问。这里我们使用ServerlessFramework+腾讯云来部署前端项目。刚接触Serverless的小伙伴可能会被这些名字弄糊涂：“Serverless和ServerlessFramework到底是什么？两者有什么关系？”Serverless引入Serverless解决了什么问题？在定义Serverless之前，我们先来看看它解决了哪些问题？为什么阿里云、腾讯云等云厂商都推荐使用Serverless？Serverless首先要解决成本问题。以部署一个博客系统为例，前端使用Vue，后端使用Node.js的MVC架构。我们需要从阿里云等云服务商购买Linux虚拟机，在虚拟机上安装Node.js、数据库（Mongo或MySQL）、WebServer（Nginx或Apache），并进行相应的配置。如果你对博客的响应时间有要求，可能还需要增加Redis缓存、负载均衡、CDN等，这些计算成本最少每年几千元。但如果使用Serverless，成本可能不到几百元。您可以体验腾讯云在推广新的Serverless用户方面所做的努力。如果你部署的是纯前端项目，假设你的访问量不超过一百万次，那么免费做是没有问题的，而且访问速度比知名的GithubPage好很多。不仅是真正的成本，还有大量的数据库和服务器配置的运维成本，我们可以交给Serverless，让零运维经验的人也能快速将项目部署到线上。所以Serverless这里节省的成本就是金钱+时间。第二，Serverless可以提高研发效率。首先，对于运维同学来说，传统的可用性、容灾、备份、监控等运维任务可以通过Serverless托管在云端。前端同学可以使用Serverless+Node.js实现SFF（ServerlessForFrontEnd），让前端同学自己负责数据接口的编排。后端同学可以采用FasS（FunctionasaService）+BaaS（BackendasaService）的概念，多关注领域设计。什么是无服务器？在与同事谈论Serverless这个话题时，大多数人对Serverless的概念都有一个模糊的认识。主要原因是Serverless的概念包含了很多内容。总的来说，Serverless可以定义为广义的Serverless和狭义的Serverless：狭义Serverless=Serverless计算架构=FaaS架构=Trigger（事件驱动）+FaaS（功能即服务）+BaaS（backendasaservice,Persistenceandthird-partyservices)广义的Serverless=服务器端免费运维=具有serverless特性的云服务，所以serverless不是一个具体的技术，而是一个概念。我们常说的serverless，大多是狭义的serverless。目前主流的Serverless产品是函数计算。大多数人第一次接触云厂商的Serverless，都是从函数计算FC开始的。想要更多了解Serverless的基本概念，可以阅读这篇文章《6 岁！是时候重新认识下 Serverless 了》ServerlessFramework简介ServerlessFramework是一个serverless应用框架，通过CLI工具与腾讯云紧密合作，提供基于组件（serverlesscomponents）的完整解决方案。我们可以通过简单的serverless.yml配置来创建、调试和部署无服务器应用程序。更多文档参考官网：serverless.com实际部署VuePress到腾讯云安装ServerlessCLI使用npm全局安装ServerlessCLInpminstall-gserverless新建yml文件在根目录下创建serverless.yml配置文件该项目。#serverless.ymlcomponent:website#(required)指的是组件名称，目前使用的是tencent-websitecomponentname:element#(required)网站组件创建的实例名称app:element#(optional)thewebsiteApplicationnamestage:pro#(optional)用于区分环境信息inputs:src:src:./docs/.vuepress#执行目录路径dist:./docs/.vuepress/dist#部署目录路径index:index.html#网站首页入口文件错误：404.html#网站错误入口文件hook:npmrunbuild#构建命令，代码上传前执行region:ap-beijing#Regionprotocol:http#Protocolbucket:element-website#OSSstorageBucketnamehosts:-host:element.tanghui.tech#自定义域名async:false#是否同步等待CDN配置。当配置为false时，参数autoRefresh会自动刷新生效。如果关联多个域名，建议配置为true，防止超时。autoRefresh:true#开启自动CDN刷新，用于快速更新和加速域名显示的站点内容deployment,终端会出现如下信息Action:"deploy"-Stage:"pro"-App:"element"-Instance:"element"region:ap-beijingwebsite:http://element-website-1258339218.cos-website.ap-beijing.myqcloud.comcdnDomains:-domain:http://element.tanghui.techcname:element.tanghui.tech.cdn.dnsv1.comrefreshUrls:-http://element.tanghui.tech-https://element.tanghui.tech详情：https://serverless.cloud.tencent.com/apps/element/element/pro只需访问http://element-website-1258339218.cos-website.ap-beijing.myqcloud.com这个地址其实可以看到我们Deploymentsucceeded。但如果要访问自定义域名，则需要在腾讯云后台进行域名解析操作。进入腾讯域名管理后台页面进行域名解析，添加CNAME解析记录。记录的值为最终部署成功后CLI中出现的cname值。保存后，稍等几分钟，再次访问http://element.tanghui.tech/，可以看到页面已经访问成功。怎么样，是不是超级简单~参考资料蒲松阳（秦越）-Serverless入门课程6岁啦！又到了认识Serverless的时候使用VuePress搭建Element的组件库文档官网源码地址Github-Lee-Tanghui/vuepress-element-doc
