はじめに
今話題のSupabaseとpayload。色々なものに応用していきたいのでチュートリアル動画を元に記事を書いています。
この記事では、PayloadとSupabaseを設定して、Next.jsアプリの強力なバックエンドを構築する方法を紹介します。
なぜSupabaseなのか
- Payloadはデータベースとファイルストレージが必要
- Supabaseが提供するもの
- Postgres Database, MongoDB
- S3 Storage buckets
- 個人開発や少人数プロジェクトには十分な無料プラン: 500MB Database, 1GB storage
Payloadの利点
Payloadは、同カテゴリーで最も成長しているCMSだと思います。(2024/5/31)
- Next.jsネイティブ：PayloadはNext.jsアプリにシームレスに統合されます。Vercelでワンクリックデプロイも可能です。
- オープンソース：完全にオープンソースで、セルフホスティングやマネージドホスティングが可能です。
- TypeScript：完全にTypeScriptで構築されており、UIを介さずにコードで設定を行えます。
- 高度な拡張性：カスタムフック、エンドポイントなどの完全なコントロールが可能で、CMSとしてだけでなく、あらゆるアプリケーションの包括的なバックエンドとして拡張できます。
- スタンドアロン：他のフレームワークと一緒に使う場合でも、スタンドアロンアプリとして使用できます。
手順
- payloadの導入
- Supabaseのアカウント作成
- envの'DATABASE_URI'をsupabaseから取得したものに置き換え
- collectionsの中でhogehogeする
Payloadの導入
Payloadを展開。
npx create-payload-app@beta
SupabaseとPayloadの統合
https://supabase.com にてアカウント作成。
作成し終えたらcreate new projectで新しくプロジェクト作成してパスワードとPostgre Database_URIのリンクを取得してパスワードの部分を置き換えて保存。
設定し終えたら npm run dev コマンド打ってlocalhostに/adminつけるとこのページに遷移する。
Supabaseは強力なPostgresデータベースソリューションとS3ストレージを提供しており、これをPayload設定に組み込みます。
Collections
Collectionsに.jsで追加していくことができる。以下はデフォルトで入っているUsers。
Payload上ではユーザーの追加などできることの幅を広げていける。
import type { CollectionConfig } from 'payload/types'
export const Users: CollectionConfig = {
slug: 'users',
admin: {
useAsTitle: 'email',
},
auth: true,
fields: [
// Email added by default
// Add more fields as needed
],
}
これによりユーザーの追加ができるようになる。
Supabase上のデータベース
S3の設定
PayloadプロジェクトでS3ストレージを設定するためのコード：
s3Storage({
collections: {
media: {
prefix: 'media',
}
},
bucket: process.env.S3_BUCKET,
config: {
forcePathStyle: true,
credentials: {
accessKeyId: process.env.S3_ACCESS_KEY_ID,
secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
},
region: process.env.S3_REGION,
endpoint: process.env.S3_ENDPOINT,
},
}),
環境変数
S3バケットの詳細と認証情報を格納する。
S3_BUCKET=
S3_ACCESS_KEY_ID=
S3_SECRET_ACCESS_KEY=
S3_REGION=
S3_ENDPOINT=
問題
- ローカルとプロダクション環境の分離の重要性:
ローカル開発環境でプロダクションデータベースを使用すると、スキーマ変更の影響がプロダクションデータに及び、データが消失する危険性があルため、ローカル環境では必ずローカルデータベースを使用するか、テスト用の別のプロジェクトを作成推奨。 - スキーマの変更によるデータ削除:
Payloadの設定ファイルでコレクションをコメントアウトすると、Payloadはそのコレクションのスキーマをデータベースから削除しようとすることにより、そのコレクションのすべてのデータが失われるらしい。
まとめ
PayloadとSupabaseを使ってNext.jsアプリのバックエンドを強化する方法を解説しています。
Payload公式から出ているチュートリアル動画を参考にして自分で実際に試してみました。これを応用して個人開発に生かしていきたい。
参考
How to set up Payload with Supabase