どうもこんちには、たくびー(@takubii)です。
最近、WindowsのWSL2から開発をよく行っています。
今回はDBをBaaSではなくコンテナを使った方法で構築したので、その備忘録として残しておきます。

WSL2上のUbuntuでNext.jsとMySQL環境を構築する手順

手順

1. WSL2上のUbuntuセットアップ

WSL2とUbuntuのインストールが完了している前提で進めます。

2. nvmのインストール

Node.jsのバージョン管理にはnvmを使用します。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

オプション: 環境変数の設定

必要に応じて、以下の内容を.bashrcに追加し、現在のシェルセッションに反映させます。

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

変更を反映させるために、以下のコマンドを実行します。

source ~/.bashrc

3. Node.jsのインストール

nvmを使用してNode.jsのLTSバージョンをインストールします。

nvm install --lts
nvm use --lts

4. プロジェクトディレクトリの作成とNext.jsのセットアップ

プロジェクトディレクトリを作成し、Next.jsのプロジェクトを初期化します。

mkdir ~/repos/my-next-app
cd ~/repos/my-next-app
npx create-next-app@latest .

5. Prismaのセットアップ

Prismaをインストールし、設定を行います。

npm install prisma
npx prisma init

6. .envファイルの作成

プロジェクトのルートディレクトリに.envファイルを作成し、データベースの接続情報を追加します。

MYSQL_ROOT_PASSWORD=rootpassword
MYSQL_USER=admin
MYSQL_PASSWORD=adminpassword
MYSQL_DATABASE=my_next_app_db

DATABASE_URL="mysql://${MYSQL_USER}:${MYSQL_PASSWORD}@localhost:3306/${MYSQL_DATABASE}"

7. MySQL初期化スクリプトの作成

プロジェクトディレクトリにinit.sqlファイルを作成し、ユーザーに権限を付与するSQLスクリプトを追加します。

CREATE USER IF NOT EXISTS 'admin'@'%' IDENTIFIED BY 'adminpassword';
GRANT ALL PRIVILEGES ON *.* TO 'admin'@'%' WITH GRANT OPTION;
FLUSH PRIVILEGES;

8. Docker Composeファイルの作成

プロジェクトディレクトリ内にdocker-compose.ymlファイルを作成します。

version: '3.9'

services:
  db:
    image: mysql:8
    ports:
      - '3306:3306'
    env_file:
      - .env
    volumes:
      - db-data:/var/lib/mysql
      - ./init.sql:/docker-entrypoint-initdb.d/init.sql

volumes:
  db-data:

9. Prismaの設定を更新

prisma/schema.prismaファイルを更新して、MySQLデータベースとの接続を設定します。

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

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

model User {
  id        String  @id     @default(cuid())
  email     String  @unique
  password  String
}

10. Dockerコンテナの起動

Docker Composeを使用してMySQLコンテナを起動します。初回起動時に初期化スクリプトが実行され、ユーザーに権限が付与されます。

docker-compose up -d

11. Prismaのマイグレーションと生成

Prismaを使用してデータベーススキーマをマイグレーションし、クライアントを生成します。

npx prisma migrate dev --name init

最終的なディレクトリ構成

.
├── README.md
├── app
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── docker-compose.yml
├── init.sql
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── prisma
│   └── schema.prisma
├── public
│   ├── next.svg
│   └── vercel.svg
├── tailwind.config.ts
└── tsconfig.json

4 directories, 17 files

まとめ

以下の手順で環境を設定します：

nvmのインストール:
- nvmをインストールし、必要に応じて環境変数を.bashrcに追加します。
- source ~/.bashrcを実行して反映させます。
Node.jsのインストール:
- nvmを使用してNode.jsのLTSバージョンをインストールします。
プロジェクトのセットアップ:
- プロジェクトディレクトリを作成し、Next.jsプロジェクトを初期化します。
Prismaのセットアップ:
- Prismaをインストールし、設定を行います。
.envファイルの作成:
- データベースの接続情報を記載し、DATABASE_URLを構成します。
MySQL初期化スクリプトの作成:
- ユーザーに権限を付与するSQLスクリプトを作成します。
Docker Composeの設定:
- Docker Composeファイルを作成し、MySQLコンテナを設定します。
Prismaの設定を更新:
- Prismaの設定ファイルを更新します。
Dockerコンテナの起動:
- Docker Composeを使用してMySQLコンテナを起動します。
Prismaのマイグレーションと生成:
- Prismaを使用してデータベーススキーマをマイグレーションし、クライアントを生成します。

これにより、WSL2上のUbuntu環境でNext.jsの開発を行い、MySQLとPrismaを使用してデータベースと連携する環境が整います。初期化スクリプトによってユーザー権限が自動的に設定されるため、手動の介入が不要になります。

WSL2のUbuntu環境でNext.jsとMySQLコンテナを構築する