Zenn
Open5

vueの色々

Docker
Vue.js
Prisma
pandanosepandanose

dockerでyarnインストール

# docker desktop内のexecで
yarn add {パッケージ}
pandanosepandanose

prismaのデータベース追加手順

1.schema.prismaにテーブル記述

注意：リレーションで追加した際に、自動的にもう片方に反映されるが、イニシャル大文字になるので、小文字に直す。

2.テストデータがほしい場合、seedに設定

seder/index.tsにファイルをdefaultで定義する
seederはテーブル名＋seeder.tsファイルを書く

3.マイグレーションファイル作成し、マイグレート実行

docker compose exec app yarn prisma migrate dev
pandanosepandanose

prismaでのポリモーフィック定義方法

https://stackoverflow.com/questions/69224864/polymorphism-in-prisma-schema-best-practices

model Photo {
  id Int @id @default(autoincrement())

  likes Like[] @relation("PhotoLike")
}

model Video {
  id Int @id @default(autoincrement())

  likes Like[] @relation("VideoLike")
}

enum LikableType {
  Photo
  Video
}

model Like {
  id Int @id @default(autoincrement())

  Photo Photo? @relation("PhotoLike", fields: [likableId], references: [id], map: "photo_likableId")
  Video Video? @relation("VideoLike", fields: [likableId], references: [id], map: "video_likableId")

  likableId   Int
  likableType LikableType
}
pandanosepandanose

sendgridでメール受信する方法

sendgridのParse Webhookという機能を使用して擬似的にメールを受信できる。（メールボックスなどが提供されているわけではない。あくまで受信した内容をHTTP(s)に変換して指定したURLにPOSTするもの）

公式ドキュメント

メールを受信する
Inbound Email Parse Webhook
パラメータについて（英語）
webhookのデバック

手順

  1. SendGrid側の設定（主にpostしたいドメインとpostを受信するアプリ側のURLを指定する）
  2. DNSレコードの登録（postしたいドメインをMXタイプで設定）
  3. アプリ側で受信時のAPI処理を設定

ローカルで検証する

アプリ側のURLがlocalhostだとpost検証できないため、ngrokツールなどを使用して、検証する必要がある。

公式ドキュメント：webhook検証について

以下、ngrokで検証する際の手順。

  1. ローカルにてアプリを起動。（例：ポート3000番「http://localhost:3000」を使用）
  2. ngrokを起動。（同じポート番号で起動する）
ngrok 3000
  1. ngrokで発行されたURLをsendgridに登録。