next.jsはビルド時にも環境変数を必要とするため、Dockerfileを読み込むときに適切に環境変数を設定しないといけない。

結論

だいたい以下のようなDockerfile, docker-compose.yamlを使っていれば正解

一つづつ解説していく

# 本番用フロントエンドDockerfile

FROM node:16-alpine

ARG NEXT_PUBLIC_BACKEND_ORIGIN

COPY package.json /root/app/
COPY yarn.lock /root/app/
WORKDIR /root/app
RUN yarn install --network-concurrency 1

COPY . /root/app
RUN yarn build

CMD ["yarn", "start"]

EXPOSE 3000

docker-compose.yaml

version: '3.2'

services:
  prod_front:
    build:
      context: ./frontend
      args:
        - NEXT_PUBLIC_BACKEND_ORIGIN=$NEXT_PUBLIC_BACKEND_ORIGIN
    container_name: grpc_prod_front
    ports:
      - "3000:3000"
    env_file:
      - .env

チェックポイント1

DockerfileにARG NEXT_PUBLIC_BACKEND_ORIGINを書く

以下のようにFROMの前に書いてはいけない

ARG NEXT_PUBLIC_BACKEND_ORIGIN

FROM node:16-alpine

チェックポイント2

docker-compose.yamlにargsを指定する。

以下の様に直接値を指定するか、

      args:
        - NEXT_PUBLIC_BACKEND_ORIGIN=HOGEHOGE

以下のように システムの環境変数 か.envファイルの変数を使うことができる。

      args:
        - NEXT_PUBLIC_BACKEND_ORIGIN=$HOGEHOGE

システムの環境変数とは

echo $HOGEHOGEと打ち込んで結果がでれば、それはシステムの環境変数になっている

$ echo $HOGEHOGE
FUGAFUGA

.envファイルとは

以下の形式の.envという名前のファイルをdocker-compose.yamlと同じディレクトリに置くことで勝手に読み込んでくれる

HOGEHOGE=FUGAFUGA

.env.sampleや.sample.envといった名前のファイルでは効果がないので注意

チェックポイント3

キャッシュが影響している場合もある。以下のコマンドでビルドだけ実行できるのでこれで動くか試す。

$ docker compose build --no-cache