gpt4 book ai didi

aws-lambda - 维塞尔/NextJS : How to access serverless functions from frontend during local development?

转载 作者:行者123 更新时间:2023-12-05 02:06:40 24 4
gpt4 key购买 nike

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

  1. 使用开发脚本创建 package.json:
...
"scripts": {
"dev": "yarn codegen && next --hostname=0.0.0.0 --port=3001",
}
...
  1. 链接到已部署的 Vercel 项目
  2. 创建 vercel.json 以指定构建和路由:
...
"builds": [
{ "src": "*.html", "use": "@now/static" },
{ "src": "pages/api/*.py", "use": "@now/python" },
],
"routes": [
{ "src": "/api/validate", "dest": "/pages/api/validate.py" }
]
...
  1. 创建我的测试 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
  1. 创建我的 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>
...
  1. 运行 vercel dev
  2. 访问网站 localhost:3001(下一个开发服务器地址)
  3. 点击按钮

结果:

我收到了 404 响应

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

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

最佳答案

我的解决方案是使用 vercel dev 而不是 next devyarn 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')
...

关于aws-lambda - 维塞尔/NextJS : How to access serverless functions from frontend during local development?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62569501/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com