vercel

vercel提供免费的网站托管服务，类似于github page，但它远比page更加强大，速度也快很多。同时vercel支持部署serverless接口，支持py、node等

托管服务

  1. npm init初始化一个工程
  2. 创建远程仓库之后clone下来
  3. 创建api目录
  4. 在api目录中创建index.js
  5. 代码推入远程仓库
1
2
3
4
module.exports = (req, res) => {
    let data = {number: 1, name: req.query.name || 'peiqi'};
    res.json(data);
}

  1. 登录vercel官网
  2. 授权github登入vercel
  3. new project
  4. 导入github中对应的仓库
  5. deploy部署

  1. 首页visit(会出现404)
  2. 在浏览器地址栏追加/api?name=suxi

避免404
  1. 根目录添加vercel.json的配置
  2. 根目录添加index.html
1
2
3
4
5
6
7
8
9
10
11
12
{
    "routes": [
        {
            "handle": "filesystem"
        },
        {
            "src": "/(.*)",
            "status": 404,
            "dest": "/index.html"
        }
    ]
}

  1. npm init初始化一个工程
  2. 全局安装vercel npm i vercel -g
  3. 登录vercel vercel login 或 vc login
  4. 授权登录完毕后输入 vercel 初始化vercel项目
  5. 添加vercel.json配置和404页面
  6. 添加api目录并定义index.js

  1. vercel 或 vc 命令本地预览接口
  2. vercel --prod 或 vc --prod 命令部署到远程vercel中

  1. 访问预览
  2. 在浏览器地址栏追加/api?name=suxi

node 配合 ts

推荐使用ts托管api服务

  1. 全局安装typescript

    1
    npm i -g typescript

  2. 安装其他依赖

    1
    2
    3
    npm i @vercel/node -D
    npm i babel-register -D
    npm i babel-plugin-transform-es2015-modules-commonjs -D

  3. 根目录新建typescript的配置文件tsconfig.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    {
        "compilerOptions": {
            "target": "es6",
            "module": "commonjs",
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true,
            "sourceMap": true,
            "noEmitHelpers": false
        },
        "exclude": [
            "node_modules",
            "typings/main",
            "typings/main.d.ts",
            "typings/browser",
            "typings/browser.d.ts"
        ],
        "compileOnSave": true
    }

  4. 新建.env文件设置时区

    1
    TZ='asia/beijing'

  5. api目录中添加index.ts

    1
    2
    3
    4
    5
    module.exports = async (req: any, res: any) => {
        let data = {number: 1, name: req.query.name || 'suxi'}

        res.status(200).json(data);
    }

  6. 预览访问