Getting Started with Serverless-Deploying VuePress Front-end Projects in Action

In "Use VuePress to Build Element Component Documents by this article, we use VuePress to build a minimal Element document. Today we tried to use Serverless to deploy this website in a production environment, so that everyone can access it normally.

Here we use Serverless Framework + Tencent Cloud to deploy the front-end project. If it is the first time that people who are exposed to Serverless may be confused by these names: "What exactly are Serverless and Serverless Framework? What is the relationship between the two?"

Serverless introduction

What problem does Serverless solve?

Before defining Serverless, let's first take a look at what problems it solves? Why do cloud vendors like Alibaba Cloud and Tencent Cloud recommend using Serverless? First Serverless to be solved is cost .

Take the deployment of a blog system as an example. The front-end uses Vue and the back-end uses Node.js's MVC architecture. We need to purchase Linux virtual machines from cloud service providers like Alibaba Cloud, install Node.js, database (Mongo or MySQL), Web Server (Nginx or Apache) on the virtual machine, and configure accordingly. If you have requirements for the response time of your blog, you may also need to add Redis caching, load balancing, CDN, etc. The minimum cost of these calculations for a year is also several thousand yuan. But if you use Serverless, the cost may be less than a few hundred yuan.

You can feel Tencent Cloud's promotion of new serverless users. If you are deploying a pure front-end project, assuming your visits do not exceed a million times, then you can do it for free and there is no problem, and the access speed is much better than the well-known Github Page.

Not only the actual cost, but also a lot of operation and maintenance costs for the configuration of databases and servers, etc., we can leave them to Serverless to complete, allowing a person with zero operation and maintenance experience to quickly deploy the project online. So the cost saved by Serverless here is money + time.

---

Secondly, Serverless can improve research and development efficiency First of all, for operation and maintenance students, traditional operation and maintenance tasks such as availability, disaster tolerance, backup and monitoring can be hosted on the cloud through Serverless. Front-end students can use Serverless + Node.js to implement SFF (Serverless For FrontEnd), so that front-end students can be responsible for the arrangement of data interfaces. Back-end students can adopt the FasS (function as a service) + BaaS (back-end as a service) concept and pay more attention to domain design.

What exactly is Serverless?

When discussing the topic of serverless with colleagues, most people have a vague understanding of the concept of serverless. The main reason is that the concept of serverless contains a lot of content. In general, Serverless can be defined as generalized Serverless and narrowly defined Serverless :

1. Narrowly Serverless = Serverless Computing architecture = FaaS architecture = Trigger (event-driven) + FaaS (function as a service) + BaaS (back-end as a service, persistence and third-party services)

2. Broadly speaking, Serverless = server-side free operation and maintenance = cloud services with serverless features

So Serverless is not a specific technology, but a concept. Most of the Serverless we often say are Serverless in a narrow sense, and the current mainstream Serverless product reflects Function Compute. Most people's first contact with Serverless from cloud vendors is to start with functional computing FC. For more understanding of the basic concepts of Serverless, you can read this article "6 years old! It’s time to get to know Serverless again.”

Introduction to Serverless Framework

Serverless Framework is a serverless application framework. It cooperates closely with Tencent Cloud through a CLI tool to provide a complete solution based on serverless components. We can create, debug and deploy serverless applications through a simple serverless.yml

For more documents, please refer to the official website: serverless.com

Actually deploy VuePress to Tencent Cloud

Install Serverless CLI

Install Serverless CLI globally using npm

npm install -g serverless

New YML file

serverless.yml configuration file in the root directory of the project.

# 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 刷新，用于快速更新和同步加速域名中展示的站点内容

Run deployment command

Run the command, use WeChat to scan the QR code that appears and deploy

serverless deploy

After the deployment is successful, the following information will appear on the terminal

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

As long as you visit http://element-website-1258339218.cos-website.ap-beijing.myqcloud.com , you can actually see that our deployment is successful.

However, if you want to access a custom domain name, you also need to perform domain name resolution operations in the backend of Tencent Cloud.

Perform domain name resolution

Go to the Tencent domain name management background page and add a CNAME resolution record. The recorded value is the cname value that appears in the CLI after the final deployment is successful.

After saving, wait a few minutes and visit http://element.tanghui.tech/ again to see that the page has been successfully accessed. How about it, is it super easy~

Reference

1. Pu Songyang (Qin Yue)-Serverless introductory course
2. 6 years old! It’s time to start getting to know Serverless again
3. Use VuePress to build Element's component library document official website

Source address

Github-Lee-Tanghui/vuepress-element-doc