[調査ログ] Azure App Service アプリケーション設定 (環境変数) の変更が反映されない件について

# 調査ログ
Azure App Service アプリケーション設定を変更したが、反映されないので原因を調査してみました。調査ログなので、試したことを一通り書いておきます。最近、試したことをすぐに忘れてしまうので、何を試してどんな結果だったのかをログとして残す目的で記事を書いています。

# 検証環境
- VSCode
- Azure App Service ( Linux | Nodejs 16 LTS )
- React アプリケーション  ( v17.0.2 )

# 本編
## App Service アプリケーション設定について
アプリケーションを開発する際、API への ``リクエストURL`` や ``APIキー`` などが開発環境、本番環境で異なるため、環境変数で扱うケースが一般的かと思います。ローカル環境での開発の場合は、``.local.env`` ないしは、``.development.env`` に環境変数を設定することが多いですが、このファイルには機密情報が含まれているため、ソース管理 (git) 外として扱います。そのため、App Service 環境下での環境変数は **アプリケーション設定** もしくは、``Key Vault`` を使用して行われます。

本記事は、App Service の **アプリケーション設定** を使用して、環境変数を設定した後、アプリケーションコード側で環境変数の変更が反映されていない問題についてのトラブルシューティングになります。

## App Service アプリケーション設定方法 (Azure Portal)

App Service のアプリケーション設定は **対象リソース > 設定 > 構成 > アプリケーション設定** より行うことが可能です。

<img width="640.8" alt="image.png (313.2 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/09/22/10862/e39139f1-53bf-4f51-901d-870f4aeed22a.png">

設定されている値は ``非表示の値です。値を表示するには、クリックしてください`` を押すと、一時的に表示されるようになります。また、アプリケーション設定を変更すると、App Service が再起動されます。

## 発生した事象
Azure Portal 上から、前述の手順通りにアプリケーション設定を編集して、保存ボタンを押し、App Service を再起動したのですが、アプリケーションコード側で読み込まれている環境変数が変更前の値となっている事象が発生しました。

## 仮説①: Azure Portal 上では変更されているように見えているが、App Service コンテナ上で変更が反映されていない？

まず、Azure App Service コンテナ環境の環境変数に変更が適用されていないのではないかという仮説を立てました。この仮説を確認するためには、App Service が動作しているコンテナ環境へ SSH をして、``printenv`` コマンドを実行します。

**対象リソース > 開発ツール > SSH** を選択します。

<img width="941.7599999999999" alt="image.png (322.9 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/09/22/10862/2062cd35-c6fa-472b-9e2f-fe2b30d912b7.png">

SSH ページに遷移後、**移動** ボタンを押下します。

<img width="958.0799999999999" alt="image.png (122.2 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/09/22/10862/7eceefc3-589c-44e7-bb56-ddaf94305c3a.png">

SSH 接続が確立されると、以下画面が表示されます。

<img width="379.2" alt="image.png (85.6 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/09/22/10862/f1a34897-51fe-469e-9355-b96ff1b589fd.png">

コンソール画面より、以下コマンドを実行します。

``printenv | grep 確認したい環境変数名`` 

出力例
``
確認したい環境変数名=xxxxxxxxxxxxxxxx
``

この手順でコンテナ自体には、環境変数が正しく設定されていることを確認できました。

## 仮説②: アプリケーションコード側で環境変数が正しく読み込まれていないだけ？

App Service 側では、アプリケーション設定 (環境変数) が正しく設定されていることを確認できました。次は、アプリケーションコード側で正しく環境変数が読み込まれているのか、確認したいと思います。

アプリケーションコードへ ``console.log(process.env)`` を追加して、ローカルGit 経由で App Service へデプロイします。デプロイ後、Web ブラウザから App Service URL を開き、開発ツール (F12) の console 出力を確認します。

上記手順でアプリケーションコードが読み込んでいる環境変数を確認すると、変更前の値であることが判明しました。

## 仮説③: pm2 でプロセス管理を行っているアプリケーションを手動で停止、開始を行うと環境変数が更新される

今回、デプロイした App Service では、スタートアップコマンドを使用して、pm2 ( Nodejs 用のプロセス監視ツール ) でアプリケーションを起動して、プロセス監視を行っています。このプロセスを一度削除して、新しいプロセスとしてアプリケーションを起動すれば、環境変数も更新されるのではないかと仮説を立てました。

pm2 プロセス一覧を表示する
``pm2 list``

対象のプロセスを削除する
``pm2 delete <id>``

新しいプロセスを起動する
``pm2 serve /home/site/wwwroot/build --no-daemon``

プロセスを更新した後、再度 App Service へアクセスするも、環境変数は更新前の状態のまま。

## 仮説④: ドキュメントを読め
ドキュメントの読み込みが足りないのではないか。ということで、再度公式ドキュメントに目を通してみる。

> <img width="459" alt="image.png (66.4 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/09/22/10862/c8f78379-9b52-4b42-8939-e12c773fd61d.png">
>
> [アプリケーションの設定の構成](https://learn.microsoft.com/ja-jp/azure/app-service/configure-common?tabs=portal#configure-app-settings)
>
> App Service では、コンテナー内に環境変数を設定するためのアプリ設定が ``--env`` フラグを使用して、コンテナーに渡されます。いずれの場合も、アプリケーション起動時にアプリ環境に挿入されます。

少し日本語がおかしい気もしますが、アプリケーション設定が更新された場合、アプリの起動がトリガーとなって、環境変数が更新される。という意味だと捉えました。この表記通り、App Service の再起動後にコンテナ内の環境変数設定が更新されています。

知りたいのはアプリケーションコードがどのタイミングで環境変数を読み込んでいるのか... ここで、デプロイ直後に環境変数が変わっていた (ような) ことに気が付く。

## 仮説⑤: 再デプロイを行う
Azure Portal で、対象 App Service リソースを開き、
デプロイセンター > ログへ遷移後、成功してアクティブになっているデプロイID をクリックして、再デプロイを行う。デプロイ時に環境変数の処理が行われている可能性を調査する。

Azure Portal で App Service リソースを開く。
**デプロイメント > デプロイセンター > ログ** を開く。
**最新のコミットID** をクリックする。

<img width="646.0799999999999" alt="image.png (251.4 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/09/22/10862/a589a739-f5a9-4031-beec-4cc7d4f28c76.png">

**コミットの再デプロイ** ボタンを押して、再デプロイを行う。

<img width="503.99999999999994" alt="image.png (197.2 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/09/22/10862/ba0ecbe6-88e8-44b2-a8f3-e8ef30bed779.png">

これでアプリケーションコード側で環境変数が更新されました。

# 結果
アプリケーションを再デプロイすることで、環境変数を更新することができました。再デプロイは時間がかかるので、他の対処法があれば教えていただけると嬉しいです。以上、調査ログでした。