Zenn
🐳

最速でDockerを使ってNext.jsの環境構築をする

2024/11/11に公開
Docker
Next.js
Next.js
tech

Dockerとは

【イメージ】
自分のパソコンとは別にパソコンを新しく作ることができる感じ



Dockerで使用するファイルの名前

  • Dockerfile
    → このファイル自体がパソコン本体みたいな感じ
    ※この記事ではDockerのパソコンみたいな言い方をします
  • docker-compose.yml
    → パソコンの管理者みたいな感じ
    ※この記事ではパソコン管理者みたいな言い方をします

Dockerfileの構造

コマンド ... 
コマンド ...
コマンド ...
コマンド ...

docker-compose.ymlの構造

services:
  pc名: #（Dockerfileに名前をつけれる感じ）
    パソコンの設定
    パソコンの設定
    パソコンの設定
  pc名:
    パソコンの設定
    パソコンの設定
    パソコンの設定

このように一つの管理者（docker-compse.yml）に複数のパソコンを紐付けることができる



ディレクトリ構造

. # 好きなディレクトリ名
├── docker-compose.yml
└── Dockerfile




ディレクトリ作成編

まずはNext.jsのディレクトリを作らないと始まらないので作っていきましょう

完成例

  • Dockerfile
FROM node:22.5-slim
WORKDIR /workdir
  • docker-compose.yml
services:
  next-pc:
    build: ./
    volumes:
      - .:/workdir

コードの解説

Dockerfile

  • FROM
    → なんの言語を使用するかという感じ
FROM 言語:バージョン (軽量版かどうか)

# 例
FROM node:22.5-slim
FROM python:3.11-slim
FROM php:8.3-fpm

# メモ
# slimなどは軽量版を使用する場合に用いる
  • WORKDIR
    → cdみたいなイメージ
    ※ ディレクトリが存在しなくても勝手に作ってくれる
WORKDIR Dockerのパソコンの移動したいパス（絶対パス）

# 例
WORKDIR /workdir
WORKDIR /app
WORKDIR /workdir/front

# メモ
# 絶対パスなのを忘れないで！！

docker-compose.yml

  • build
    → どのパソコン（Dockerfile）を使うかを設定する
build: Dockerfileのパス（**直前のディレクトリまで**）

# 例
build: ./
build: ./app
build: ./app/docker
  • volumes
    → 自分のパソコンとDockerのパソコンの状態を同期できる
    ※ Dockerのパソコン内でした操作が自分のパソコンに反映される（逆も然り）
    ※ 今回はDockerのパソコンでNext.jsのディレクトリを作って自分のパソコンに反映させる！！
volumes:
  - 自分のパソコンのパス:Dockerのパソコンのパス（絶対パス）

# 例
volumes:
  - .:/workdir
volumes:
  - ./app:/app
volumes:
  - .:/workdir/front

# メモ
# Docker側は、絶対パスなのを忘れないで！！

docker-composeコマンド

※ docker-compose.ymlがある位置で実行してください

  • docker-compose build
    → Dockerのパソコンを作るコマンド
docker-compose build
  • docker-compose run パソコン名 /bin/bash
    → Dockerのパソコンに移動するコマンド
    ※ Ctrl + Dで自分のパソコンに戻れます
docker-compose run next-pc /bin/bash

Next.jsの作成コマンドを実行する

以下のコマンドを実行してDockerのパソコンに移動

$ docker-compose build
$ docker-compose run next-pc /bin/bash
[+] Creating 1/0
 ✔ Network next_default  Created                                                                                                      0.1s
root@ae95a5478287:/workdir#
# root@~みたいになれば成功です！！
# Ctrl + Dで自分のパソコンに戻れます

Dockerのパソコンに移動したら、以下のコマンドを実行

npx create-next-app アプリ名 --javascript --no-eslint --tailwind --src-dir --app --turbopack --import-alias "@/*"
# "アプリ名"は任意の名前（この記事ではnext-appにしています）

そうするとなんと！！next.jsのディレクトリが自分のパソコンにできたはず！！

まとめ

以下の6つだけで！！アプリケーションのディレクトリが作成できます
Dockerfile

  • FROM
  • WORKDIR

docker-compose.yml

  • build
  • volumes

docker-composeコマンド

  • docker-compose build
  • docker-compose run パソコン名 /bin/bash



アプリケーション起動編

完成例

  • Dockerfile
# ディレクトリ作成編
FROM node:22.5-slim
WORKDIR /workdir

# アプリケーション起動編
COPY . .
WORKDIR /workdir/next-app
RUN npm install
CMD ["npm", "run", "dev"]
EXPOSE 3000
  • docker-compose.yml
services:
  next-pc:
    # ディレクトリ作成編
    build: ./
    volumes:
      - .:/workdir
    # アプリケーション起動編
    ports:
      - 3000:3000

コードの解説

Dockerfile

  • COPY
    → 自分のパソコンからファイルやディレクトリをコピーできる
COPY 自分のパソコンのパス Dockerのパソコンのパス

# 例
COPY . .
COPY . ./app
COPY ./app ./app
  • RUN
    → Dockerのパソコンで実行したいコマンドを設定できる
RUN 実行したいコマンド

# 例
RUN npm install
RUN composer install
  • CMD
    → アプリ起動時に実行したいコマンドを設定できる
CMD アプリ起動時に実行したいコマンド（配列型式）

# 例
CMD ["npm", "run", "dev"]
# npm run dev
CMD ["php", "artisan", "serve", "--host", "0.0.0.0"]
# php artisan serve --host 0.0.0.0
  • EXPOSE
    → アプリのポートを解放する（Next.jsはデフォルトで3000番）
EXPOSE 解放するポート番号

# 例
EXPOSE 3000
EXPOSE 5000
EXPOSE 8000

docker-compose.yml

  • ports
    → 自分のパソコンのポートとDockerのポートを繋ぐ
ports:
  - 自分のパソコンのポート:Dockerfileのパソコンのポート

# 例
ports:
  - 3000:3000
ports:
  - 8000:8000
ports:
  - 5001:5000

docker-composeコマンド

※ docker-compose.ymlがある位置で実行してください

  • docker-compose up -d
    → アプリケーションの起動するコマンド
docker-compose up -d
  • docker-compose logs
    → Dockerのパソコンのログが見れる
    ※ エラーを確認するのに使う
    ※ upが成功しなかった時によく使う！！
docker-compose logs

Nextアプリケーションを起動する

以下コマンドを実行した後にhttp://localhost:3000にアクセスしてNextアプリケーションのトップページが表示されたら成功!!

docker-compose build
docker-compose up -d

まとめ

アプリケーションを起動する際は、以下の7つが追加されます！！
Dockerfile

  • COPY
  • RUN
  • CMD
  • EXPOSE

docker-compose.yml

  • ports

docker-composeコマンド

  • docker-compose up -d
  • docker-compose logs

Discussion