概要

docker-compose.ymlのserviceの1つにenv_fileを指定し、環境変数を設定したが、サービスがbuildするコンテナ内（Dockerfile側）では参照できなかった。 vueのアプリケーションをコンテナ内でnpmを使ってビルドしており、アプリケーション側でprocess.env.VUE_APP_API_ENDPOINTという形でアプリケーションのビルド時に環境変数を参照させたかった。

解決策

docker-compose.ymlで指定するenv_fileやenvironmentといったキーはコンテナのビルド後に参照できるようになるため、それらのキーを利用するだけではコンテナビルド中では参照することができない。

docker-compose.ymlでargsキーを指定し、変数をコンテナに渡すことで解決した。

.env

VUE_APP_API_ENDPOINT="http://gobel-api.local"

Dockerfile

FROM node:14.3.0-alpine as build-stage

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

# 引数を受け取ってコンテナ内で環境変数を定義
ARG VUE_APP_API_ENDPOINT
ENV VUE_APP_API_ENDPOINT=${VUE_APP_API_ENDPOINT}

# アプリケーションのビルド。環境変数を参照できる。
RUN npm run local-build

FROM nginx:1.19.0-alpine

COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
COPY ./nginx/conf.d/gobel-admin-client.conf /etc/nginx/conf.d/gobel-admin-client.conf
COPY --from=build-stage /app/dist /var/www/html

docker-compose.yml

version: "3.8"
services:
  app:
    container_name: "gobel-admin-client"
    # 環境変数はファイルから読み込む
    env_file: ".env"
    build:
        context: "./app"
        dockerfile: "Dockerfile"
        # 変数をコンテナのビルド時に渡す
        args:
          VUE_APP_API_ENDPOINT: $VUE_APP_API_ENDPOINT
    ports:
      - "82:80"
    networks:
      - gobel_link
networks:
    gobel_link:
        external: true

参考までにビルド時に環境変数を参照したいアプリケーション側のコードを記載。

const apiClient = axios.create({
  baseURL: process.env.VUE_APP_API_ENDPOINT,
  headers: {
    "Content-Type": "application/json"
  },
  responseType: "json"
});

docker-compose.ymlで指定した環境変数がコンテナビルド中に参照できない

概要

解決策

参考