Docker + Next.js + TypeScript + Prisma + MySQL環境構築

はじめに

Docker + Next.js + TypeScript + Prisma + MySQLで環境構築したので、備忘録

バージョン
node : v22.13.0
イメージのバージョンは適宜変更して下さい。

ディレクトリ構成

.
├── docker-compose.yml
├── src
└── web
    └── Dockerfile

Dockerfile

FROM node

WORKDIR /app

# 先に依存関係を解決することでキャッシュでnpm installが毎回走らないようになる。
# コード全体COPYのあとでは、通常ソースコードに変更があった際もキャッシュを利用せず、npm installが走ってしまう。
# つまり、package*.json以外の変更でnpm installを走らせないようにするため、ビルド時間が短縮される。
COPY src/package*.json ./ 

RUN npm install

COPY src .

docker-compose.yml

docker-compose.yml

services:
  db: #サービス名
    # build: Dockerfileからビルドする際の相対パスを設定
    image: mysql:5.7 # イメージ名:タグ
    volumes: # データをコンテナの外に保存するための設定
      - ./mysql/data:/var/lib/mysql #　ホストディレクトリ : コンテナ内ディレクトリ
    environment: # 環境変数
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: sample_db
      MYSQL_USER: user
      MYSQL_PASSWORD: password
    ports: 
      - "3306:3306" # ホストマシンのポート番号:コンテナのポート番号
    # depends_on: サービス間の依存関係を定義
    # command: サービスコンテナが起動したときに実行するコマンド

  web:
    build: 
      context: . # 親ディレクトリをコンテキストに
      dockerfile: ./web/Dockerfile # webフォルダ内のDockerfileを使用
    ports:
      - "3000:3000"
    command: sh -c "npm run dev" # npm run dev 実行
    volumes:
      - ./src:/app
      - /app/node_modules 

ルートディレクトリでプロジェクトを作成

$ npx create-next-app@latest
Need to install the following packages:
create-next-app@15.2.3
Ok to proceed? (y) y

✔ What is your project named? … src
✔ 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 your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
✔ What import alias would you like configured? … @/*

コンテナ起動

$ docker compose up -d

コンテナ内でprismaインストール

$ docker exec -it [コンテナ名] bash

prismaインストール

app# npm install prisma --save-dev

prisma初期化

app# npx prisma init

src内にenvファイルを作成

.env

DATABASE_URL="mysql://root:password@db:3306/sample_db"

src\prisma\schema.prisma

src\prisma\schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
}

npx prisma db push

これでUserテーブルが作成されます。

$ npx prisma db push

あとは良しなにしてください。