ZEIT(Vercel) now.sh 免费部署博客网站，支持 Serverless Python Go Node.js

白嫖他不香吗？何况还是2020年比较靠谱的国外最快的免费服务商。本博客站正式迁移到 ZEIT(Vercel)，记录其中一些操作步骤，ZEIT 超好用的 Serverless 尝鲜还有自定义 404 问题，提供 Serverless 示例。

ZEIT(Vercel) 简介

2020年4月21日 ZEIT 更名为 Vercel 服务不变。

Vercel 是什么？ZEIT(Vercel) 是一家云部署服务的公司，支持静态托管以及 Serverless 服务。

• 免费自定义域名，支持 HTTPS
• 提供 Serverless 服务
• 提供 Google Cloud 与 AWS 节点，有香港与台湾节点
• 免费额度有 20 GB，够用
• 不限站点与 Serverless API 数量
• Serverless 支持 Node.js, Go, Python, Ruby
• 支持 now.sh CLI，GitHub，GitLab，Bitbucket 导入/部署

大陆访问 ZEIT 是最快的！比 Netlify 和 Github Pages 以及 Heroku 都快。注意线路问题，电信走香港、台湾线路，联通移动会绕美国。

打开 ZEIT

迁移动力：
早些时候就了解 ZEIT 了，迁移的动力是因为之前用的企鹅小屋-香港空间在一声不吭的情况下停服 12 小时，无作为无责任，感觉有点梗着：

ZEIT (Vercel) 托管建站

简单步骤使用 Vercel.

注册账号

前往 ZEIT(Vercel)，通过 Github、GitLab 或 Bitbucket 账号登录，也支持 邮箱登录：

导入站点

点击 Import Project 支持从现有的 GitHub，GitLab 或 Bitbucket 存储库导入，也可以使用热门模板。

此处选择从 Github 导入，我选择的是 Hexo 编译后的静态文件仓库，如果你选择的是源码仓库可以在最后一步定义编译命令与输出目录，每次代码仓库更新后将自动触发部署。

ZEIT 模板很多，包括 Hexo 在内的有：

点击预览

• Next.js

• Gatsby

• Hexo

• Eleventy

• Docusaurus 2

• Docusaurus 1

• Preact

• Dojo

• Ember

• Vue.js

• Scully

• Ionic Angular

• Angular

• Polymer

• Svelte

• Ionic React

• Create React App

• Gridsome

• UmiJS

• Sapper

• Saber

• Stencil

• Nuxt.js

• Hugo

• Jekyll

• Brunch

• Middleman

自定义域名

ZEIT 会为每个项目分配一个 now.sh 自域名，也可以绑定自己注册的域名。

在项目主页点击 Settings -> Domains，进入自定义域名：

• 可以编辑 now.sh 分配给你的域名，如果是纯 API 站点可以选择一个 *.now.sh 漂亮的子域名，更改后以该域名访问即可
• 添加自定义域名如：wivwiv.com，添加后可以选择重定向与指向的分支
  • 默认指向 master 分支，即访问 master 分支下的内容
  • 添加域名后需要将你的域名 NameServer 改为 ZEIT 的以便添加解析与证书（不建议），建议使用 CNAME 解析
  • 在域名商那里将你自己域名以 DNS CNAME 记录解析到 alias.zeit.co

ZEIT (Vercel) 使用 Serverless

使用 ZEIT Now 可以部署 Serverless（无服务器）功能，不限量接收 HTTP 请求并提供响应。

ZEIT Now Serverless

ZEIT Serverless 支持 Node.js, Go, Python, Ruby 语言。

借助 Serverless 可以处理用户身份验证，表单提交，数据库查询，统计等业务。

开始开发

安装 now：

复制

yarn global add now@latest
# or
npm install now -g

安装 Serverless 库（Typescript 开发时）：

复制

yarn add @now/node
# or
npm install @now/node

例如，要创建 TypeScript 函数，可以创建一个 ./api/get-user.ts 文件：

复制

// api/get-user.ts
import { NowRequest, NowResponse } from '@now/node'

export default (req: NowRequest, res: NowResponse) => {
  res.json({ name: 'wivwiv', site: 'https://wivwiv.com' })
}

使用 js 则直接：

复制

// api/get-user.js
module.exports = (req, res) => {
  res.json({ name: 'wivwiv', site: 'https://wivwiv.com' })
}

