Docker ComposeからQuasarアプリへ環境変数を渡すときに詰まった話

概要

• 開発用サーバーではcompose.yamlのenvironmentで渡すだけでよい
• 本番環境で使用するならcompose.yamlのbuild.argsで設定し、DockerfileではARGで受け取る必要がある

課題

Quasarフレームワークでは、開発用サーバーを立ち上げることができます。

compose.yamlで下記のように環境変数を設定し、Dockerfileで開発用サーバーを起動するように設定すると、Quasarアプリケーションに環境変数を渡すことができました^[1]

compose.yaml

services:
  app:
    (略)
    environment:
      - HOGE=hogehoge
      - HUGA=hugahuga

しかし、ビルドしてWebサーバにデプロイする場合、この方法では環境変数を渡すことはできませんでした。

解決方法

開発用サーバーと異なり、環境変数はビルド時にアプリケーションに埋め込まれるにもかかわらず、compose.yamlのenvironmentで設定した値はビルド時に使用できないのが原因でした。

ビルド時も使用できるように環境変数を渡したい場合、compose.yamlではbuild.argsで設定し、その値をDockerfileのARGで受け取るようにする必要があります。

compose.yaml

services:
  app:
    build:
       (略)
      args:
        - HOGE=hogehoge
        - HUGA=hugahuga
    (略)

Dockerfile

(略)
ARG HOGE
ARG HUGA
(略)
RUN npm run build
(略)

参考までに、compose.yamlとDockerfileで指定できる環境変数のスコープの違いをまとめてみました。

設定方法	スコープ
compose.yaml build.args	ビルド時のみ（Dockerfile ARGと組み合わせて使用）
compose.yaml environment	コンテナ実行時のみ
Dockerfile ARG	ビルド時のみ
Dockerfile ENV	ビルド時とコンテナ実行時

脚注

1. Quasar側でも環境変数を受け取れるように設定ファイルに追加しておく必要があります https://quasar.dev/quasar-cli-vite/handling-process-env#adding-to-process-env