【Next.js】DockerでNext.jsの環境構築をする
開発環境
- Visual Studio Code:version 1.73.0
- OS:Windows10
- Docker Engine:v23.0.5
DockerでNext.jsの環境構築をする手順
DockerでNext.jsの環境構築をする手順について解説していきます。
ディレクトリ構成
今回のディレクトリ構成は下記を目指していきます。
1# Directory structure 2docker-next/ 3├── app/ # Next.jsアプリケーションが作成されるディレクトリ 4├── docker/ 5│ └── Dockerfile # Dockerfileを配置するディレクトリ 6└── docker-compose.yml # Docker Composeファイル
docker-compose.ymlを作成
まずはdocker-compose.ymlを作成していきます。 ルートディレクトリの直下にdocker-compose.ymlを作成し、以下のようにしてください。
1# docker-compose.yml 2version: '3.8' 3 4services: 5 app: 6 build: 7 context: . 8 dockerfile: docker/Dockerfile 9 ports: 10 - "3000:3000" 11 volumes: 12 - ./app:/var/www/html
コンテナを作成
次にコンテナを作成していきます。
docker/web/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。
1# docker/web/Dockerfile 2FROM node:lts-alpine3.20 3 4WORKDIR /var/www/html
Next.jsプロジェクトの作成
次にNext.jsプロジェクトの作成をしていきます。 まずは以下のコマンドでプロジェクトディレクトリに移動します。
1cd docker-next
以下のコマンドでコンテナをビルドします。
1docker-compose build
以下のコマンドでNext.jsプロジェクトを作成します。
1docker-compose run --rm app sh -c 'npx create-next-app .'
コンテナの修正
次にコンテナを修正していきます。
1# docker/web/Dockerfile 2FROM node:lts-alpine3.20 3 4WORKDIR /var/www/html 5+ COPY ./app . 6+ RUN npm install
docker-compose.ymlを修正
docker-compose.ymlを修正していきます。 ルートディレクトリの直下のdocker-compose.ymlを以下のように修正してください。
1# docker-compose.yml 2version: '3.8' 3 4services: 5 app: 6 build: 7 context: . 8 dockerfile: docker/Dockerfile 9 ports: 10 - "3000:3000" 11 volumes: 12 - ./app:/var/www/html 13+ command: npm run dev
Dockerコンテナをビルド
次にDockerコンテナをビルドしていきます。 まずは以下のコマンドでプロジェクトディレクトリに移動します。 ※プロジェクトディレクトリに移動済の場合はスキップしてください。
1cd docker-next
以下のコマンドでDockerコンテナをビルドします。
1docker-compose build --no-cache
Dockerコンテナを起動
次に以下のコマンドでコンテナを起動します。
1docker-compose up
ブラウザでhttp://localhost:3000にアクセスし、Next.jsアプリケーションの初期画面が表示されていれば成功です。
まとめ
今回はDockerでNext.jsの環境構築をする手順について解説していきましたが、いかがだったでしょうか。 個人開発のみであればDockerは不要かもしれませんが、Dockerコンテナで開発環境を構築することにより、複数人でプロジェクトを進める場合でも同じ環境で開発を進めることができます。 Dockerを使った開発は必須となりつつありますので、是非、チャレンジしてみてください。