如何在React專案中利用環境變數實現功能？

Question

我正在嘗試將我的API密鑰保存為環境變量，但我不知道如何訪問它... 我使用npm安裝了dotenv，在根目錄下創建了文件，並將密鑰放在那裡。我嘗試在js檔案中透過使用process.env.API_KEY來存取它，但它顯示該變數未定義。

我嘗試在我需要金鑰的檔案頂部放置require('dotenv').config()，但它給我一個錯誤...

ERROR in ./node_modules/dotenv/lib/main.js 2:13-28
Module not found: Error: Can't resolve 'path' in ...

我覺得我可能要么將它放在了錯誤的文件中，要么是我漏掉了某些東西

Answer 1

作為總結：

要在您的React層中讀取API_KEY變量，您需要在建立之前匯出變數REACT_APP_API_KEY，然後在任何React部分中，您可以透過以下方式取得值：

process.env.REACT_APP_API_KEY

查看連結以了解為什麼需要前綴REACT_APP_。

此外，如果您的令牌是長期有效或不可過期的令牌，則不應將其暴露給前端（React）。只有可過期的令牌（授權碼oauth2授權）應該暴露給前端層。

查看參考資料以了解如何處理前端變數

參考資料

• 如何偵測JS util檔案（CRA）運行的環境方法
• 是否可以將React伺服器環境變數用於客戶端前端？
• 如何使用Env秘鑰使用Axios進行取得
• #在生產環境中，使React與不同EC2實例上的後端API伺服器通訊
• #如何在前端JS應用程式中使用變數替換，就像後端應用程式一樣？