Docker上でVueを動かすときに環境変数が読まれない

なにが起きましたか

• 環境
  • Docker上
  • @vue/cli
  • npm run build でビルド
  • http-server dist/ で配信

Vueのフロントエンドを作っている際，サーバサイドのAPIのエンドポイントを環境変数に格納して動かす方式を取っていた．
ローカルのビルドではちゃんと環境変数が読まれるが，Azure上にイメージをpushしたビルドでは環境変数が読まれないという状況

原因

原因は主に２つあった．

• そもそも，クライアントに配信されるjsに環境変数って？？？？
  • @vue/cli には，ビルド時にコード中の環境変数を参照する部分を置き換えてくれる機能がある
  • VUE_APP_* で始まる環境変数のみ置き換えてくれる．それ以外はundefinedになる．

これは既にそのとおりにしており，VUE_APP_API_ENDPOINTにサーバ側URLを設定していた．しかし，それでも環境変数は読まれない．

• Dockerfileで環境変数を設定していたが，ビルド後に環境変数を設定していた．

つまりこんな感じに書いていた

Dockerfile.production

FROM node:lts-alpine 

RUN npm install -g http-server && \
    npm install && \
    npm run build
EXPOSE 8000

ENV VUE_APP_API_ENDPOINT='https://hogehoge.net'
CMD [ "http-server", "dist", "-p", "8000", "-g", "-b" ]

なんとなく「環境変数はランタイムで読み込まれるもの」という思い込みが原因であった．加えて，ローカルでは npm run serve で動作していたため，これは実際にランタイムで(コマンドを叩いたタイミング)で環境変数が読み込まれており，何も問題がなかったこともある．
ちゃんとビルドコマンド前にENV ~~~を移動させると，環境変数を参照することができた．

結論

• クライアントサイドかつDockerでの開発のときは，ENVをビルドコマンドの前に書こう！
  • 実行時に必要ないし，RUNのときに直接指定してもいいかもしれない．そのほうが意味的には良い
• 思い込み怖いね