在 React.js 中使用環境變數

Managed Runtime 環境變數可讓您將變數新增至在某個環境中執行的應用程式程序當中，而無需變更程式碼。環境變數能安全儲存，是下列使用案例的理想選擇：

呼叫受 API 金鑰保護的第三方資源
有條件地改變 React.js 轉譯

如需更多詳細資料，請參閱環境變數。

在本教學中，我們將使用環境變數，在不變更程式碼的情況下變更 React.js 轉譯。您可以透過 process.env 存取環境變數，這只能在 Node.js 中取得，無法在瀏覽器中取得。PWA Kit 轉譯是同構的，因為它在用戶端和伺服器端都會轉譯。因此，要使環境變數在 React.js 中可用，您可以將它們新增到 PWA Kit 設定檔中，如本教學所示。

在此範例中，我們將使用環境變數，在您的網站上啟用功能。例如，在有限的時間內，您可以測試一項新功能 (如快速結帳)。然後，您可以監控購物者對該功能的參與度，以瞭解其影響。

先決條件

要完成本教學，請首先：

獲得 Managed Runtime 和 Runtime Admin 的存取權。請參閱 Managed Runtime 管理。
擁有 API 金鑰以使用 Managed Runtime API。若要尋找您的 API 金鑰，請登入 Runtime Admin 工具，並前往 Account Settings (帳戶設定) 頁面。
在您要為其設定環境變數的專案中，擁有開發人員或管理員角色。如果您沒有存取權限，請要求具有 Managed Runtime 管理員角色的人員來協助您。

在本機電腦上

在執行本教學的命令之前，請以實際值取代預留位置。預留位置的格式為：$PLACEHOLDER

本機測試先決條件

在您的專案中，建立您選擇的內容或功能。例如，在首頁上建立英雄橫幅。

在本機測試環境變數

要在目前的工作階段中設定環境變數，請開啟終端機並執行以下命令：
- Windows：set ENABLE_FEATURE='true'
- 大部分的類 Unix 作業系統，包括 macOS：export ENABLE_FEATURE=‘true’
請執行以下命令，檢查環境變數設定是否正確：
- Windows：echo %$ENABLE_FEATURE%
- 大部分的類 Unix 作業系統，包括 macOS：echo $ENABLE_FEATURE
該命令會傳回以下輸出：true
將此 JavaScript 程式碼新增至專案的設定檔 — config/default.js：

1function parseEnvVar(envVarName) {
2  const val = process.env[envVarName];
3  if (val === undefined) {
4    throw new Error(`Environment variable ${envVarName} is required.`);
5  }
6  try {
7    return JSON.parse(val);
8  } catch (err) {
9    throw new Error(
10      `Environment variable ${envVarName} must be a valid JSON string.`
11    );
12  }
13}
14module.exports = {
15  app: {
16    enableFeature: parseEnvVar("ENABLE_FEATURE") || false,
17  },
18};

將此 JavaScript 程式碼新增至專案的首頁 — app/pages/home/index.jsx：

1import { getConfig } from "@salesforce/pwa-kit-runtime/utils/ssr-config";
2
3const Home = () => {
4  const config = getConfig();
5  const enableFeature = config.app.enableFeature;
6  return enableFeature && <h1>My New Feature</h1>
7};
8
9export default Home;

使用 npm start 啟動開發伺服器，然後在本機上前往首頁，查看轉譯的功能。

在非 Production 或 Production 環境中

建議在非 Production 環境中測試這些步驟，然後再將變更部署到生產 Production 環境。