java - 如何在部署在heroku上的react应用程序中配置Web服务url以访问也部署在heroku中的java REST Web服务

Question

我有 2 个应用程序。客户端是在react js上开发的，服务器是在spring boot上使用RESTful api开发的。两者都在本地主机上运行良好。我尝试在 heroku 上部署这两个应用程序。服务器与 Heroku 上的 postgres db 一起正常工作(在 postman 上检查)。然而，当我在heroku上将react应用程序部署为单独的应用程序时，它只向我显示没有数据的UI(来自spring boot webservice)。我将React应用程序中的Web服务URL(本地使用为 http://localhost:8080 )更改为heroku服务器应用程序URL(由heroku提供)。现在它工作了。但是，我不知道它的配置方式是否正确。

有人知道如何在heroku上以正确的方式部署服务器(Spring boot)和客户端(React js)吗？

Answer 1

• 我可以说使用 .env 文件是提供环境变量的好方法。通常在生产中，这些值来自环境。因此，在代码中，我们只有占位符/变量，以便我们可以使用它来更改 URL 和其他公共(public)内容，例如使用 env 文件。另一件事是，您还可以使用外部 Heroku 仪表板环境覆盖 env 文件中的默认值。

WARNING: Do not store any secrets (such as private API keys) in your React app!

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

• 您可以从 Heroku 应用程序的仪表板提供环境变量(通过 Heroku 仪表板中的设置)。

• 确保您的环境名称以 REACT_APP_ 前缀开头。

• 根据您的要求阅读本文您想要哪种类型的变量 https://create-react-app.dev/docs/adding-custom-environment-variables/

• 这应该能让事情顺利进行。我确信也可以保留 .env 文件，但我更喜欢通过 Heroku Dashboard 进行更多控制。引用这个网址:https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack

使用请引用文档:

因此，对于 REACT_APP_NOT_SECRET_CODE 这个环境变量，我们可以使用如下代码:

*`<input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />`*

我希望这能回答您的问题。