Dockerを使ってnext.jsのローカル環境構築

前提
ゴールの確認
開発環境を構築する
おわりに

前提

前回のDockerを使ってRailsのローカル環境構築の続きの状態から作成していきますが、nextjsの環境のみを利用したいという場合でも概ねこちらの手順通りで作成できると思います。

dockerを使う理由についてもDockerを使ってRailsのローカル環境構築にて紹介済みなのでこちらでは説明を省きます。

ゴールの確認

ここでは最終的にルートディレクトリ下にfrontendというディレクトリを作成し、その中にnextjsのアプリケーションを構築していきます。

docker compose up --build を実行し、nextjsの初期画面がlocalhost:8080で見られるようになることを目指します。

最終的なコードは私のgithubのリポジトリにあげていますので、ご確認ください

開発環境を構築する

docker-compose.ymlの準備

docker-compose.ymlファイルは前回で既にに作成されているものがあると思います。こちらに追記していきましょう。

  ...

  backend:
    tty: true
    stdin_open: true
    depends_on:
      - db
    build:
      context: ./backend/
      dockerfile: Dockerfile
    ports:
      - 3000:3000
    volumes:
      - ./backend:/app
    command: rails server -b 0.0.0.0

  frontend:
    build:
      context: ./frontend/
      dockerfile: Dockerfile
    volumes:
      - ./frontend:/app
    command: "npm run dev"
    ports:
      - "8080:3000"

volumes:
  mysql-db:
    driver: local

新規に追加しているのはfrontend:の部分だけです。

portは8080を3000番にアタッチしています。nextjsはデフォルトでは3000番ポートを使って起動しますが、このままだとrailsとポート番号が衝突してしまうので8080を開けるようにします

create next appする

docker-compose.ymlファイルができたところでnextjsのアプリケーションの初期化をしていきます。

docker compose run -w /app --rm frontend npx create-next-app@latest

frontendのサービスだけを起動しつつ（docker compose run … frontend）
コンテナ内のappディレクトリにて(-w /app)
npx create-next-app@latestでnextjsの初期化を行い、
終わったらコンテナを削除する(–rm)

という内容のコマンドです。

このコマンドが実行されると途中でいろいろ聞かれると思います。
この回答の内容で作成されるnextjsのアプリケーションの構成が変わってきます
ここでは次のように回答していきます。

create-next-app@14.2.3
Ok to proceed? (y) y
✔ What is your project named? … frontend
✔ Would you like to use TypeScript? … No / Yes⭕️
✔ Would you like to use ESLint? … No / Yes⭕️
✔ Would you like to use Tailwind CSS? … No / Yes⭕️
✔ Would you like to use src/ directory? … No / Yes⭕️
✔ Would you like to use App Router? (recommended) … No / Yes⭕️
✔ Would you like to customize the default import alias (@/*)? … No⭕️ / Yes

うまくいくとnextjsを動作させるためのファイルがたくさん作成されると思います。

ただし、frontend/frontendの下に作成されてしまったので、frontend直下にアプリが入るように手で調整します。

Dockerfileの準備

frontendディレクトリの下にDockerfileを作成します

FROM node:20.13.1
WORKDIR /app

nodeのバージョンは20.13.1にしました。これは現時点(2024/05)での最新の安定版です。
最新安定版の確認はnode.jsの公式ページから行うようにしてください

docker composeで起動する

docker compose up --build を実行しましょう。

localhost:8080でnextjsの初期画面が表示されれば成功です。

おわりに

前回の記事と合わせて作成されている場合、docker compose up –buildでrailsのアプリケーションも起動されたかと思います。

一つのコマンドで開発に必要な環境が同時に立ち上がるので、セットアップが非常に楽になります！

環境を落とすときは起動しているプロセスのターミナルでctrl + cを押してあげると落ちます。

再度立ち上げるときはdocker compose upのみで十分です（イメージも削除している場合は–buildもほしい）

Dockerを使ってNext.jsのローカル環境構築

前提