Vercel

發表於 更新於 分類於 Disqus： 文章字數： 1.2k 所需閱讀時間 ≈ 4 分鐘
vercel 的 静态文件服务 与 服务器支持动态函数

https://www.netlify.com/

https://vercel.com/docs/getting-started-with-vercel

是什么

“无服务”前端部署,serverless

其实是你提供

  • “前端源代码”
  • “构建过程” 有的在vercel页面配置,也可以你的命令行脚本
  • “edge/serverless function”

它负责:

  • 源代码的构建(可以与github等平台关联,自动触发,也可以cli触发)
  • 并服务构建后的静态内容
  • 所有对edge/serverless function的请求再运行零时的后台代码

用处

支持常见的流行框架: Angular,Next.js,Nuxt.js,Hexo, https://vercel.com/docs/frameworks

基于现成模板: https://vercel.com/templates

或者 仓库或者vercel cli

进阶: https://vercel.com/docs/getting-started-with-vercel/next-steps

锐评一下

Vercel cli

node依然建议使用nvm管理, 用yarn取代npm

https://vercel.com/docs/cli

1
2
3
4
5
6
7
8
9
10
11
# add cli
yarn global add vercel@latest
# create project
npx create-next-app@latest

✔ Would you like to use TypeScript? … Yes  
✔ Would you like to use ESLint? … Yes  
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … Yes  
✔ Would you like to use App Router? (recommended) … Yes  
✔ Would you like to customize the default import alias? … No

Edge Function

https://vercel.com/blog/edge-functions-generally-available

https://vercel.com/docs/functions/edge-functions/quickstart

  • 创建 edge function
  • 用vercel cli部署

和serverless function相比

  • 相同点:
    • 都是在vercel提供的服务器里执行而不是用户端
  • 不同点:
    • serverless function是早期方案,有冷启动问题,不少基于docker的方案,Edge function会在尽量靠近用户的服务器中执行,甚至可以Next.js的SSR
    • edge function支持ESM,wasm 而 serverless function 支持Node.js,Go, Ruby, Python
    • edge function global-first,而 serverless function region-specific,

文件 ./src/app/api/edge-function-example/route.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
 
export const runtime = 'edge'; // 'nodejs' is the default
 
export function GET(request: NextRequest) {
  return NextResponse.json(
    {
      body: request.body,
      query: request.nextUrl.search,
      cookies: request.cookies.getAll(),
    },
    {
      status: 200,
    },
  );
}

本地测试, 启动服务

1
yarn run next dev

访问 http://localhost:3000/api/edge-function-example?query=123 不是404基本就是成功了

可以干嘛呢, 例如ChatGPT中中间转发, 但是可能还需要学一下Edge Streaming

edge middleware https://vercel.com/docs/functions/edge-middleware/quickstart
Edge middleware

价格上 目前看起来 Hobby免费的, 1million的量

https://vercel.com/docs/functions/edge-middleware/usage-and-pricing

Serverless Function

文件 src/app/api/serverless-example/route.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function GET(request: NextRequest) {
  return NextResponse.json(
    {
      body: request.body,
      path: request.nextUrl.pathname,
      query: request.nextUrl.search,
      cookies: request.cookies.getAll(),
    },
    {
      status: 200,
    },
  );
}

其实可以看到主要的区别就是 runtime 不一样

本地测试 yarn run next dev, 访问 http://localhost:3000/api/edge-function-example?query=123 不是404基本就是成功了

而serverless还支持python/go/ruby

python的例子./api/index.py (注意不在 ./src/app下,而是直接最顶层)

1
2
3
4
5
6
7
8
9
10
from http.server import BaseHTTPRequestHandler
 
class handler(BaseHTTPRequestHandler):
 
    def do_GET(self):
        self.send_response(200)
        self.send_header('Content-type','text/plain')
        self.end_headers()
        self.wfile.write('Hello, world!'.encode('utf-8'))
        return

本地 测试

1
vercel dev

然而 报错了Error: spawn ~/.cache/com.vercel.fun/runtimes/python3/bootstrap EACCES

解决方案: chmod +x ~/.cache/com.vercel.fun/runtimes/python3/bootstrap , https://github.com/orgs/vercel/discussions/2524

再访问http://localhost:3000/api非404即可

然后 如果你的python有依赖,可以requirements.txt里写,也可以Pipfile

Flask 的例子

文件requirements.txt

1
Flask==2.2.2

同样文件 ./api/index.py

1
2
3
4
5
6
7
8
9
10
11
from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Hello, World!'

@app.route('/about')
def about():
    return 'About'

在非Next的python项目中 可能还需要 vercel.json

1
2
3
4
5
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/api/index" }
  ]
}

于是乎, 就可以用vercel+flask+bs4等等来做一个自己用的小爬虫了,虽然在有自己服务器情况下不需要,有本地电脑也可以做,但是android/ios上想做个简单自用的带服务的网页,vercel目前的Hobby免费用量还是非常充足的, https://vercel.com/dashboard/usage

国内腾讯有个Webify,但看上去还是只有静态支持, https://webify.cloudbase.net/docs/migrating/vercel ,并不支持edge/serverless function, 再不然就还是自己买服务器了, 所以国内的核心问题还是监管问题,而不是技术问题

实际例子

https://py-cromarmot.vercel.app/cp/atcoder/cromarmot.svg

atcoder svg