免费部署静态页面和 node

[starryiu]

最近发现有很多免费托管网站服务，而且使用起来也是非常的方便。

github pages

github pages 的使用非常简单，建立一个 用户名.github.io github仓库，然后将你的 静态页面 目录上传就可以了。

优点

可以起到宣传的做用，大部分人看你的 github 页面都会看看你的 github pages。

缺点

1. 只能托管一个静态页面。
2. 如果使用 vue-cli 这类框架，虽然可以使用 deploy 快速上传，但仍需要建立一个仓库存放源代码。

netlify

netlify 可以关联 github 账号，可以选择 github 仓库直接进行静态页面的构建。

当部署了项目之后，每次向对应仓库的分支提交代码都会重新构建，非常方便。

缺点

只能构建静态页面。

vercel

vercel 部署静态页面和 netlify 一样的操作，不过 vercel 还可以构建 node 和 express 写的简单的 api。

考虑到用 express 的人比较多，所以只介绍 express 。

目录

代码

/** index.js */
const express = require('express')

const app = express()
app.use(express.json())

const user = [
  {id:1,name:'xiaoming',age:1},
  {id:2,name:'xiaohong',age:2},
  {id:3,name:'xiaogang',age:3}
]

const setCacheControl = (res,maxAge=1) => {
  // 不带参数的请求建议加上。
  res.setHeader('Cache-Control', `s-max-age=${maxAge}, stale-while-revalidate`)
}

app.get('/api/queryUsers', (req, res) => {
  setCacheControl(res,30)
  res.json(user)
})

app.get('/api/queryUser/:name', (req, res) => {
  const { name } = req.params
  const findUser = user.find(item=>item.name === name)
  res.json(findUser || '没有这个用户')
})

/**
 * 和平时一样写，只不过要导出app，并且不用绑定 listen
 */
module.exports = app

/** vercel.json */
{
  "rewrites": [{ "source": "/api/(.*)", "destination": "/api" }]
}

然后上传到 github 仓库，再使用 vercel 从 github 新建项目，不需要填写构建命令和目录。

之后每次推送 github 仓库都会自动构建。

这种方式只能提供简单的api。

缺点

1. 目前好像只能使用 node express，经过个人测试，响应速度有点慢。
2. 更多

参考

有可能你并不需要服务器
Using Express.js with Vercel