Remix に Prisma と PostgreSQL を導入する
目的
Remix を使用したフルスタックアプリケーションを開発します。
この記事では、 Prisma の初期設定と、 Docker コンテナを使用した PostgreSQL サーバを設定します。
環境
| 環境 | バージョン |
|---|---|
| Node.js | 20.11.1 |
| Yarn | 4.1.1 |
| Remix | 2.8.1 |
| Vite | 5.1.0 |
| PostgreSQL | 15.x |
| Prisma CLI | 5.11.0 |
DB サーバを設定
概要
開発するアプリケーションは Relational Database ( RDB ) の使用を既に決めており、 PostgreSQL を選定しました。
ここでは開発環境用に PostgreSQL サーバを準備します。
バージョンは v16 までリリースしていますが、Prisma のサポート観点から v15 を導入します。
また、導入や起動が容易になるため、Docker を使用します。
作業
Docker Compose 設定ファイルを生成します。
touch ./docker-compose.yml
docker-compose.yml ファイルに以下の通り記述します。
version: '3.9'
services:
db:
image: postgres:15-alpine
restart: always
environment:
- POSTGRES_PASSWORD=password
- POSTGRES_DB=sample_development
ports:
- '54320:5432'
volumes:
- db_data:/var/lib/postgresql/data
volumes:
db_data:
driver: local
コンテナを起動します。
docker compose up -d
以下のコマンドで起動確認できたら完了です。
docker compose ps
NAME IMAGE COMMAND SERVICE CREATED STATUS PORTS
remix_fullstack_blog-db-1 postgres:15-alpine "docker-entrypoint.s…" db 45 minutes ago Up 45 minutes 0.0.0.0:54320->5432/tcp
もしも、コンテナを停止する場合は、以下のコマンドを使用してください。
# コンテナを停止
docker compose stop
# コンテナを削除
docker compose down
Prisma 初期設定
概要
これから開発にあたり RDB の操作を簡略化するため、 ORM を導入します。
TypeScript プロジェクトにおける ORM は、以下の選択肢が考えられます。
私は TypeScript のプロジェクトやライブラリの知見が少ないため、Web に情報が多い Prisma を選択しました。
作業
Prisma CLI を PC にインストールします。
npx prisma
Prisma の初期設定コマンドを実行します。
npx prisma init
以下2つのファイルが生成されたことを確認します。
prisma/schema.prisma
.env
.env は以下の記述に置換します。
また、.env はバージョン管理されないよう .gitignore に設定してください。
DATABASE_URL="postgresql://postgres:password@localhost:54320/sample_development"
余談として、 DATABASE_URL の設定を補足します。
| 各項目 | 設定値の説明 |
|---|---|
| postgresql:// | 固定です。 |
| postgres:password | データベースユーザ名とパスワードを : で結合します。 |
| localhost | ホスト名です。ローカル環境なので localhost を設定します。 |
| 54320 | データベースサーバが実行しているポートです。docker-compose.yml の設定値です。 |
| sample_development | 今回作成するデータベース名です。 |
まとめ
実装コードは以下 PR の通りです。
Discussion