Vercel/NextJS: 本地开发如何从前端访问serverless功能？

Question

我的 React/NextJS 前端有一个 Button 组件，它在单击按钮时通过无服务器函数获取数据。我想在本地开发期间使用 Vercel dev/CLI 工具测试此功能。我在尝试访问我的 lambda 函数时收到 404 结果。以下是我到目前为止完成的大概步骤：

使用开发脚本创建 package.json：

...
"scripts": {
    "dev": "yarn codegen && next --hostname=0.0.0.0 --port=3001",
}
...

Link 部署 Vercel 项目
创建 vercel.json 以指定构建和路由：

...
    "builds": [
        { "src": "*.html", "use": "@now/static" },
        { "src": "pages/api/*.py", "use": "@now/python" },
    ],
    "routes": [
        { "src": "/api/validate", "dest": "/pages/api/validate.py" }
    ]
...

创建我的测试 Lambda 函数（在 python 中）：

from http.server import BaseHTTPRequestHandler
from datetime import datetime

class handler(BaseHTTPRequestHandler):

  def do_GET(self):
    self.send_response(200)
    self.send_header('Content-type', 'text/plain')
    self.end_headers()
    self.wfile.write(str(datetime.now().strftime('%Y-%m-%d %H:%M:%S')).encode())
    return

创建我的 Button 组件：

...
    <Button
        variant="contained"
        color="secondary"
        onClick={() => {
            fetch('api/validate')
                .then(response => { console.log(response)
                    response.json() })
                .then(data => console.log(data))
        }}
    >
        Generate sample dataset
    </Button>
...

运行 vercel dev
访问网站 localhost:3001（下一个开发服务器地址）
点击按钮

结果:

我收到 404 回复

注意：我可以从 localhost:3000/pages/api/validate.py（vercel 开发服务器地址）访问 lambda 函数。这似乎是手动启动 lambda 函数构建和服务过程。我认为它应该已经根据 vercel.json 规范构建并提供服务，并且可以在 localhost:3001/api/validate 上使用。这似乎与 Vercel documentation.

一致

注意 2：下一个 dev/CLI 工具可以很好地构建和提供 javascript/typescript 文件。我也在使用 python 和 Go 函数，Vercel dev/CLI 支持它们，但 Next

不支持

Answer 1

您需要将端口从 vercel dev 传递到上游 CLI，在本例中为 next dev。

{
  "scripts": {
    "dev": "yarn codegen && next dev --port=$PORT",
  }
}

现在，当您运行 vercel dev 时，临时端口将从开发服务器代理。

如果将 /pages/api 重命名为 /api，也可以删除 vercel.json。

Answer 2

我的解决方案是使用 vercel dev 而不是 next dev 或 yarn dev，并在 .env 文件中使用指向函数 url。此 env 变量应以 NEXT_PUBLIC_ 开头，以便由 next.js 注册并在构建过程中传递给 process.env。

# .env
NEXT_PUBLIC_FUNCTIONS_BASE_URL="http://localhost:3000" # 3000 is vercel port

# component.js
...
fetch(process.env.NEXT_PUBLIC_FUNCTIONS_BASE_URL + '/api/function-name')
...

Vercel/NextJS: 本地开发如何从前端访问serverless功能？

Vercel/NextJS: How to access serverless functions from frontend during local development?

aws-lambda

next.js

serverless

vercel