Vercel/NextJS:在本地开发过程中如何从前端访问无服务器函数?

Question

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

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

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

2. 链接到已部署的 vercel 项目
3. 创建vercel.json以指定生成和路由：

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

4. 创建我的测试 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

5. 创建我的按钮组件：

...
<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>
...

6. 运行vercel dev
7. 在localhost:3001访问网站(下一个开发服务器地址(
8. 单击按钮

<小时 />

结果：

我收到了404回复

注意：我可以从localhost:3000/pages/api/validate.py访问lambda函数(vercel开发服务器地址(。这似乎是手动启动 lambda 函数构建和服务过程。我认为它应该已经按照vercel.json规范构建和服务，并且可以在localhost:3001/api/validate.这似乎与Vercel文档一致。

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

Answer 1

我的解决方案是使用vercel dev而不是next dev或yarn dev，并在指向函数 url 的.env文件中使用环境变量。此 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')
...

Answer 2

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

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

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

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