📓

Nest + Next.js + PostgreSQL アーキテクチャを構築    

に公開
Docker
Next.js
nest
tech

Docker-Compose.yml

version: '3.8'

services:
  # PostgreSQL Database
  postgres:
    image: postgres:16-alpine
    container_name: postgres-db
    environment:
      POSTGRES_USER: ${DB_USER:-postgres}
      POSTGRES_PASSWORD: ${DB_PASSWORD:-postgres}
      POSTGRES_DB: ${DB_NAME:-nest_next_app}
    ports:
      - "${DB_PORT:-5432}:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data
    networks:
      - app-network
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U ${DB_USER:-postgres}"]
      interval: 10s
      timeout: 5s
      retries: 5

  # Nest.js Backend
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    container_name: nest-backend
    environment:
      NODE_ENV: development
      DATABASE_URL: postgresql://${DB_USER:-postgres}:${DB_PASSWORD:-postgres}@postgres:5432/${DB_NAME:-nest_next_app}?schema=public
      PORT: 3001
      FRONTEND_URL: http://localhost:3000
    ports:
      - "3001:3001"
    depends_on:
      postgres:
        condition: service_healthy
    volumes:
      - ./backend/src:/app/src
      - ./backend/prisma:/app/prisma
      - /app/node_modules
    networks:
      - app-network
    command: npm run start:dev

  # React Frontend
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    container_name: react-frontend
    ports:
      - "3000:3000"
    depends_on:
      - backend
    volumes:
      - ./frontend/app:/app/app
      - ./frontend/src:/app/src
      - /app/node_modules
    networks:
      - app-network
    environment:
      NEXT_PUBLIC_API_URL: http://localhost:3001
    command: npm run dev

volumes:
  postgres_data:

networks:
  app-network:
    driver: bridge

PostgreSQL データベースサービス

イメージ: postgres:16-alpine - PostgreSQL 16 の軽量版
コンテナ名: postgres-db - ホスト名として使用（バックエンドから postgres:5432 でアクセス）

environment:
  POSTGRES_USER: ${DB_USER:-postgres}
  POSTGRES_PASSWORD: ${DB_PASSWORD:-postgres}
  POSTGRES_DB: ${DB_NAME:-nest_next_app}

POSTGRES_USER: DB のユーザー名（デフォルト: postgres）
POSTGRES_PASSWORD: DB のパスワード（デフォルト: postgres）
POSTGRES_DB: 作成する初期データベース名（デフォルト: nest_next_app）

ポート設定

ports:
  - "${DB_PORT:-5432}:5432"
ports:  - "${DB_PORT:-5432}:5432"

ホストの 5432 ポート → コンテナ内の 5432 ポートにマッピング
ホストからも直接アクセス可能

NestJS バックエンドサービス

backend:
  build:
    context: ./backend
    dockerfile: Dockerfile
  container_name: nest-backend

./backend ディレクトリの Dockerfile をビルド
環境変数設定

environment:
  NODE_ENV: development
  DATABASE_URL: postgresql://${DB_USER:-postgres}:${DB_PASSWORD:-postgres}@postgres:5432/${DB_NAME:-nest_next_app}?schema=public
  PORT: 3001
  FRONTEND_URL: http://localhost:3000
environment:  NODE_ENV: development  DATABASE_URL: postgresql://${DB_USER:-postgres}:${DB_PASSWORD:-postgres}@postgres:5432/${DB_NAME:-nest_next_app}?schema=public  PORT: 3001  FRONTEND_URL: http://localhost:3000

NODE_ENV: development - 開発モード
DATABASE_URL: Prisma が使用するデータベース接続文字列
postgres はコンテナ内ホスト名（docker-compose で自動解決）
PORT: バックエンドが起動するポート
FRONTEND_URL: CORS 設定用フロントエンド URL

ボリューム設定

volumes:
  - ./backend/src:/app/src              # ソースコードをマウント（ホットリロード）
  - ./backend/prisma:/app/prisma        # Prisma スキーマをマウント
  - /app/node_modules                   # node_modules は名前なしボリューム（コンテナ内のみ）
volumes:  - ./backend/src:/app/src              # ソースコードをマウント（ホットリロード）  - ./backend/prisma:/app/prisma        # Prisma スキーマをマウント  - /app/node_modules                   # node_modules は名前なしボリューム（コンテナ内のみ）

最後の /app/node_modules は匿名ボリュームで、ホストの node_modules と競合しないようにする

Next.js フロントエンドサービス

frontend:
  build:
    context: ./frontend
    dockerfile: Dockerfile
  container_name: react-frontend
frontend:  build:    context: ./frontend    dockerfile: Dockerfile  container_name: react-frontend

./frontend ディレクトリの Dockerfile をビルド

ボリューム設定

volumes:
  - ./frontend/app:/app/app              # Next.js app ディレクトリ
  - ./frontend/src:/app/src              # src ディレクトリ
  - /app/node_modules                    # node_modules は分離
volumes:  - ./frontend/app:/app/app              # Next.js app ディレクトリ  - ./frontend/src:/app/src              # src ディレクトリ  - /app/node_modules                    # node_modules は分離

環境変数設定

environment:
  NEXT_PUBLIC_API_URL: http://localhost:3001
environment:  NEXT_PUBLIC_API_URL: http://localhost:3001
NEXT_PUBLIC_ プリフィックス: ブラウザから見える環境変数
フロントエンドが http://localhost:3001 でバックエンド API にアクセス

ネットワーク設定

networks:
  app-network:
    driver: bridge
networks:  app-network:    driver: bridge
app-network: 3つのサービスが通信するための Docker ネットワーク
bridge ドライバ: ホストとコンテナ間の通信を可能にする
コンテナ内では以下の通信が可能：
backend → postgres:5432 （データベースアクセス）
frontend → backend:3001 （バックエンド API アクセス）

通信フロー図

ブラウザ
  ↓ (http://localhost:3000)
Next.js Frontend (react-frontend:3000)
  ↓ (NEXT_PUBLIC_API_URL: http://localhost:3001)
NestJS Backend (nest-backend:3001)
  ↓ (DATABASE_URL: postgresql://... @postgres:5432)
PostgreSQL Database (postgres-db:5432)
ブラウザ  ↓ (http://localhost:3000)Next.js Frontend (react-frontend:3000)  ↓ (NEXT_PUBLIC_API_URL: http://localhost:3001)NestJS Backend (nest-backend:3001)  ↓ (DATABASE_URL: postgresql://... @postgres:5432)PostgreSQL Database (postgres-db:5432)

Discussion