如何在部署在 heroku 上的 React 应用程序中配置 Web 服务 URL 以访问也部署在 heroku 中的 Java REST Web 服务

Question

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

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

Answer 1

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

警告：不要在你的 React 应用程序中存储任何秘密（例如私有 API 密钥）！

 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} />`*

我希望这会回答你的问题。