[Docker] Next.jsの開発環境をDockerに構築する

はじめに

動作環境

• Docker 24.0.7

目標

• Dockerにnode環境を作る
• npx create-next-appする
• サーバーを立ち上げてみる

手順

Dockerにnode環境を作る

Dockerfileとdocker-compose.ymlをつくる

この時点でのディレクトリ構成は以下のようにすること!

    ├── Dockerfile
    └── docker-compsoe.yml

FROM node:lts-buster-slim
WORKDIR /app

CMD ["npm","run","dev","-p 3000"]

• slimってのが最小限のファイル && alpine程バグが起きない のでいいらしい

docker-compose.yml

version: '3'
services:
  app:
    build: .
    volumes:
      - ./src:/app
    ports:
      - "3000:3000"

• 同じ階層のDockerfileを実行するとなっているが後で変える
  (npx create-next-app時に出来たディレクトリに移動する必要があるため)

npx create-next-appする

$ docker-compose build
$ docker-compose run --rm app hc -c 'npx create-next-app --TypeScript'

を実行してNextのディレクトリ構成を作る

その後にやらなきゃいけないこと

• Dockerfileをsrcディレクトリに入れる

    ├── src
    │     └ Dockerfile
    └── docker-compsoe.yml

• docker-compose.ymlのビルドに指定するディレクトリを変更する

docker-compose.yml

version: '3'
services:
  app:
-    build: .
+    build: ./src
    volumes:
      - ./src:/app
    ports:
      - "3000:3000"

サーバーを立ち上げてみる

$ docker-compose up

参考

DockerでNext.jsの環境構築をする
DockerによるNext.jsの環境構築 #Docker - Qiita