【Next.js】DockerでNext.jsの環境構築をする | Webエンジニア「いっしー」のブログ

動画で解説を見る

1 開発環境
2 DockerでNext.jsの環境構築をする手順
3 まとめ

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
Docker Engine:v23.0.5

DockerでNext.jsの環境構築をする手順

DockerでNext.jsの環境構築をする手順について解説していきます。

ディレクトリ構成

今回のディレクトリ構成は下記を目指していきます。

docker-next/
├── app/                    # Next.jsアプリケーションが作成されるディレクトリ
├── docker/
│   └── Dockerfile          # Dockerfileを配置するディレクトリ
└── docker-compose.yml      # Docker Composeファイル

docker-next/

├── app/ # Next.jsアプリケーションが作成されるディレクトリ

├── docker/

│ └── Dockerfile # Dockerfileを配置するディレクトリ

└── docker-compose.yml # Docker Composeファイル

docker-compose.ymlを作成

まずはdocker-compose.ymlを作成していきます。

ルートディレクトリの直下にdocker-compose.ymlを作成し、以下のようにしてください。

version: '3.8'

services:
  app:
    build:
      context: .
      dockerfile: docker/Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./app:/var/www/html

version: '3.8'

services:

app:

build:

context: .

dockerfile: docker/Dockerfile

ports:

- "3000:3000"

volumes:

- ./app:/var/www/html

コンテナを作成

次にコンテナを作成していきます。

docker/web/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。

FROM node:lts-alpine3.20

WORKDIR /var/www/html

FROM node:lts-alpine3.20

WORKDIR /var/www/html

Next.jsプロジェクトの作成

次にNext.jsプロジェクトの作成をしていきます。

まずは以下のコマンドでプロジェクトディレクトリに移動します。

cd docker-next

1	cd docker-next

以下のコマンドでコンテナをビルドします。

docker-compose build

1	docker-compose build

以下のコマンドでNext.jsプロジェクトを作成します。

docker-compose run --rm app sh -c 'npx create-next-app .'

1	docker-compose run --rm app sh -c 'npx create-next-app .'

コンテナの修正

次にコンテナを修正していきます。

FROM node:lts-alpine3.20

WORKDIR /var/www/html

COPY ./app .

RUN npm install

FROM node:lts-alpine3.20

WORKDIR /var/www/html

COPY ./app .

RUN npm install

docker-compose.ymlを修正

docker-compose.ymlを修正していきます。

ルートディレクトリの直下のdocker-compose.ymlを以下のように修正してください。

version: '3.8'

services:
  app:
    build:
      context: .
      dockerfile: docker/Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./app:/var/www/html
    command: npm run dev

version: '3.8'

services:

app:

build:

context: .

dockerfile: docker/Dockerfile

ports:

- "3000:3000"

volumes:

- ./app:/var/www/html

command: npm run dev

Dockerコンテナをビルド

次にDockerコンテナをビルドしていきます。

まずは以下のコマンドでプロジェクトディレクトリに移動します。
※プロジェクトディレクトリに移動済の場合はスキップしてください。

cd docker-next

1	cd docker-next

以下のコマンドでDockerコンテナをビルドします。

docker-compose build --no-cache

1	docker-compose build --no-cache

Dockerコンテナを起動

次に以下のコマンドでコンテナを起動します。

docker-compose up

1	docker-compose up

ブラウザでhttp://localhost:3000にアクセスし、Next.jsアプリケーションの初期画面が表示されていれば成功です。

まとめ

今回はDockerでNext.jsの環境構築をする手順について解説していきましたが、いかがだったでしょうか。

個人開発のみであればDockerは不要かもしれませんが、Dockerコンテナで開発環境を構築することにより、複数人でプロジェクトを進める場合でも同じ環境で開発を進めることができます。

Dockerを使った開発は必須となりつつありますので、是非、チャレンジしてみてください。