Question

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

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

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

链接到已部署的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（verdev开发服务器地址）访问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时，临时端口将由开发服务器代理。

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

Answer 2

我的解决方案是使用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')
...

Vercel / NextJS：如何在本地开发期间从前端访问无服务器功能？

2 个答案: