Next.js × Docker 最速環境構築

次回記事

随時更新

詳しくDockerを知りたい方向け

https://zenn.dev/kate0418/articles/4910b4c94acbba

【 事前準備 】

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

【 ディレクトリ作成 】

1. ファイルを編集

Dockerfile

FROM node
WORKDIR /workdir

docker-compose.yml

services:
  app:
    build: ./
    volumes:
      - .:/workdir

2. コンテナに入る

ターミナル（コンテナ外）

docker compose build

docker compose run app bash

3. ディレクトリ作成コマンドを実行

ターミナル（コンテナ内）

npx -y create-next-app next-app --typescript --no-eslint --tailwind --no-src-dir --app --turbopack --no-import-alias

以下のようになればOK

.
├── next-app
├── docker-compose.yml
└── Dockerfile

【 アプリケーション起動 】

1. ファイルを編集

Dockerfile

FROM node:23.8
WORKDIR /workdir

COPY . .
WORKDIR /workdir/next-app
RUN npm install
CMD ["npm", "run", "dev"]
EXPOSE 3000

docker-compose.yml

services:
  app:
    build: ./
    volumes:
      - .:/workdir
    ports:
      - 3000:3000

2. アプリケーション起動コマンドを実行

ターミナル（コンテナ外）

docker compose build

docker compose up -d

http://localhost:3000にアクセスして以下のような画面が出ればOK