Zenn
Closed13

YelpCampをモダンな技術で置き換える

Prisma
Tailwind CSS
Remix
PlanetScale
おたきおたき

はじめに

Remixでなにかを開発してみたいと思ったのがきっかけ。
下記のUdemy講座を進めていて、実際にアプリケーションを作ってWeb開発の基礎を学べた。
しかし、比較的レガシーな技術を取り扱っていたのが気になったので、モダン技術に移行してみると面白いのではないか？と思ったので力試しとして取り組む。

https://www.udemy.com/course/the-web-developer-bootcamp-2021-japan/

おたきおたき

方針・技術選定(仮)

  • Remix（フレームワーク）→ ✅
  • Shadcn/ui（スタイリング）→ ✅
  • Remix Auth（認証）→ ✅
  • Zod（バリデーション）→ ✅
  • Cloudinary（画像アップロード用のストレージ）→ ✅
  • Prisma（ORM）→ ✅
  • PlanetScale（データベース）→ ✅
  • Koyeb（デプロイ）→ ✅
おたきおたき

Prisma設定

  • Prismaを使って、Mongooseのスキーマを置き換える
schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

model HotSpring {
  id          String   @id @default(uuid())
  title       String
  description String
  price       Int
  location    String
  url         String
  filename    String
  Author      User     @relation(fields: [authorId], references: [id])
  authorId    String
  reviews     Review[]
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

model Review {
  id          String     @id @default(uuid())
  body        String
  rating      Int
  HotSpring   HotSpring? @relation(fields: [hotSpringId], references: [id])
  hotSpringId String?
  createdAt   DateTime   @default(now())
  updatedAt   DateTime   @updatedAt
}

model User {
  id        String      @id @default(uuid())
  email     String      @unique
  username  String
  salt      String
  hash      String
  HotSpring HotSpring[]
}
  • PlanetScaleが外部キー制約をサポートしたので採用してみる

https://qiita.com/kensiiwasaki/items/93202a7a79155d8e12d2

https://www.jacobparis.com/content/remix-prisma

おたきおたき

動的なレーティング機能をRemixのFormに乗せるには？

  • 下記のようなフォームがあった場合、サーバー側にレーティング情報を渡す方法について考える
  • サーバー側に送信するデータをuseState onChangeで動的に管理するのはRemixの流儀から背くのではないか？
おたきおたき

Remixでファイルアップロード機能をつくる

やりたいこと

  • 温泉の画像ファイルをアップロードさせる
  • 画像用のストレージにはCloudinaryを使う
  • 複数ファイルを同時にアップロード可能にする

下記スクラップに実践したことを記載
https://zenn.dev/otaki0413/scraps/7d1190b507f5e8

おたきおたき

Cloudinaryから画像を削除する機能をつくる

やりたいこと

  • 画像を識別するIDのようなものを使って、Cloudinaryから削除する
  • 複数ファイルを同時に削除できればしたい

現状

HotSpringImageテーブルに各画像のURLは保存してあるが、画像を識別するIDやファイル名などが格納できていない状態。

Cloudinaryから画像削除するやり方を調べる

この辺が参考になりそうかも？
https://cloudinary.com/documentation/image_upload_api_reference#destroy
https://cloudinary.com/documentation/delete_assets
https://support.cloudinary.com/hc/en-us/articles/203465641-How-can-I-delete-an-image-via-the-API-Programmable-Media

destroyメソッドに画像のpublic_idを渡すとできるっぽい

cloudinary.v2.uploader.destroy(public_id, options).then(callback);

けどpublic_idが画像の識別子らしいが取得方法がよくわからないので、調べる。

https://dev.classmethod.jp/articles/cloudinary-public-id-and-api-options/

おたきおたき

データベースの移行 No.1

背景

背景として、現在アプリのDBとしてPlanetScaleを使用しているが、4月でホビープランが廃止される。
DB移行が必須のため、その手順を記載する。
https://planetscale.com/blog/planetscale-forever

移行先のDBは？

移行先のDBとしては、Koyeb上のPostgresデータベースを使用する。
現在プレビュー版のため、いずれ有料課金となる可能性はあるかもしれない。。

データベースについては下記に詳細が記載されている
https://www.koyeb.com/docs/databases

データベースの作成手順

まずはダッシュボード上から「Create Database Service」をクリック。

下記5つの入力項目があるので設定後、「Create Database Service」をクリック。

  • Name: Koyebのデータベース名。大文字だとエラーになるので小文字。
  • リージョン：フランクフルト、ワシントンDC、シンガポールから選択
  • エンジン：Postgres14,15,16から選択
  • ロール：DB管理用のデフォルトのユーザー名。
  • インスタンスタイプ：Freeを選択する。

データベース作成後は設定画面に遷移する。DBへの接続情報が記載されている

ここまででDB作成できたので、次はPlanetScaleからのデータの移行を進める

このスクラップは28日前にクローズされました