※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。

今回は API キーを MRT の環境変数に設定してページに表示する方法を紹介したいと思います。
通常環境変数情報をそのままページで表示することはあまりないとは思いますが、環境変数の認証情報をAPIのヘッダーに渡してレスポンスを画面に表示するようなことはあるかと思いますので、その際にこの記事を参考にしていただければと思います。

今回試すこと

今回はモックなどで利用される httpbin.org に下記の構成で MRT に環境変数に設定した API キーを擬似的にヘッダーに設定してリクエストを投げます。httpbin からはリクエストの内容が JSON として返却されるので、環境変数を設定した状態と、設定していない状態でどのように変化するかを見て行きたいと思います。

利用したソースコード

環境変数から API キー（API_KEY_TEST）を取得して（なければ No API Key という文字を）ヘッダーに追記し、https://httpbin.org/get にリクエストし、レスポンスをそのまま表示します。

今回は PWA Kit v3 の拡張テンプレートを利用しています。ページの作成方法は「PWA Kit の拡張テンプレートを使ってみる」を参照してください。

自作 API を利用しない場合

overrides/app/pages/my-new-route/index.jsx

import React from 'react'
import {useQuery} from '@tanstack/react-query'
import crossFetch from 'cross-fetch'
import {isServer} from '@salesforce/retail-react-app/app/utils/utils'

const MyNewRoute = () => {
  const { data } = useQuery({
    queryKey: ["test"],
    queryFn: async () => {
      const response = await crossFetch("https://httpbin.org/get", {
        headers: { "Api-Key": process.env["API_KEY_TEST"] || "No API Key" },
      });
      return await response.json();
    },
    enabled: isServer,
  });
  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};


export default MyNewRoute

自作 API を利用する場合

下記のように /test のパスへの Get リクエストして情報を取得できるような API を作成します。

overrides/app/ssr.js

 ---omitted---
 app.get('/test', async (req, res) => {
        const response = await crossFetch('https://httpbin.org/get', {
            headers: { "Api-Key": process.env['API_KEY_TEST'] || 'No API Key' },
        })
        res.json(await response.json())
    })
 ---omitted---

/test に対してリクエストしてその内容をそのまま画面に表示するようなページを作成します。

overrides/app/pages/my-new-route/index.jsx

import React from 'react'
import {useQuery} from '@tanstack/react-query'
import {getAppOrigin} from '@salesforce/pwa-kit-react-sdk/utils/url'
import crossFetch from 'cross-fetch'
import {isServer} from '@salesforce/retail-react-app/app/utils/utils'

const MyNewRoute = () => {
  const { data } = useQuery({
    queryKey: ["test"],
    queryFn: async () => {
      const appOrigin = getAppOrigin();
      const response = await crossFetch(appOrigin + "/test");
      return await response.json();
    },
    enabled: isServer,
  });
  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default MyNewRoute

デプロイして環境変数を変えてみる

作成したコードをデプロイして環境変数が変化するか確認してみます。
PWA Kit のデプロイ方法は「Salesforce B2C Commerce PWA Kit のサンプルを構築してみる」を参考にしてください。

何も設定していない状態

何も設定してない状態だと、No API Key という文字が表示されます。

環境変数を設定する

環境変数を変更する API を利用して環境変数を設定し行きます。Managed Runtime の API の呼び方に関しては「Managed Runtime API を呼んでみる」を参照してください。
下記のように API_KEY_TEST という環境変数に Added Api Key という文字列を設定します。

curl --location --request PATCH 'https://cloud.mobify.com/api/projects/{プロジェクト名}/target/{環境名}/env-var/' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer {MRTのAPIキー}' \
--data '{
    "API_KEY_TEST": {
        "value": "Added Api Key"
    }
}'

ちなみに環境変数を削除したい場合は value に null を設定すると削除されるようです。

環境変数を設定した状態

環境変数を設定した後（設定後少々時間かかります）環境変数が設定されたか確認するために画面を表示します。画面には API で設定した環境変数の値 Added Api Key という文字列が表示されています。

ローカル開発での環境変数

2023/07 時点ではデフォルトでローカルでの環境変数を利用した開発方法は特に決まっていません。
そのため dotenv のような環境変数設定ライブラリをご自身でインストールしていただければいいかなと思います。