Teach you how to use vercel service to deploy front-end projects and serverless api for free

1. Introduce vercel

vercel is a site hosting platform that provides CDN acceleration. Similar platforms include Netlify and Github Pages . In contrast, vercel has faster domestic access and provides Production and development environments, which are very useful for project development and support For continuous integration, a push or a PR will automatically build and release, and if it is published in the development environment, different links will be generated for preview.

But vercel is only free for individual users, and teams is charged

First of all, vercel is deployed with zero configuration. Second, the access speed is github-page better than that of 061dcdda157057, and the construction is very fast. It is free to use. It is very convenient for deploying personal front-end projects and interface services.

• vercel similar github page , but far github page powerful, the speed is much faster, and after Github licensed to vercel, you can reach the most elegant of publishing experience, just gently push the code, it automatically updates the deployment project .
• vercel also supports the deployment of the serverless interface. That means that it can not only deploy static websites, but even dynamic websites, and these functions are all free
• vercel also supports automatic configuration of https , so you don't need to go to FreeSSL apply for a certificate, and it saves a lot of certificate configuration
• vercel are currently as many as 31 deployment templates

2. Start

Open vercel homepage https://vercel.com/signup

Use the GitHub account to associate vercel , and submit the subsequent code to vercel to automatically trigger the deployment

The authorization page appears, click Authorize Vercel .

3. Deploy Hexo Blog

Vercel is the best static site hosting platform. With the vercel platform, we can deploy blog static files to vercel without using GitHub pages for hosting. Vercel is much faster than GitHub pages.

Select a template deployment provided by vercel, of course, you can also submit the code to GitHub, and then go to vercel to select

Create a GitHub project, the code will be automatically created on the GitHub account

After the creation is complete, wait for the vercel to build

Automatically jump to the home page after successful creation




Click visit to access the created service https://hexo-seven-blush.vercel.app , vercel will assign us a default domain name, of course, you can also customize it.

We can view the packaging log, and if there is a problem with the build process, just look here

Click view domain bind a custom domain name

Then we go to the domain name resolution process to resolve CNAME to cname.vercel-dns.com

Finally, the resolution is completed, and hexo.poetries.com custom domain name. At this point, we have deployed the blog hexo project to vercel. Later, when you submit code on GitHub, it will automatically trigger the vercel package build.

You can also select code from Github to create a project

Import the project on the GitHub account




The process of deploying front-end projects such as vue and react is similar, and will not be demonstrated here.

4. Deploy Serverless Api

Use vercel deploy Serverless Api , you can have your own dynamic website without buying a cloud server

Simple demonstration of deploying api interface service

Configuration vercel.json , more configuration check https://vercel.com/docs

{
  "headers": [{
    "source": "/(.*)",
    "headers" : [
      {
        "key" : "Access-Control-Allow-Origin",
        "value" : "*"
      },
      {
        "key" : "Access-Control-Allow-Headers",
        "value" : "content-type"
      },
      {
        "key" : "Access-Control-Allow-Methods",
        "value" : "DELETE,PUT,POST,GET,OPTIONS"
      }
    ]
  }],
  "rewrites": [
    {
      "source": "/", // 重定向配置 访问/根路径重定向到/api/query-all-users
      "destination": "/api/query-all-users"
    }
  ]
}

Create an interface, vercel agrees to create an interface path under the api, and finally we can domain name/api/json domain name/api/query-all-users, we have created two interfaces here

// api/json.js
// req接收所有请求信息，res 是响应信息
// 通过module.exports暴露出去
module.exports = (req, res) => {
  res.send('test')
}

We use Tencent Cloud database here to store some data on the cloud database

// utils/db.js

// 操作云数据库的包
const cloudbase = require('@cloudbase/node-sdk')

const app = cloudbase.init({
  env: "填入环境ID", // 在腾讯云后台创建环境ID
  // 访问该链接获取secretId、secretKey填入即可 https://console.cloud.tencent.com/cam/capi
  secretId: "",
  secretKey: ""
});

// 1. 获取数据库引用
module.exports = app.database();

Visit this link to get secretId and secretKey and fill in https://console.cloud.tencent.com/cam/capi

Go to the Tencent Cloud console, create an environment to get the environment ID

Select database - create new collection users

// api/query-all-users.js
// 查询腾讯云数据库用户记录
const db = require('../utils/db')
const _ = db.command

module.exports = async (req, response) => {
  let {name, pwd, size = 50} = req.query
  
  // 更多语法查看腾讯云数据库文档即可 https://cloud.tencent.com/document/product/876/46897
  let { total } = await db.collection("users").count()
  let pickField = {
    '_id': false,
    createAt: true,
    userName: true,
    address: true
  }
  let { data } = await db.collection("users")
  .field(pickField)
  .orderBy('createAt', 'desc')
  .limit(parseInt(size))
  .get()

  response.json({
    total,
    count: data.length,
    list: data
  })
}

In this way, we have written two interface services, submitted the code to GitHub, and then created a project on vercel and imported the code deployment on GitHub. The final deployed service can pass https://domain name/api/query-all- users?name=Xiaoyue&size=100 to access

Author introduction: Xiaoyue, focusing on sharing advanced skills and technical dry goods in the front-end field. For more dry goods, please see Gongzonghao's "Front-end Advanced Journey"