DockerでNext.jsの環境構築をする。備忘録

やること

タイトルのとおり、DockerでNext.jsの環境構築を行う。前提条件として、初めてNext.jsを触るとして、Next.jsプロジェクトは作成されていないものとする。

ディレクトリ構造

nextJS
  |――docker-compsose.yml
  |――Dockerfile
  |__package.json

docker-compose.ymlの内容

docker-compose.yml

version: '3'
services:
  app:
    build:
      context: .
    volumes:
      - .:/app

Dockerfileの内容

Dockerfile

FROM node:18.12-alpine
WORKDIR /app/

package.jsonの中身

package.json

{
  "dependencies": {
    "npm": "^10.1.0"
  }
}

Node.jsコンテナをbuildし、Next.jsのプロジェクトを作成する

docker-compose build
docker-compose run --rm app sh

説明

docker-compose build

上記のコマンドでコンテナをbuildする。

docker-compose run --rm app sh

runコマンドでappコンテナのシェルを起動する。

Next.jsプロジェクト作成

起動されたシェルに下記のコマンドを入力

 npx create-next-app@latest

このコマンドを入力すると、プロジェクトの名前やTailwindCSSを使うか、Typescriptを使用するかなどが聞かれるため好みで選択する。

今回、Next.jsプロジェクトはyour-projectとする。

コンテナを起動するための前準備

現時点でのディレクトリ構造の確認

nextJS
  |――your-project
  |――docker-compsose.yml
  |――Dockerfile

作成したプロジェクト内にDockerfileとdocker-compose.ymlを新規作成

nextJS
  |――your-project
        |――Dockerfile
	|――docker-compose.yml
	|――package.json
	|――他のファイル
  |――docker-compsose.yml
  |――Dockerfile

Dockerfileの内容

Dockerfile

FROM node:18.12-alpine
WORKDIR /app/
COPY ./package.json /app/
RUN npm install

docker-compose.ymlの内容

docker-compose.yml

version: '3'

volumes:
    node-modules:
services:
  app:
    build:
      context: .
    ports:
      - "12000:3000"
    volumes:
      - .:/app/
      - node-modules:/app/node_modules
    environment:
      - WATCHPACK_POLLING=true
    command: npm run dev

コンテナの起動

docker-compose up --build

完成！！

お疲れさまでした。

参考にさせていただいた記事

https://zenn.dev/peishim/articles/de0dd58ba89ca8