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 の管理を参照してください。
Managed Runtime API を使用するための API キーをもっていること。API キーを見つけるには、Runtime Admin ツールにログインし、Account Settings (アカウント設定) ページを開きます。
環境変数を設定するプロジェクトに対するデベロッパーまたは管理者の役割をもっていること。アクセス権がない場合は、Managed Runtime 管理者役割をもつユーザーにヘルプを依頼してください。

ローカルマシンの場合

このチュートリアルのコマンドを実行する前に、プレースホルダーを実際の値に置き換えてください。プレースホルダーは $PLACEHOLDER の形式になっています。

ローカルテストの前提条件

プロジェクトで、選択したコンテンツまたは機能を作成します。たとえば、ホームページの上部に特大バナーを作成します。

環境変数をローカルでテストする

現在のセッションで環境変数を設定するには、ターミナルを開き、次のコマンドを実行します。
- Windows: set ENABLE_FEATURE='true'
- macOS を含むほとんどの Unix 系オペレーティングシステム: export ENABLE_FEATURE=‘true’
次のコマンドを実行して、環境変数が正しく設定されているかどうかを確認します。
- Windows: echo %$ENABLE_FEATURE%
- macOS を含むほとんどの Unix 系オペレーティングシステム: 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 (本番) 環境の場合

変更を本番環境にデプロイする前に、これらの手順を非本番環境でテストすることをお勧めします。

cURL を使用してprojects_target_env_var_partial_update API エンドポイントを呼び出し、機能フラグを環境変数として設定します。これにより、バンドルがデプロイされます。コードで環境変数を使用する前に、環境が再デプロイされるのを待ちます。また、Runtime Admin を使用して環境変数を管理することもできます。環境変数を参照してください。

1curl "https://cloud.mobify.com/api/projects/$PROJECT_ID/target/$ENVIRONMENT_ID/env-var/" \
2  --request 'PATCH' \
3  --header 'Content-Type: application/json' \
4  --header 'Accept: application/json' \
5  --header "Authorization: Bearer $MOBIFY_API_KEY" \
6  --data   '{"ENABLE_FEATURE": {"value": "true"}}'