Request 和 Response 对象类似 express

路由

默认情况下，ZEIT 使用文件路由系统， 按照 /api 目录内的所有文件将按照文件进行映射，如访问 /api/get-user 时将执行 ./api/get-user.ts 的函数功能。

如果不需要这种规则，可以跟文件和文件夹添加前缀 _或.，以防止将文件或文件夹创建为无服务器功能。

列如将工具函数放置/api/_utils 内，则不会将它们创建为无服务器函数路由。这是因为其父文件夹的前缀是_：

文件	路由
./api/get-user.ts	/api/get-user
./api/user/login.ts	/api/user/login
/api/_db/index.ts	无法访问，使用了前缀
/api/user/_login_service.ts	无法访问，使用了前缀

引入 npm 依赖

如果需要在 ZEIT 中引用了其他 npm 依赖比如 mongoose，mysql2 甚至是 dateformat，只需要在 package.json 中添加即可， ZEIT 部署时会安装依赖，启动时直接使用。

不同于 Heroku 还提供额外的数据库等外部资源服务，ZEIT Serverless 需要的存储、数据库等资源需要自备且保证公网访问，后文总结了一些靠谱免费数据库服务商。

示例：获取指定 IP 或客户端 IP 信息

在线示例：

https://zeit-serverless-node-demo.bigpar.now.sh/api/ipinfo

https://zeit-serverless-node-demo.bigpar.now.sh/api/ipinfo?ip=119.119.119.119

复制

// yarn add axios

import axios from 'axios'

import { NowRequest, NowResponse } from '@now/node'

export default async (req: NowRequest, res: NowResponse) => {
  const ip = req.query.ip || req.headers['x-forwarded-for'] || req.connection.remoteAddress;
  // use https://ip-api.com/
  const respData = await axios.get(
    `http://ip-api.com/json/${ip}`
  )
  res.json(respData.data)
}

ZEIT (Vercel) 代理科学上网翻墙

Vercel 不适合搭建 V2ray 之类的翻墙，（手动斜眼）😆 球球你们别薅羊毛了，Heroku Cloudflare 那么好的服务商都被玩坏了，机场不贵 p:)。

ZEIT SPA 与自定义 404

之前用的 Netlify，使用 /_redirects 文件自定义页面路由：

复制

/c/* /c/index.html 200
/youtube/* /youtube/index.html 200

同理 ZEIT 托管 SPA 如 Vue 单页面应用且使用 history 模式时，需要将 ZEIT 404 页面自定义为对应的 index.html 才能正常使用。

ZEIT Custom 404

我的站点用到 SPA 的地方都是子目录，如 /c 之类的，这里找了好多坑，最后方案如下：

根目录下新建 now.js 文件，用于配置 build 过程与自定义路径：

复制

{
  "version": 2,
  "routes": [
    { "handle": "filesystem" },
    { "src": "/c/.*", "status": 404, "dest": "/c/index.html" }
  ]
}

访问 https://wivwiv.com/c/home 时将自动跳转到 https://wivwiv.com/c/index.html SPA 页面生效。

如果你是 Hexo，可以将 now.json 文件放置在 source 目录下，使用了 gulp 等压缩时需要排除 now.json，避免压缩后出现问题。

尝试用 Serverless 实现 Hexo next 的点赞、访问统计

TODO

ZEIT (Vercel) now.sh Serverless 访问速度慢

为了节省资源，需要常驻内存的 Serverless 都有一个冷却时间，比如 Heroku 免费额度中，30 分钟没有访问的服务将被停止，下次访问重新启动加载，这就产生初次访问或闲置一段时间后访问较慢的现象。

如何加快 ZEIT Serverless 启动时间？

• 加钱，也许就服务常驻内存了呢
• Keepalive

ZEIT Serverless 的冷却时间不知道是多少，如果对启动时间比较在意，可以启动一个定时任务定期访问 Serverless 保活。

crontab 大法好，每 5 分钟访问一次：

复制

0 0/5 * * * ? curl https://zeit-serverless-node-demo.bigpar.now.sh/api/keepalive

Vercel 配额与限制

2020.9.19
之前一直用 Vercel 做图床用作 CDN，现在限制 50 个域名与 100GB/月 流量。

附：免费在线数据库服务

适用 ZEIT 的在线数据库服务。

https://wivwiv.com/post/free-online-resource

更多资源见：ZEIT 集成市场