🚀 Docker + Next.js + Prisma + PostgreSQL で「健康の地図」開発環境を立ち上げた話

はじめに

こんにちは、Ken です。
ポートフォリオ用アプリとして「健康の地図」というサービスを作り始めました。
このサービスは 睡眠ログ・血液検査・体重などの健康データを可視化する ことを目指しています。

まずは 開発環境の構築 から。
この記事では「Docker Compose を使って Next.js + Prisma + PostgreSQL を立ち上げるまで」の手順をまとめます。
自分の復習用でもあり、就活ポートフォリオとしてもそのまま説明できる内容にしました。

---

プロジェクト構成

healthmap/
├─ apps/
│  └─ web/            # Next.js アプリ
│     ├─ app/         # App Router
│     ├─ prisma/      # Prisma schema, migrations, seed.ts
│     ├─ package.json / pnpm-lock.yaml
│     └─ Dockerfile   # web サービス用 Dockerfile
├─ docker-compose.yml  # 全体の起動定義
└─ README.md

---

Dockerfile（apps/web/Dockerfile）

FROM node:20-alpine
WORKDIR /app

COPY package.json pnpm-lock.yaml ./
RUN corepack enable \
  && corepack prepare pnpm@latest --activate \
  && pnpm i

EXPOSE 3000
CMD ["pnpm", "dev"]

---

docker-compose.yml

services:
  db:
    image: postgres:15-alpine
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      POSTGRES_DB: healthmap
    ports: ["5432:5432"]
    volumes: [db_data:/var/lib/postgresql/data]
    healthcheck:
      test: ["CMD", "pg_isready", "-U", "postgres"]
      interval: 5s
      timeout: 3s
      retries: 10

  mailpit:
    image: axllent/mailpit:latest
    ports: ["8025:8025", "1025:1025"]

  web:
    build:
      context: ./apps/web
      dockerfile: Dockerfile
    environment:
      DATABASE_URL: postgresql://postgres:postgres@db:5432/healthmap?schema=public
      NEXTAUTH_URL: http://localhost:3000
      NEXTAUTH_SECRET: please-change-me
      SMTP_HOST: mailpit
      SMTP_PORT: 1025
    depends_on:
      db:
        condition: service_healthy
    ports: ["3000:3000"]
    volumes:
      - ./apps/web:/app
      - web_node_modules:/app/node_modules
    command: >
      sh -lc "[ -d node_modules ] || pnpm install;
      if [ ! -d prisma/migrations ]; then npx prisma migrate dev --name init;
      else npx prisma migrate dev; fi; pnpm dev"

volumes:
  db_data:
  web_node_modules:

---

.dockerignore

node_modules
.next
dist
.git
Dockerfile*
docker-compose.yml
.env.local

---

セットアップ手順

0. 前提

• Docker / Docker Compose がインストール済み
• プロジェクトを clone 済み

1. 起動コマンド

docker compose up web

これだけで以下が自動で行われます：

• 依存インストール

  • node_modules が無ければ pnpm install
  • node_modules は名前付きボリュームに保存され、2回目以降は高速

• Prisma マイグレーション

  • 初回のみ npx prisma migrate dev --name init
  • 2回目以降は npx prisma migrate dev で差分適用

• Next.js 開発サーバ起動

  • http://localhost:3000 でアクセス可能

---

サービス一覧

• Next.js: http://localhost:3000
• PostgreSQL: localhost:5432
• Mailpit（メールテストUI）: http://localhost:8025

---

クリーンアップ

docker compose down -v

DB や node_modules のボリュームも含めて完全に削除します。

---

よくあるトラブルと対処

1. Command "prisma" not found

• 原因: node_modules が空
• 解決: 起動時に pnpm install が走るようになっているので、再度 docker compose up web

2. DB に繋がらない (P1001)

• 原因: DB 起動前に接続しようとしている / URL が localhost
• 解決: Compose の DATABASE_URL は @db:5432 で設定済み。depends_on により再試行されます。

3. 初回起動で止まる

• 原因: prisma migrate dev が対話でマイグレーション名を聞いて止まる
• 解決: 起動コマンドで --name init を条件付きで実行するように済み

---

なぜこの設計にしたか

• 再現性: docker compose up だけで誰でも動かせる
• DX（開発体験）: ソースは bind mount でホットリロード、node_modules はボリュームで永続化
• 自動化: 起動時に依存 → マイグレーション → dev の流れを一括で処理
• 安全性: .dockerignore で不要ファイルを除外

---

次のステップ

• Prisma スキーマを拡張（睡眠ログ・体重・血液検査など）
• seed.ts を作成し、サンプルデータを投入
• Next.js ダッシュボードでデータを可視化

→ ここまで進んだら ver 0.1 として一度デプロイ

---

まとめ

• Docker Compose で Next.js + Prisma + PostgreSQL を簡単に立ち上げられるようにした
• 誰でも docker compose up web で即座に開発環境を再現可能
• ポートフォリオとして「環境構築の再現性」を強調できる状態になった

次回は Prisma のスキーマ設計と UI 実装に進み、ver 0.1 としてデプロイ予定です 🚀