フロントエンド・バックエンド共にNext.js(TypeScript) + Dockerで環境構築した方法

はじめに

CCNAの勉強を始めてコードを書く機会が減って来たので、リハビリがてら何かNext.jsで作ってみたいと思い、環境構築をしたところ、思った以上にうまく行かなかったので、備忘録として投稿します。

ディレクトリ構成

------------------------
|-- backend
|-- frontend
|-- docker-compose.yml
|-- DockerfileBack
|-- DockerfileFront

frontendとbackendにNext.jsのソースコードが入ってきます。Dockerfileはfrontend、backendディレクトリに入れてしまうと、Next.jsのcreate-next-appを実行するときにエラーが出てしまうので外に出しておきましょう。

ソースコード

FROM node:22-alpine
WORKDIR /backend

FROM node:22-alpine
WORKDIR /frontend

フロントエンド・バックエンド側のDockerfileに大きな違いはありません。

docker-compose.yml

version: "3.8"
services:
  frontend:
    build: 
      context: .
      dockerfile: DockerfileFront
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/frontend
    command: sh -c "npm run dev"
    stdin_open: true
  backend:
    build: 
      context: .
      dockerfile: DockerfileBack
    ports:
      - "3001:3001"
    volumes:
      - ./backend:/backend
    command: sh -c "PORT=3001 npm run dev"

Next.jsではデフォルトのポートに3000番を使用しており、フロント・バックエンド共にNext.jsを使用しているため、起動するときに被らないようにバックエンド側のポートを3001番に指定しています。

実行

docker compose run --rm backend sh -c 'npx create-next-app . --typescript'

docker compose run --rm frontend sh -c 'npx create-next-app . --typescript'

上記の二つのコードを実行してfrontend、backendディレクトリにNext.jsの環境を構築します。

最後に

簡単ですが、メモ書き程度に書きました。誰かの参考になれば幸いです。