Heroku Express /w NextJS 端口答案

【问题标题】：Heroku Express /w NextJS PORTHeroku Express /w NextJS 端口
【发布时间】：2020-05-31 18:23:49
【问题描述】：

我有一个带有 nextJS 前端的 express 应用程序，它们都部署在 Heroku 上。由于 Heroku 的动态端口分配，我试图将 PORT 传递到静态 nextJS 构建中，以便它知道如何调用 API，即

const PORT = process.env.PORT;    
fetch(`https://localhost:${PORT}/api/blah`)

我在 package.json 中尝试了以下方法，但似乎不起作用：

"scripts": {
    "test": "jest",
    "dev": "nodemon",
    "build": "next build && tsc --project tsconfig.server.json",
    "start": "cross-env NODE_ENV=production node dist/index.js -p $PORT"
  },

该端口可在 NODE 应用程序中访问，但不能在客户端 repo 中访问。

【问题讨论】：

“由于 Heroku 的动态端口分配，我试图将 PORT 传递到静态 nextJS 构建中，以便它知道如何调用 API”——这是错误的。 Heroku 的动态端口正是后端应该绑定的；传入的请求仍然来自标准端口 80（用于 HTTP）或 443（用于 HTTPS）。如果客户需要知道动态端口，那么任何人将如何访问您的网站？
(另外，服务器端环境变量在客户端是不可访问的。即使你需要PORT你也不能在运行时这样做。你必须将它编译到客户端在构建时。但是，同样，您不需要这样做。）
另外，不要使用localhost。使用您的 Heroku 域。
1. Heroku 应用程序从本地主机 2 运行。可以添加应用程序环境变量添加构建时间（这是在 Heroku 上完成的 - 此时端口是已知的） - 实际上你甚至可以在运行时执行它 3. 我不是在说外部 URL
您确实有独立的前端 Heroku 应用程序 - 没有后端

标签： express heroku next.js

【解决方案1】：

除了您的 package.json 之外，您不需要在所有其他前端文件中使用 ${PORT}。

使用fetch('/api/user/2024') 而不是fetch ('http://localhost:3000/api/user/2024') 。

如果您在 heroku 构建期间偶然发现任何 absolute URL error（可以在构建过程中看到，即构建日志）。使用fetch('http://appname.herokuapp.com/api/user/2024') 代替fetch('/api/user/2024') 并将appname 替换为您的heroku appname。

【讨论】：