セツゾク

Hayato Shimada Portfolio & Blog

Site cover image

🪣 Next.js + PostgreSQL + PrismaのDocker環境構築

概要

現在Google Cloudを利用した”engage”というCRMクラウドサービスを実装中です。

一次リリース状況なので、アプリケーション自体は既にVercelで公開済みですが、機能リリースの為、ローカルでの開発環境が必要になりました。

この記事では端的に構成を示します。

Next.js + Prismaのディレクトリ構成

engage/
├── app/                    # Next.jsのアプリケーションコード
│   ├── api/               # APIルート
│   ├── dashboard/         # ダッシュボード関連のページ
│   └── providers/         # プロバイダーコンポーネント
├── components/            # 共通コンポーネント
│   ├── ui/               # UIコンポーネント
│   └── analytics/        # 分析関連コンポーネント
├── lib/                   # ユーティリティ関数
├── prisma/               # Prismaスキーマとマイグレーション
└── public/               # 静的ファイル

Next.jsはApp Routerでの開発になります。

Docker関連ファイルはプロジェクトのルートディレクトリに配置します。

Dockerfile

# ベースイメージをDebianベースのnode:18.18.0-slimに指定
FROM node:18.18.0-slim

# 作業ディレクトリを設定
WORKDIR /app

# パッケージリストを更新し、必要なビルドツールをインストール
RUN apt-get update && apt-get install -y --no-install-recommends \
    g++ \
    make \
    python3 \
    && rm -rf /var/lib/apt/lists/*

# 依存関係のファイルを先にコピーしてキャッシュを有効活用
COPY package*.json ./
COPY prisma ./prisma

# 依存関係をインストール
RUN npm install

# アプリケーションの全ファイルをコピー
COPY . .

# Prisma Clientを生成
RUN npx prisma generate

# 開発サーバーを起動
CMD ["npm", "run", "dev"]

docker-compose.yml

services:
  app:
    tty: true
    networks:
      - engage-network
    build:
      context: .
    ports:
      - "3000:3000"
      - "5555:5555" # デバッグ用ポート
    volumes:
      - .:/app
      - /app/node_modules
    env_file:
      - ./.env.development
    depends_on:
      db:
        condition: service_started

  db:
    image: postgres:15
    hostname: db
    env_file:
      - ./.env.development
    ports:
      - "5432:5432"
    networks:
      - engage-network
    environment:
      - TZ=Asia/Tokyo
      - POSTGRES_DB=db
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
      - PGDATA=/var/lib/postgresql/data/pgdata
    volumes:
      - db_data:/var/lib/postgresql/data
      - ./sql:/docker-entrypoint-initdb.d

networks:
  engage-network:
    driver: bridge
volumes:
  db_data:

開発環境立上げ手順

/prisma/seed.tsを設定しておくと、dbに初期値が反映できて便利です。

// /prisma/seed.ts
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

async function main() {
  const organization = await prisma.organization.upsert({
    where: {
      id: 1
    },
    update: {
      name: 'デフォルト組織',
      updatedAt: new Date(),
    },
    create: {
      id: 1,
      name: 'デフォルト組織',
      createdAt: new Date(),
      updatedAt: new Date(),
    },
  })
  
main()
  .catch((e) => {
    console.error(e)
    process.exit(1)
  })
  .finally(async () => {
    await prisma.$disconnect()
  }) 

シード値を設定したら、コンテナを立ち上げます。

# コンテナのビルドと起動
docker compose up --build
# コンテナの停止
ctrl + C

別ターミナルを立ち上げて、コンテナの中に入ります。

# 別ターミナルでコンテナに入る
docker container exec -it engage-app-1 sh
# マイグレーションの実行
npx prisma migrate deploy
# シードデータの投入
npx prisma db seed
# データベースの確認
npx prisma studio

まとめ

初めてDocker環境を自分で構築しましたが、ネットの情報だとdockerのコマンドが違っていたりするので四苦八苦しました。

2025/06/18現在の環境に応じた構成になりますので、ご参考までに。