Docker ComposeでNext.js開発環境構築

2021.08.06

2024.03.24

Docker

Docker ComposeNext.js

はじめに

Next.jsの開発環境をDockerで構築していきます。

DockerfileでNext.jsのアプリが実行されるコンテナのイメージを用意し、Docker Composeで実行する方法をとります。そうすることでバックエンドとしてAPIサーバを追加した時にもdocker-composeコマンドを打つだけで開発環境が実行できるようにします。

Dockerについては下記を参考してください。

unknown link

Docker Composeについては下記を参考にしてください。

unknown link

Next.jsアプリ作成

まずはNext.jsのアプリを作成します。

試しにNext.jsの公式リポジトリからサンプルアプリを作成してみます。

1npx create-next-app sample-app-blog --use-npm --example https://github.com/vercel/next.js/tree/canary/examples/blog

アプリを作成するとこのようなディレクトリ構成になります。

1.
2└── sample-app-blog
3    ├── README.md
4    ├── next.config.js
5    ├── node_modules
6    ├── package-lock.json
7    ├── package.json
8    ├── pages
9    ├── public
10    ├── scripts
11    ├── styles
12    └── theme.config.js

アプリの作成についてはこちらを参考にしてください。

unknown link

Dockerfile作成

次にNext.jsアプリを実行するコンテナイメージの元となるDockerfileを作成します。

nodeの公式イメージを利用して、パッケージのインストールをします。

1FROM node:14.17.4-alpine
2
3WORKDIR /usr/src/app/next
4
5COPY /sample-app-blog/package*.json ./
6
7RUN npm install

https://hub.docker.com/_/node

docker-compose.yml作成

続いて、docker-compose.ymlを作成します。

1version: "3"
2services:
3  nextjs:
4    build: .
5    ports:
6      - "3000:3000"
7    container_name: nextjs-app
8    volumes:
9      - ./sample-app-blog:/usr/src/app/next
10    command: npm run dev

最終的に以下のようなディレクトリ構成になります。

1.
2├── Dockerfile
3├── docker-compose.yml
4└── sample-app-blog
5    ├── README.md
6    ├── next.config.js
7    ├── node_modules
8    ├── package-lock.json
9    ├── package.json
10    ├── pages
11    ├── public
12    ├── scripts
13    ├── styles
14    └── theme.config.js