Next.js開発環境をDockerに０から作成する方法
ご覧いただきありがとうございます。こやさんです。
今回は、「Next.jsの開発環境構築をDocker上で0から行う方法」についてまとめます。
経緯としては、ローカル環境にNext.js環境を構築してからDocker化するという方法はたくさんあると思いますが、全てをDockerコンテナ内で完結する方法がなかなか見当たらなかったのでまとめることにしました。
環境
PC：MacBook Pro 13-inch, 2020, Four Thunderbolt 3 ports
macOS：Sonoma 14.6.1
Shell: zsh
dockerセッティング
Dockerfileとdocker-compose.ymlファイルを準備します。
Nodeが使用できる最低限の環境で立ち上げます。
docker-compose.yml
version: '3'
services:
host-app:
build: .
ports:
- '3000:3000'
volumes:
- type: bind
source: .
target: /usr/src/app
# 標準入力を開く
stdin_open: true
# 仮想端末を有効にする
tty: true
Dockerfile
# nodeイメージから作成
FROM node:20.11.0
# Create app directory
WORKDIR /usr/src/app
コンテナ立ち上げ
シェルが使える状態でコンテナを立ち上げます。
また、立ち上げ後の一通りの作業が完了したのちにコンテナ自体を削除するように--rmを付与します。
docker-compose run --rm host-app sh
コマンドを実行するとコンテナ内に入った状態になり、何かしらのコマンドが実行できる状態になっていると思います。
この状態になったら、Next.jsのインストールに進みます。
Next.jsインストール
インストール方法は公式を参照します。
公式を参考に以降の手順を進めていきます。
先ほど立ち上げたコンテナ内で、以下のコマンドを実行します。
npx create-next-app@latest
実行するとセッテイングに関する質問をされるので順番に選択していきます。
今回は以下のように回答しました。
✔ What is your project named? … host-app
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … No
✔ Would you like to customize the default import alias (@/*)? … No
ここまで実行すると、Next.jsのプロジェクトが作成されていると思います。
無事にプロジェクトが作成できていたら、コンテナをexitで終了します。
dockerセッティングの修正
現状のdockerの設定ファイルはNode環境のみの設定だったので、コンテナ起動時にNext.jsのプロジェクトが立ち上がりません。
なので、ちゃんと立ち上がるように修正していきます。
docker-compose.yml
version: "3"
services:
host-app:
build:
context: .
dockerfile: Dockerfile
ports:
- "3000:3000"
volumes:
- type: bind
source: .
target: /usr/src/app
- type: volume
source: host-app-node_modules
target: /usr/src/app/node_modules
networks:
- microfrontends
command: ["npm", "run", "dev"]
volumes:
host-app-node_modules:
driver: local
networks:
microfrontends:
external: true
Dockerfile
# Dockerfile
FROM node:20.11.0
# Create app directory
WORKDIR /usr/src/app/host-app/host-app
# Copy package.json package-lock.json
COPY ./host-app/package*.json .
RUN ["npm", "install"]
ネットワークの存在チェック
また、docker-compose.ymlで以下のように記載してるため、ネットワークがすでに存在しないと起動時にエラーになります。
networks:
microfrontends:
external: true
なので、ネットワークの存在チェックと作成のスクリプトを作成します。
誰かに渡すときはこれも一緒に実行してもらってください。
#!/bin/zsh
# ネットワークの存在を確認
if ! docker network inspect microfrontends >/dev/null 2>&1; then
echo "Network 'microfrontends' does not exist. Creating..."
docker network create microfrontends
else
echo "Network 'microfrontends' already exists."
fi
ここまで来れば準備完了です。
起動確認
最後に順番にコマンドを実行していきちゃんと起動できるかを確認して終了です。
- ネットワークの存在確認
sh check-network.sh
- ビルド実行
docker-compose build --no-cache
- 立ち上げ
docker-compose up
localhost:3000で以下の画面が表示されれば完了です！
以上で「Next.jsの開発環境構築をDocker上で0から行う方法」は完了となります！
~
Discussion