Remixでド新規で作ったプロジェクトでPrismaを使ってSQLiteを使えるように設定を行う

## 〜宣伝〜

:::note info
個人開発でエンジニア専門マッチングサービスを開発しましたので、是非未経験からエンジニア目指している人！現役エンジニアで教えたい人！使ってみてください！

β版リリース記念キャンペーン中です！

10名様限定、抽選でお好きな技術本1冊プレゼント！
🎉当選者にはメッセージ差し上げます(送付の際に住所はお聞きしません)
詳しくはこちらから↓

https://x.com/dokupro01/status/1796837336145436846
:::
https://dokupro.dev/


## 概要

前回、下記の記事でRemixのプロジェクトをド新規で作ってみた。今回はそのプロジェクトでSQLiteを使えるように設定してみる。

https://qiita.com/miriwo/items/444dda7f3ef181d0f8d7

## 情報

今回のtodoアプリはCloudFlareでデプロイ予定なのでそのことも念頭において下記のように設定する。

| 項目 | 内容 | 備考 |
| --- | --- | --- |
| Remixのバージョン | 2.9.2 | latestでインストール<br>`npx remix --version`で確認 |
| ローカル環境時のDB | SQLite |  |
| デプロイ時のDB | CloudFlare D1 |  |
| ORM | Prisma |  |

ORMの選択肢は下記から選んでみた

- Prisma
- TypeORM
- Sequelize
- Objection.js

自分はPHP/Laravelを今までメインに使ってきたので似てるものが良かった、どうやらTypeORMがにてるらしいことが素人調査でわかった。
ただ「RemixといえばPrisma」みたいなところもある気がするし、公式ドキュメントにもPrismaを使ったDBからのデータロード的な例の記載があったのでPrismaを使うことにした。

https://remix.run/docs/en/main/route/loader

![CleanShot 2024-06-02 at 16.02.10@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/4a8b6de3-3d7a-c76f-97a4-46a525d8d697.png)

## 方法

1. 下記を実行してPrismaをインストール（Prismaインストール時に`--save-dev`はつけなかった。本番環境でもおそらく使うため。これによりpackage.jsonではdependenciesの方にprismaが入り本番でも使えるはず。間違えて`--save-dev`をつけてインストールしてしまったら、package.jsonのdevDependenciesの方のPrismaの行を削除し、今一度下記コマンドを実行すれば良い。）

    ```shell
    npm install prisma
    npm install @prisma/client
    ```

1. 下記を実行してPrismaの設定ファイルの初期化を実施

    ```shell
    npx prisma init
    ```

1. プロジェクトルート　にある.envのDATABASE_URLを下記のように記載変更（デプロイ環境ではこのURLをD1のエンドポイントのURLに設定する。）

    ```.env
    DATABASE_URL="file:./dev.db"
    ```

1. プロジェクトルート/prismaにあるschema.prismaのdatasource dbのprovidorの値を下記の様に記載変更

    ```schema.prisma
    // This is your Prisma schema file,
    // learn more about it in the docs: https://pris.ly/d/prisma-schema
    
    // Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
    // Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
    
    generator client {
      provider = "prisma-client-js"
    }
    
    datasource db {
      provider = "sqlite" // ココを編集
      url      = env("DATABASE_URL")
    }

    // userテーブルの追加のために下記を追記
    model users {
      id    Int     @id @default(autoincrement())
      email String  @unique
      name  String
    }
    ```

1. `npm run dev`を実行しているターミナルに移動し、「cmd」 + 「c」で一時的にローカルサーバーを停止、その後再度`npm run dev`を実行してローカルサーバーをスタート
1. 下記を実行してPrisma Clientを作成（schema.prismaにテーブルの定義が記載されていないと下記はエラーになる模様）

    ```shell
    npx prisma generate
    ```

    - 実行結果の例

        ```
        $ npx prisma generate
        Environment variables loaded from .env
        Prisma schema loaded from prisma/schema.prisma
        
        ✔ Generated Prisma Client (v5.14.0) to ./node_modules/@prisma/client in 63ms
        
        Start using Prisma Client in Node.js (See: https://pris.ly/d/client)
        
        import { PrismaClient } from '@prisma/client'
        const prisma = new PrismaClient()
        
        or start using Prisma Client at the edge (See: https://pris.ly/d/accelerate)
        
        import { PrismaClient } from '@prisma/client/edge'
        const prisma = new PrismaClient()
        
        
        See other ways of importing Prisma Client: http://pris.ly/d/importing-client
        ```

1. 下記を実行してマイグレーションを実行

    ```shell
    npx prisma migrate dev
    ```

1. マイグレーション名を聞かれるので、マイグレーションの内容を入力、今回はusersテーブルの作成なので「create_user_table」と入力（命名規則は別途考えておいたほうが良さそう。）

    ```shell
    ? Enter a name for the new migration: › create_users_table
    ```

1. プロジェクトディレクトリの直下にprismaというディレクトリができて、更にその中にmigrationsというディレクトリが作成され、日付 + マイグレーション名のディレクトリの中に実際に実行されたSQLが記載されたファイルがある。

ここまでエラーなくできていたらSQLiteは使えるようになっている。

## 付録

作成したDBにTable Plusなどでアクセスしたい場合はこちら↓

https://qiita.com/miriwo/items/169e31f492a58a907f6a