前の記事ではRemixのローカル環境をdocker-composeで作成しました。

今回はその環境を使ってMySQLを導入してみたいと思います。

Remixの環境がない方は、下の記事を参考にローカル環境を作ってください。

docker-composeでRemixの環境を構築する方法まとめ

MySQL内のデータの取得方法を知りたい方はこちらの記事を参照してください。MySQLからデータを取得し画面に表示させる方法を解説しています。

RemixとPrismaでMySQLのデータをブラウザで表示させる方法を解説する

この記事でやらないこと

• Remixの環境構築
• MySQLの詳細な説明
• MySQLのデータ取得

この記事でやること

1. Prismaをインストールする
2. データソースにMySQLを使うよう設定する
3. テーブルスキーマを書く
4. docker-composeにMySQLを追加する
5. .envファイルにデータベースの情報を設定する
6. スキーママイグレーションを実行する

1. Prismaをインストールする

PrismaはNodeで使えるORMです。

まずはPrismaをRemixプロジェクトにインストールします。

$ docker-compose exec remix npm install prisma
added 7 packages, and audited 799 packages in 13s

247 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

package.jsonにprismaが入っていたらOKです 👍 今回はバージョン5.11.0を使います。

2. データソースにMySQLを使うよう設定する

Prismaをインストール後、どのデータベースを使うかを指定する必要があります。下記のコマンドでMySQLを指定します。

$ docker-compose exec remix npx prisma init --datasource-provider mysql
✔ Your Prisma schema was created at prisma/schema.prisma
  You can now open it in your favorite editor.

warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.

Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started
2. Run prisma db pull to turn your database schema into a Prisma schema.
3. Run prisma generate to generate the Prisma Client. You can then start querying your database.

More information in our documentation:
https://pris.ly/d/getting-started

これでOKです。

すると、prisma/schema.prismaというファイルが作成されます。ここにテーブルスキーマを書いていくことで、テーブルマイグレーションを行うことができます。

3. テーブルスキーマを書く

作成されたprisma/schema.prismaに適当にスキーマを書いてみましょう！Remixのページ遷移について解説した以下の記事でpostsというページを作ったので、postsテーブルを作ってみます。

Remixのページ遷移を解説する

model Post {
  id        String     @id @default(cuid())
  title     String
  content   String
}

4. docker-composeにMySQLを追加する

前の記事ではMySQLを導入していなかったので、ここでdocker-compose.yamlを編集しMySQLを導入します。

version: "3"
services:
  remix:
    build: .
    ports:
      - 5173:5173
    volumes:
      - .:/app
    command: /bin/sh -c "cd /app; npm run dev;"
    depends_on:
      - mysql
    env_file:
      - .env
  mysql:
    image: mysql:8.3.0
    restart: always
    platform: linux/amd64
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: db
      MYSQL_USER: user
      MYSQL_USER_PASSWORD: password
      TZ: 'Asia/Tokyo'
      MYSQL_ROOT_HOST: "%"
    ports:
      - 3306:3306
    tty: true
    command: mysqld --explicit_defaults_for_timestamp=true

5. .envファイルにデータベース情報を設定する

ここで、.envファイルのデータベース情報を設定します。上のdocker-compose.yamlの内容に合わせることに留意してください。

DATABASE_URL="mysql://root:password@mysql:3306/db"
# mysql://ユーザ名:パスワード@ホスト名:ポート番号/データベース名となっています

これで準備OK！マイグレーションを実行していましょう！

6. スキーママイグレーションを実行する

以下のコマンドでスキーママイグレーションを実行し、prisma/schema.prismaファイルに定義したPostモデルからpostsテーブルを作成します。

$ docker-compose exec remix npx prisma migrate dev --name init

Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": MySQL database "db" at "mysql:3306"

Applying migration `20240323051001_init`

The following migration(s) have been created and applied from new schema changes:

migrations/
  └─ 20240323051001_init/
    └─ migration.sql

Your database is now in sync with your schema.

Running generate... (Use --skip-generate to skip the generators)

added 1 package, and audited 800 packages in 7s

247 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

✔ Generated Prisma Client (v5.11.0) to ./node_modules/@prisma/client in 737ms

マイグレーションファイルができたので確認してみます。

-- CreateTable
CREATE TABLE `Post` (
    `id` VARCHAR(191) NOT NULL,
    `title` VARCHAR(191) NOT NULL,
    `content` VARCHAR(191) NOT NULL,

    PRIMARY KEY (`id`)
) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

先ほど定義したPostモデルクラスの内容が反映されていますね。素晴らしい✨

MySQLの中身を確認してみます。確認すると、すでにPostテーブルが作成されています✨

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| db                 |
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
5 rows in set (0.05 sec)

mysql> use db;
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Database changed
mysql> show tables;
+--------------------+
| Tables_in_db       |
+--------------------+
| Post               |
| _prisma_migrations |
+--------------------+
2 rows in set (0.01 sec)

mysql> DESC Post;
+---------+--------------+------+-----+---------+-------+
| Field   | Type         | Null | Key | Default | Extra |
+---------+--------------+------+-----+---------+-------+
| id      | varchar(191) | NO   | PRI | NULL    |       |
| title   | varchar(191) | NO   |     | NULL    |       |
| content | varchar(191) | NO   |     | NULL    |       |
+---------+--------------+------+-----+---------+-------+
3 rows in set (0.03 sec)

今回の記事ではここまでにします。

MySQLのデータを表示させたいという方は次の記事を参照してください。MySQLからデータを取得し画面に表示させる方法を解説しています。

RemixとPrismaでMySQLのデータをブラウザで表示させる方法を解説する