Vercel搭建托管服务

---

官网 https://vercel.com，如同 Netlify 一般，可以提供免费的前端应用托管及 Serverless Functions。

自定义访问域名，自带https

• 如下图项目配置的自定义域名：

Vercel常用命令

vercel init              # 选择一个示例项目（初始化）
cd <PROJECT>             # 进入目录
vercel                   # 部署到云服务（需要邮箱验证登录），此时还未发布
vercel dev --debug       # 本地开发（连接到已部署的项目）
vercel dev --listen 5005 # dev环境下以指定端口运行
vercel --prod            # 发布到生产环境
vercel env pull          # 拉取生产环境环境变量
vercel env ls            # 查看环境变量

Vercel 配置本地路径和重写

• Vercel 配置参考：通过在项目根目录放置一个 vercel.json配置文件，您可以提供一个选项列表来更改 Vercel 平台的默认行为。Vercel 之前的版本可以通过 routes 配置路由，不过现在已经过时，官方建议使用 rewrites（重写）实现类似的需求。

// 在项目根目录下创建 vercel.json 以下注释仅用于说明，json文件中不能写注释
// 该配置会将 https://vue-web.com/backend/为前缀的请求重写，
// 转为请求 https://vue-web.com/api/proxy。
{
    "rewrites": [
        {
            // 访问路径匹配规则
            "source": "/backend/(.*)",
            // 重写的目标地址
            "destination": "/api/proxy"
        }
    ]
}

Vercel 托管你的Api服务

• Vercel提供标准的 Http Handler 的语法

module.exports = (req, res) => {
    const { name = 'World' } = req.query
    res.send(`Hello ${name}!`)
}

由vercel提供的响应方法如下:

• req.query: An object containing the request's query string, or {} if the request does not have a query string.
• req.cookies: An object containing the cookies sent by the request, or {} if the request contains no cookies.
• req.body: An object containing the body sent by the request, or null if no body is sent.
• res.status(code): A function to set the status code sent with the response where code must be a valid HTTP status code. Returns res for chaining.
• res.send(body): A function to set the content of the response where body can be a string, an object or a Buffer.
• res.json(obj): A function to send a JSON response where obj is the JSON object to send.
• res.redirect(url): A function to redirect to the URL derived from the specified path with status code "307 Temporary Redirect".
• res.redirect(statusCode, url): A function to redirect to the URL derived from the specified path, with specified HTTP status code.