React.js：為什麼使用它時從 .env 檔案存取我的 API 金鑰需要 REACT_APP 前綴？ IE。 (process.env.REACT_APP_API_KEY)

Question

根據我的理解，.env 檔案應該保存帶有REACT_APP 前綴的API 金鑰，後跟其名稱，並且要使用該變量，我們必須省略REACT_APP 前綴，但我注意到在某些情況下有不同的行為。

我在 .env 檔案中設定環境變量，如下所示：REACT_APP_YOUR_KEY_NAME=9999999999999。並假設它是透過 process.env.YOUR_KEY_NAME 存取的。但我注意到在某些情況下（不是唯一的）需要前綴，否則鍵看起來是未定義。因此，它僅在我使用 process.env.REACT_APP_YOUR_KEY_NAME 時才有效。

const FetchData= async () => {
  try {
    const cache = localStorage.getItem('apiData');
    if (cache) {
      return JSON.parse(cache);
    } else {
      const response = await fetch(`${url}?key=${process.env.REACT_APP_API_KEY}`);
      const jsonData = await response.json();
      localStorage.setItem('gameData', JSON.stringify(jsonData));
      return jsonData;
    }
  } catch (error) {
    console.error('Error occurred:', error);
    return null;
  }
};

export default FetchData;

Answer 1

對於透過create-react-app建立的應用程式中的所有自訂環境變量，我們需要在環境變數名稱中使用REACT_APP_前綴，這是一個要求，如果我們不遵循約定，變數將無法訪問，就是這樣，就像VITE 一樣，您需要將VITE_.. 或Nextjs 與NEXT_PUBLIC...（僅限客戶端元件）

此外，請記住所有值都可以在客戶端（瀏覽器）上存取。您不應將其用於您的使用者不應在瀏覽器中存取的任何資料/憑證以及任何超級秘密 Api 金鑰。

為了獲得最大的安全性，應該在後端使用它，並且後端不需要任何前綴。

有關更多詳細信息，您可以（再次）查看 CRA 上的舊文檔 https://create-react-app.dev/docs/adding-自訂環境變數

#