实战：serverless-vercel

这里我们讲一下 serverless 的极简服务

新建项目

npm init -y

新建 api/index

export default function handler(request, response) {
  const { name = "world" } = request.query;
  return response.end(`Hello ${name}!`);
}

使用命令行 vercel

vercel

跟着提示一路执行下来

此时，访问 https://serverless-vercel-lac.vercel.app/api ，就能直接访问到，在 url后加上?name=johan，即 https://serverless-vercel-lac.vercel.app/api?name=johan ，就能看到应用显示Hello, johan

但访问根目录，即 https://serverless-vercel-lac.vercel.app，报404

我们编写 vercel.json 解决这个问题

新建 vercel.json 并编写

{
  "version": 3,
  "rewrites": [
    {
      "source": "/",
      "destination": "/api/index"
    }
  ]
}

最新的版本是3，相关文档：https://vercel.com/docs/build-output-api/v3

本地调试

vercel dev

发现访问根目录能直接跳转至api/index 文件，成功

第二个serveless

在 api 文件夹中，文件即服务

新建 date.js 并编写

export default function handler(request, response) {
  return response.send(`当前时间 ${new Date().toISOString()}`);
}

文件目录

连接 git

与 实战：如何将 Express API 部署到 Vercel 流程一致

再次部署

vercel 重新部署到新的预览页面

vercel --prod：部署生产环境

项目地址

源码：https://github.com/johanazhu/serverless-vercel

网站：https://serverless-vercel-lac.vercel.app/

总结

实现 vercel 上部署 serverless 的小 demo，后续会有大一点的实战

参考资料

• using-express-with-vercel
• vercel.json文档