Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

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

なにが起きましたか

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

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

原因

原因は主に2つあった.

これは既にそのとおりにしており,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のときに直接指定してもいいかもしれない.そのほうが意味的には良い
  • 思い込み怖いね
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What are the problem?