如何从生产中的后端 API 端点使用下一个 js 获取数据

Question

我被困了很长时间。对不起，如果这是一个愚蠢的问题和/或重复，但我没有在谷歌上找到任何东西。

基本上我完成了我的项目，我正在尝试在 Heroku 上部署它。

通常我会从这样的组件调用后端 API

fetch(http://localhost:8090/shop, {some code})

如果我想获取路线 /shop 的逻辑。

我能够在 Heroku 上部署所有内容，但没有调用 API 端点。

我尝试了以下方法：

• 将http://localhost:8090/shop替换为${window.location.hostname}/shop；
• 替换为${window.location.host}/shop；
• 替换为${window.location.host}:8090/shop；
• 仅替换为/shop；
• 替换为e-commerce-my-shop/shop；
• 替换为https://e-commerce-my-shop/shop。

这些解决方案都不适用于我的情况。为了调用正确的 API 端点，我需要在 fetch 中放入什么，然后将逻辑放置在该中间件中？ Heroku 上的应用名称是 e-commerce-my-shop，所以 url 是 https://e-commerce-my-shop.herokuapp.com/

这是我第一次在平台上部署一些东西，如果这是一个愚蠢的问题，再次抱歉。

如果由于某些原因我违反了 stackoverflow 政策，请告诉我，我会更新我的问题。提前谢谢你。

Answer 1

您应该将 URL 设置为 environment variable。您可以拥有本地和生产环境 .env 文件。当您构建应用程序时，下一步将使用生产文件。

因为您的调用是在浏览器中进行的，所以您需要在 env 变量前面加上 NEXT_PUBLIC。

在您的根目录中，您需要使用文件名创建两个文件 - .env 和 .env.local - 每次添加或编辑变量时重新启动 Next。

.env.local - 开发

NEXT_PUBLIC_API_URL=localhost:8090

.env - 生产

NEXT_PUBLIC_API_URL=https://e-commerce-my-shop.herokuapp.com

您会在整个应用程序中都使用它

fetch(`${process.env.NEXT_PUBLIC_API_URL}/shop`, {some code})

当您将代码部署到 Heroku、GitHub Actions、AWS lambda 或其他无服务器平台等第三方服务时，通常不会像在开发计算机上那样自动包含环境变量。您可能需要set the env variables in their platform separately。

最后，如果你使用 git，你永远不应该commit your .env files。