Docker✖️Next.js14の環境構築
今記事の目標
Next.jsを動かすDockerfileとdocker-compose.ymlを作成していきたいと思います。
環境について
- Next.js 14.0.1
- Typescript 5
- Node.js 21
- macOS Sonoma 14.1.1
- Docker Desktop 4.18.0
Dockerfileを作成する
プロジェクトフォルダを作成する
今回作業していくフォルダを作成します。
私の場合は~/develop配下で作業をしていきたいので以下のようにしてプロジェクトフォルダを作成し、プロジェクトフォルダ配下に移動します。
% mkdir ~/develop/share-favplace-front
% cd ~/develop/share-favplace-front
プロジェクトフォルダ配下にDockerfileを作成する
下記コマンドでDockerfileを作成します。
share-favplace-front % touch Dockerfile
Dockerfileの編集
Dockerfileを編集していきます。
FROM node:21-bullseye-slim
ARG WORKDIR
ARG API_URL
ENV HOME=/${WORKDIR} \
LANG=C.UTF-8 \
TZ=Asia/Tokyo \
HOST=0.0.0.0 \
API_URL=${API_URL}
WORKDIR ${HOME}
FROM <ベースイメージ>
使用するイメージを指定します。今回はnode:21-bullseye-slimのイメージを指定しています。
ARG <変数名>
Dockerfile内で使用する変数名を指定します。
「docker-compose.yml」内のargsでセットした値がここに入ります。
ENV <変数名=値>
Dockerイメージで使用する環境変数を指定します。
ENVを使って設定した環境変数は、イメージからコンテナへ渡されます。
コンテナへ渡されると、コンテナ内で起動したアプリケーションで参照することができます。
WORKDIR <ディレクトリパス>
コンテナ内の作業ディレクトリを指定します。
COPY <ローカルのファイルパス> <Dockerのファイルパス>
ローカルファイル（自分のPC上にあるファイル）をDcoker環境にコピーする命令です。
COPY. ./
カレントフォルダ（Dockerfileがあるフォルダ）配下をDocker環境のWORKDIR(/app)配下にコピーするという命令になります。
./はWORKDIRからの相対パスを指定しており、絶対パスの/appと記述するのと同じことです。
以上で、Next.js起動するためのDockerfileを作成できました。
docker-compose.ymlを作成する
下記コマンドでdocker-compose.ymlを作成します。
share-favplace-front % touch docker-compose.yml
docker-compose.ymlの編集
docker-compose.ymlを編集していきます。
services:
front:
build:
context: .
args:
WORKDIR: ${WORKDIR}
API_URL: "http://localhost:${API_PORT}/"
container_name: share-favplace-front
command: sh -c "npm run dev"
volumes:
- .:/${WORKDIR}
ports:
- "${FRONT_PORT}:${FRONT_PORT}"
networks:
- front
networks:
front:
external: false
今回は1つのコンテナを作成します。
front
Next.jsを動かすフロント用のコンテナです。
項目説明
それぞれの項目の詳細については以下を参照してください。
以上で、Next.js起動するためのdocker-compose.ymlを作成できました。
まとめ
Next.js起動するためのDockerfileとdocker-compose.ymlを作成しました。
この環境にNext.jsのアプリケーションを作成することで、下記コマンドでアプリケーションを起動することができます。
docker-compose up -d
Next.jsのアプリケーション作成については以下を参照してください。
Discussion