失敗談と解決方法です
やらかしたメモ

実現させたかったこと

Azure上のApp Serviceで設定した環境変数をデプロイしたDockerイメージで使用したかった。
CRA(Create React App)を使用しているため、.envファイルにREACT_APP_と先頭とつけて書いておくと環境変数として読み込まれる。。
　→ App Serviceから環境変数として渡されている値をもとに.envを生成する。

試した実装と望んでいた動作

DockerfileのCMDを使用してDocker runのタイミングで.envを生成するシェルスクリプトを実行する。
↓↓↓

CMD [ "/bin/bash", "-c", "./env.sh" ]

env.sh

# !/bin/bash

rm -rf .env
touch .env

while read -r line || [[ -n "$line" ]];
do
  if printf '%s\n' "$line" | grep -q -e '='; then
    varname=$(printf '%s\n' "$line" | sed -e 's/=.*//')
    varvalue=$(printf '%s\n' "$line" | sed -e 's/^[^=]*=//')
  fi

  value=$(printf '%s\n' "${!varname}")
  [[ -z $value ]] && value=${varvalue}
  
  echo "$varname = \"$value\"" >> .env
done < .env.key

.env.key

REACT_APP_ID = 
REACT_APP_PW =

.env.keyにある変数名をもとに.envを生成して、下の要領でアプリケーション内で読み込みたかった。

id = process.env.REACT_APP_ID;
pw = process.env.REACT_APP_PW;

原因

.envの読み込みタイミングはDockerfile内のyarn buildが実行されたとき。
yarn buildが実行されているのはdocker buildをした際のみで、.envが生成される前。
docker runが実行されるのもApp Serviceから環境変数が渡されるのもdocker buildが終了し、App Serviceにデプロイされたタイミング。
　→ .envの生成自体は成功していたが読み込まれていなかった。

ただのミスだった…

解決策

下記のようにenvファイルを変更して、環境変数を保持するjsファイルを生成する。
index.htmlのheadでスクリプトとして読み込ませることで、window._env_.***として呼び出すことができる。

呼び出し

id = window._env_.REACT_APP_ID; 
pw = window._env_.REACT_APP_PW;

env.sh

# !/bin/bash

rm -rf ./env-config.js
touch ./env-config.js

echo "window._env_ = {" >> ./env-config.js

while read -r line || [[ -n "$line" ]];
do
  if printf '%s\n' "$line" | grep -q -e '='; then
    varname=$(printf '%s\n' "$line" | sed -e 's/=.*//')
    varvalue=$(printf '%s\n' "$line" | sed -e 's/^[^=]*=//')
  fi

  value=$(printf '%s\n' "${!varname}")
  [[ -z $value ]] && value=${varvalue}
  
  echo "  $varname: \"$value\"," >> ./env-config.js
done < .env

echo "}" >> ./env-config.js

index.html

<head>
...
    <script src="%PUBLIC_URL%/env-config.js"></script>
...
</head>

実現させたかったこと

試した実装と望んでいた動作

原因

解決策

参考