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

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


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

## 手順

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

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

### 2. nvmのインストール

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

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
```
:::note info
**オプション**: 環境変数の設定

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

```bash
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
```

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

```bash
source ~/.bashrc
```
:::

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

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

```bash
nvm install --lts
nvm use --lts
```

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

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

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

### 5. Prismaのセットアップ

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

```bash
npm install prisma
npx prisma init
```

### 6. .envファイルの作成

プロジェクトのルートディレクトリに`.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スクリプトを追加します。

```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`ファイルを作成します。

```yaml
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データベースとの接続を設定します。

```prisma
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コンテナを起動します。初回起動時に初期化スクリプトが実行され、ユーザーに権限が付与されます。

```bash
docker-compose up -d
```

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

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

```bash
npx prisma migrate dev --name init
```

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

```plaintext
.
├── 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
```

## まとめ

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

1. **nvmのインストール**:
    - nvmをインストールし、必要に応じて環境変数を`.bashrc`に追加します。
    - `source ~/.bashrc`を実行して反映させます。

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

3. **プロジェクトのセットアップ**:
    - プロジェクトディレクトリを作成し、Next.jsプロジェクトを初期化します。

4. **Prismaのセットアップ**:
    - Prismaをインストールし、設定を行います。

5. **.envファイルの作成**:
    - データベースの接続情報を記載し、`DATABASE_URL`を構成します。

6. **MySQL初期化スクリプトの作成**:
    - ユーザーに権限を付与するSQLスクリプトを作成します。

7. **Docker Composeの設定**:
    - Docker Composeファイルを作成し、MySQLコンテナを設定します。

8. **Prismaの設定を更新**:
    - Prismaの設定ファイルを更新します。

9. **Dockerコンテナの起動**:
    - Docker Composeを使用してMySQLコンテナを起動します。

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

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