如何從 UI 獲取 aAPI 端的環境變量？

Question

在這里反應菜鳥。 我目前正在將一個應用程序從 Next.js 遷移到 React。

接下來，我們在 Jenkins 文件中定義了某些環境變量（例如根 URL），這些變量將通過process.env.[var]從我們的 UI 調用。

現在我們正在遷移到 React，我不能在 UI 端使用process.env ，因為這是一個 Node 屬性。 我也不能將這些環境變量存儲在 API 端並從 UI 端調用它們，因為 React 不允許在 UI 的/src目錄之外進行引用。

有沒有辦法從我們的 UI 使用我們的環境變量（在 Jenkinsfile 中定義）？ 我正在考慮在 API 端創建一個 GET 端點，以便在加載時將環境變量返回給 UI，但想知道是否有任何替代解決方案。

可能很明顯，但這是我們應用程序的基本布局

-api
  -src
-ui/react
  -src
    -utils
      constants.js <- trying to store the env vars here
jenkinsfile

Answer 1

從技術上講，我們不能在瀏覽器上下文中使用環境變量，這就是為什么我們通常在基於 webpack 的項目（如CRA和Vue-CLI ）中使用DefinePlugin或EnvironmentPlugin來靜態地用環境變量替換process.env.* 。

但是這種方式會迫使我們在不同階段多次重建整個應用程序。

要毫不妥協地解決這個問題，我建議嘗試import-meta-env 。

在生產過程中，此插件靜態替換import.meta.env.*為占位符（我們使用import.meta是因為process.env是 Node 特定對象），然后我們可以運行內置腳本並將占位符替換為真實的環境變量之后。

我也為Docker創建了一個例子。對於Jenkins，我認為可以用同樣的方式來完成。

希望這可以幫助需要它的人。

Answer 2

如果您使用的是 create-react-app，您可以在 .env 文件中定義環境變量，只需在它們前面加上REACT_APP_前綴。

如果沒有，您可以使用 webpack 等構建工具為您添加它們