2025.01.15

Next.jsの開発環境をDockerComposeを使って構築してみる



こんにちは。木村です。

今回は、Next.js x Docker(Compose)で開発環境を構築して、「Hello, World!」を表示させてみたいと思います。

あと、Docker Composeについては、v2の「docker compose」を利用しています。 v1の「docker-compose」に読み替えてもらっても実行できるかもしれませんが、未検証です。



1.プロジェクトディレクトリを作成


全体の必要ファイルをまとめるディレクトリを作成して移動します。


> mkdir nextjs-docker

> cd nextjs-docker



実際のNext.jsプロジェクトを配置するディレクトリも作成します。

> mkdir nextjs-project




2.必要なファイルを作成する

※これらは「nextjs-docker」ディレクトリ内で行います。


[Dockerfile]を作成


FROM node:18-bullseye


# 作業ディレクトリを設定

WORKDIR /app


# 必要なポートを公開

EXPOSE 3000


# 開発サーバーを起動

CMD ["npm", "run", "dev"]





[docker-compose.yml]を作成


version: '3.8'

services:

 nextjs:

   build:

     context: .

     dockerfile: Dockerfile

   ports:

     - "3000:3000"

   volumes:

     - ./nextjs-project:/app

   stdin_open: true

   tty: true





3.プロジェクトを初期化する


一旦一時的にコンテナを起動し、必要な設定を行う。

> docker compose run --rm nextjs sh



npx create-next-appを使い、Next.jsプロジェクトを初期化します。

# npx create-next-app@latest .


以下のように聞かれるので「y」でEnter

Ok to proceed? (y) 


その後、対話形式で質問が表示されますが、すべてデフォルト(Enterキーを押すだけ)で進めます。


Success! Created app at /app


と表示されればOK。



プロジェクトの初期化が完了したら、依存関係をインストールします。

# npm install



コンテナから退出する。

# exit


退出するとコンテナは自動で削除されます。

生成されたファイル類は「docker-compose.yml」の設定でバインドマウントしているので、ホストOS側にもファイルが同期されています。(念の為)




4. ホスト側でファイル類を確認


ホスト側で、以下のようなファイルが生成されているか確認します。


> ls ~/nextjs-docker/nextjs-project/

README.md  app/  eslint.config.mjs  next-env.d.ts  next.config.ts  node_modules/  package-lock.json  package.json  postcss.config.mjs  public/  tailwind.config.ts  tsconfig.json



作成されたファイルの所有者がrootになっているので、これを現在のユーザに変更します。

nextjs-projectディレクトリ内で以下を実行します。


> sudo chown -R $(id -u):$(id -g) .


$(id -u)は現在のユーザーID、$(id -g)は現在のグループIDです。

このコマンドはカレントディレクトリ以下のすべてのファイルを現在のユーザーに変更します。



5. app/page.tsxを編集

app/page.tsxを以下のように編集します。


export default function Home() {

 return (

   <div>

     <h1>Hello, World!</h1>

   </div>

 );


}



6.プロジェクト初期化後、Dcokerfileを変更

Dockerfileを以下のように更新します。

[Dockerfile]


FROM node:18-bullseye


# 作業ディレクトリを設定

WORKDIR /app


# パッケージファイルをコピー

COPY nextjs-project/package.json nextjs-project/package-lock.json ./


# 依存関係をインストール

RUN npm install


# アプリケーションコードをコピー

COPY nextjs-project .


# 必要なポートを公開

EXPOSE 3000


# 開発サーバーを起動

CMD ["npm", "run", "dev"]





7.初期ページ(Hello,world)を確認


コンテナをビルドして起動します。

(docker-compose.ymlが存在するディレクトリで実行)


> docker compose up --build -d



ブラウザで以下のURLを開きます。

http://localhost:3000


Hello, World!が表示されていればOKです!