1-5.Docker✖️Next.jsの環境構築

今記事の目標
環境について
Dockerfileを作成する
docker-compose.ymlを作成する
envファイルを作成する
まとめ

今記事の目標

前回はDockerComposeを使用して実際にSpringBootを起動するところまで実施しました。
今回はNext.jsを動かすDockerfileとdocker-compose.ymlを作成していきたいと思います。
今回からはフロントエンドの環境構築をしていきます。

環境について

Next.js 14.2.3
Typescript 5
Node.js 20
macOS Sonoma 14.1.1
Docker Desktop 4.18.0

Dockerfileを作成する

プロジェクトフォルダを作成する

今回作業していくフォルダを作成します。
私の場合は~/develop配下で作業をしていきたいので以下のようにしてプロジェクトフォルダを作成し、プロジェクトフォルダ配下に移動します。

mkdir ~/develop/share-favplace-front
cd ~/develop/share-favplace-front

プロジェクトフォルダ配下にDockerfileを作成する

下記コマンドでDockerfileを作成します。

touch Dockerfile

Dockerfileの編集

Dockerfileを編集していきます。

FROM node:20-alpine AS builder

ARG WORKDIR

ENV HOME=/${WORKDIR} \
    LANG=C.UTF-8 \
    TZ=Asia/Tokyo \
    HOST=0.0.0.0 \

WORKDIR ${HOME}

FROM <ベースイメージ>

使用するイメージを指定します。今回はnode:21-bullseye-slimのイメージを指定しています。

ARG <変数名>

Dockerfile内で使用する変数名を指定します。
「docker-compose.yml」内のargsでセットした値がここに入ります。

ENV <変数名=値>

Dockerイメージで使用する環境変数を指定します。
ENVを使って設定した環境変数は、イメージからコンテナへ渡されます。
コンテナへ渡されると、コンテナ内で起動したアプリケーションで参照することができます。

WORKDIR <ディレクトリパス>

コンテナ内の作業ディレクトリを指定します。

docker-compose.ymlを作成する

下記コマンドでdocker-compose.ymlを作成します。

touch docker-compose.yml

docker-compose.ymlの編集

docker-compose.ymlを編集していきます。

version: "3.9"
services:
  front:
    build:
      context: .
      args:
        WORKDIR: ${WORKDIR}
    container_name: share-favplace-front
    command: npm run dev
    volumes:
      - .:/${WORKDIR}
    ports:
      - "${FRONT_PORT}:${FRONT_PORT}"

今回は1つのコンテナを作成します。

front
Next.jsを動かすフロント用のコンテナです。

項目説明

services:

サービスを定義します。今回はfrontのみを定義しています。

env_file: <ファイルパス>

envファイルのパスを指定します。envファイルで定義した環境変数はコンテナに渡され、コンテナ内で使用することができます。
envファイルは後ほど作成していきます。

volumes: <ローカルのパス : コンテナのパス>

ファイル等のデータを永続化します。
そもそもローカルマシン（PCを指す）とDockerコンテナは別空間にあります。
ですので、コンテナにデータを保存しても、コンテナを削除してしまえば保存したデータは全て消えてしまいます。
そこでデータベースの値やファイルなどのデータを永続化する仕組みがこのvolumes(ボリューム)となります。
ボリュームで指定したデータはコンテナを削除しても消されることはなく、次コンテナが立ち上がったときに既存のデータをコピーします。

ports: – “ホストマシンのポート番号:コンテナのポート番号”

公開ポート番号を指定します。
下記の場合は「コンテナの3000ポートを、ブラウザ上で8080で参照する」という指定になります。

ports:
  - "8080:3000"

build:

context: <ファイルパス>

Dockerfileのパスを指定します。

dockerfile: <ファイル名>

Dockerfileのファイル名を指定します。

args: <変数キー: 変数の値>

ここにはDockerfileに渡す変数を指定します。
ここで指定した値をDockerfileで受け取るにはARG命令を使用します。
下記の流れで環境変数を受け渡ししています。

WORKDIR=app

args:
  WORKDIR: $WORKDIR

ARG WORKDIR

HOME=/${WORKDIR}
=> HOME=/app

command: <コンテナで実行するコマンド>

コンテナに対して実行したいコマンドを記述します。
今回はSpringBootの起動コマンドを記述しています。

container_name:<コンテナ名>

コンテナに名前をつけます。

envファイルを作成する

docker-compose.ymlで参照している環境変数を登録していきます。
下記コマンドで.envを作成します。

touch .env

.envの編集

WORKDIR=app
FRONT_PORT=3000
API_PORT=8080

以上で、Next.jsを起動するための環境構築は完了です。

まとめ

今回はNext.jsを起動するためのDockerfileとdocker-compose.ymlを作成しました。
次回はDocker環境にNext.jsプロジェクトを作成し、起動していきたいと思います。