失敗談と解決方法です
やらかしたメモ
実現させたかったこと
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>