如何改变本地主机API URL时部署到Heroku?

Question

我已经部署了一个服务器端渲染React应用程序(不捆绑CRA):

• 它有一个快速服务器用于服务器端渲染(监听端口3000或process.env.PORT)
• 它有一个用于服务前端的API的快速服务器(侦听端口8080或process.env.PORT)

在本地主机上，前端请求http://localhost:8080/api获取数据，工作正常

从我的理解，当应用程序在生产中，基础API URL应该是应用程序的URL(例如。https://myapp.herokuapp.com)而不是http://localhost:8080，因此我在代码中添加了以下更改:

• 如果应用在开发中，前端调用http://localhost:8080/api
• 如果应用程序在prod中，前端调用https://myapp.herokuapp.com/api(我在Heroku中添加了https://myapp.herokuapp.com/作为配置变量)

然而，它不起作用。我的应用程序成功部署到Heroku，并且SSR正确呈现，但是API调用失败。(我也试过https://myapp.herokuapp.com/api:3000失败)

当应用程序处于生产中时，调用本地服务器的API URL应该是什么?

非常感谢!

Answer 1

嗯，据我所知，Heroku不允许多个端口，你将无法为web打开3000，为api打开8080。

您可以在同一端口上同时服务，并将/api路由到api。

我曾经做过一个使用类似方法的项目，下面是代码:

app.use('/api', router); // every api route is in the router
app.use(express.static(staticDir));

它也被部署到heroku。

完整的回购，如果你想看看- https://github.com/berkeli/breteau-dashboard/blob/main/server/utils/createServer.js