Managed Runtime の環境変数を設定してページで表示してみる 


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

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


## 今回試すこと

今回はモックなどで利用される [httpbin.org](https://httpbin.org/) に下記の構成で MRT に環境変数に設定した API キーを擬似的にヘッダーに設定してリクエストを投げます。httpbin からはリクエストの内容が JSON として返却されるので、環境変数を設定した状態と、設定していない状態でどのように変化するかを見て行きたいと思います。
![Environment Variables Sample Arch (1) (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/c21d91dd-bf63-5051-5de4-1c078a64e87b.jpeg)


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

:::note
今回は PWA Kit v3 の[拡張テンプレート](https://qiita.com/syunyama/items/b97057c4d2e5073c6eee)を利用しています。ページの作成方法は「[PWA Kit の拡張テンプレートを使ってみる](https://qiita.com/syunyama/items/b97057c4d2e5073c6eee#%E6%96%B0%E3%81%97%E3%81%84%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%81%84%E5%A0%B4%E5%90%88)」を参照してください。
:::

### 自作 API を利用しない場合
```javascript: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 を作成します。

```javascript: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` に対してリクエストしてその内容をそのまま画面に表示するようなページを作成します。

```javascript: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 のサンプルを構築してみる](https://qiita.com/syunyama/items/58433ae8e3c5fda7f37e#4--managed-runtime%E3%81%B8%E3%81%AE%E5%85%AC%E9%96%8B%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4)」を参考にしてください。



#### 何も設定していない状態
何も設定してない状態だと、`No API Key` という文字が表示されます。
![スクリーンショット 2023-07-14 16.59.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/2d11a0ac-fbc9-3eaf-8d1d-f09f6ddcab89.png)



#### 環境変数を設定する

[環境変数を変更する API](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/references/managed-runtime-api?meta=projects_target_env_var_partial_update) を利用して環境変数を設定し行きます。Managed Runtime の API の呼び方に関しては「[Managed Runtime API を呼んでみる](https://qiita.com/syunyama/items/db62cfa105e30cb73a3f)」を参照してください。
下記のように `API_KEY_TEST` という環境変数に `Added Api Key` という文字列を設定します。


```shell
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"
    }
}'
```

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



#### 環境変数を設定した状態

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

![スクリーンショット 2023-07-14 17.01.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/38ea1d14-ca15-01c0-08d5-902bd8c07ba1.png)



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