如何在部署在 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} />`*

我希望這會回答你的問題。