Zenn
🐳

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

2024/05/24に公開
Docker
MySQL
Next.js
Prisma
WSL 2
tech

どうもこんちには、たくびーです。
最近、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

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

まとめ

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

  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を使用してデータベースと連携する環境が整います。初期化スクリプトによってユーザー権限が自動的に設定されるため、手動の介入が不要になります。

Discussion