In this article, “Building An Element Component Document With VuePress,” we used VuePress to build a minimalist Element document. Today we’re trying to deploy the site into production using Serverless, which is accessible to everyone.

Here, we use Serverless Framework + Tengcloud to deploy the front-end project. Those who are new to Serverless may be confused by these names: “What exactly is Serverless and Serverless Framework? What’s the relationship?”

Introduce Serverless

What problem does Serverless solve?

Before defining Serverless, let’s first look at what problems it solves. Why are cloud vendors like Ali Cloud and Tencent Cloud recommending Serverless? The first thing Serverless has to address is cost.

Take the deployment of a blog system as an example. The front-end uses Vue and the back-end uses Node.js MVC architecture. We need to buy Linux virtual machines from cloud service providers like Aliyun, install Node.js, database (Mongo or MySQL), Web Server (Nginx or Apache) on the virtual machines, and configure them accordingly. Redis caching, load balancing, CDN, etc., may also be needed if you have a requirement for blog response time. The minimum cost is a few thousand yuan a year. But if you use Serverless, it can cost less than a few hundred dollars.

You can feel Tencent Cloud to promote Serverless new users. If you’re deploying a pure front-end project, assuming you’re getting no more than a million visits, you can do it for free and at a much faster speed than the Github Page you’re familiar with.

In addition to the actual cost, there are also a lot of operation and maintenance costs for database and server configuration, which we can entrust to Serverless to complete, so that a person with zero operation and maintenance experience can quickly deploy the project online. So the cost of saving Serverless here is money + time.

Secondly, Serverless can improve the r&d efficiency. Firstly, for operation and maintenance students, Serverless can host the traditional operation and maintenance work such as availability, disaster recovery, backup and monitoring to the cloud. The front-end students can use Serverless + Node.js to implement SFF(Serverless For FrontEnd), so that the front-end students can be responsible For the data interface arrangement work. Back end students can adopt the concept of FasS (function as a service) + BaaS (back end as a service) and pay more attention to domain design.

What exactly is Serverless?

When discussing the topic of Serverless with colleagues, most of them have a vague understanding of the concept of Serverless, mainly because the concept of Serverless contains a large amount of content. In general, Serverless can be defined as a broad Serverless and a narrow Serverless:

  1. 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. Generalized Serverless = Server o&M free = Cloud services with Serverless characteristics

So Serverless is not a specific technology, it’s an idea. We often say Serverless is mostly in the narrow sense of Serverless, the current mainstream Serverless product is Function Compute. Most people’s first exposure to Serverless from cloud vendors begins with functional computing FC. For more information on the basics of Serverless, check out this article “6 years old! It’s time to relearn Serverless.”

Serverless Framework is introduced

Serverless Framework is a Serverless application Framework. It works closely with Tencent Cloud through a CLI tool to provide a complete solution based on Serverless Components. You can create, debug, and deploy Serverless applications with a simple serverless. Yml configuration.

More documentation can be found at serverLess.com

Actual deployment of VuePress to Tencent Cloud

Install the Serverless CLI

Use NPM to install Serverless CLI globally

npm install -g serverless
Copy the code

Create a YML file

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

# serverless. Yml component: website # (required) Element # (required) Name of the instance created by the component of the website APP: Element # (optional) Name of the application of the website stage: pro # (optional) Used to distinguish environment information inputs: SRC: SRC: ./docs/.vuepress/dist:./docs/.vuepress/dist Hook: NPM run build # region: ap-Beijing # region protocol: HTTP # Element-website #OSS bucket name hosts: -host: element.tanghui.tech # Custom domain name async: false # wait for CDN configuration whether synchronization is enabled. If the value is set to false, the parameter autoRefresh takes effect only when it is automatically refreshed. If multiple domain names are associated, you are advised to set it to true to prevent timeout. AutoRefresh: True # Enable automatic CDN refresh to quickly update and synchronize the site content displayed in the domain nameCopy the code

Running deployment commands

Run the command and use wechat to scan the QR code that appears before deployment

serverless deploy
Copy the code

After the deployment succeeds, the following information is displayed 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
Copy the code

Just visit http://element-website-1258339218.cos-website.ap-beijing.myqcloud.com and you can actually see that we have successfully deployed.

However, to access a customized domain name, you need to resolve the domain name in the background of the Tencent Cloud.

Domain name resolution

Enter the Tencent domain name management background page and add a CNAME resolution record. The CNAME value recorded is the VALUE displayed on the CLI after the final deployment is successful.

Save to wait for a few minutes after visit http://element.tanghui.tech/ again will be able to see the page access successfully. How, is it super simple ~

The resources

  1. Pu Songyang (Qin Yue) – Introduction to Serverless
  2. 6 years old! It’s time to start over with Serverless
  1. Use VuePress to build the official website of Element’s component library document

The source address

Github-Lee-Tanghui/vuepress-element-doc