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

2024/02/08に公開

はじめに

動作環境

  • Docker 24.0.7

目標

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

手順

Dockerにnode環境を作る

Dockerfiledocker-compose.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のディレクトリ構成を作る

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

  • Dockerfilesrcディレクトリに入れる
    ├── 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

GitHubで編集を提案

Discussion