6

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

 3 years ago
source link: https://segmentfault.com/a/1190000040474898
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

在《手把手使用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（后端即服务，持久化和第三方服务）
  1. 广义的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/ 就能够看到页面已成功访问。怎么样，是不是超级简单~

Github-Lee-Tanghui/vuepress-element-doc


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK