SupabaseとResendで会員管理とメール送信ができる簡易SaaSを構築できるようになる

SupabaseはBaaS（Backend as a Service）と呼ばれるサービスです。データベース・認証・ストレージ・Edge Functionsなどのバックエンド機能をまとめて提供しています。

1. https://supabase.com にアクセスして「Continue with GitHub」でアカウント登録
2. ダッシュボードで「New project」をクリック
3. Name: my-saas-app、Database Password（強力なもの）、Region: Northeast Asia (Tokyo) を入力
4. 「Create new project」をクリック（初期化に1〜2分かかる）
5. 「Settings」→「API」からProject URLとAnon Keyをメモする

取得した値を .env ファイルに追記します。

VITE_SUPABASE_URL=https://xxxxxxxxxxxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhb...（Anon Keyをここに貼り付け）

▲ Supabase のテーブルエディタ。会員データを管理できる

Table Editorからprofilesテーブルを作成します。

テーブル作成時に「Enable Row Level Security (RLS)」を ON にします。次にRLSポリシーを追加します。

-- ポリシー1: 自分のプロフィールを読み取る
-- Policy name: Users can view own profile
-- Allowed operation: SELECT
auth.uid() = id

-- ポリシー2: 自分のプロフィールを更新する
-- Policy name: Users can update own profile
-- Allowed operation: UPDATE
auth.uid() = id

1. 「Authentication」→「Providers」→「Email」プロバイダーが ON になっていることを確認
2. Google AI Studioで以下のプロンプトを使ってサインアップ・サインインコンポーネントを生成する
3. 生成されたコードを src/components/Auth.tsx として保存する

以下の条件でReact + TypeScriptのコードを作成してください。

【要件】
- Supabase の認証機能を使ったサインアップとサインインコンポーネントを作成する
- @supabase/supabase-js を使用する
- supabaseClient は ./supabaseClient からインポートする
- サインアップ: メールアドレスとパスワードでアカウント作成
- サインイン: メールアドレスとパスワードでログイン
- 認証状態に応じて表示を切り替える
- エラーメッセージを日本語で表示する
- TailwindCSSでシンプルなスタイリング

【ファイル構成】
- src/components/Auth.tsx（認証フォームコンポーネント）

完全なコードを出力してください。

PS> npm install @supabase/supabase-js

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL as string
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY as string

if (!supabaseUrl || !supabaseAnonKey) {
  throw new Error('VITE_SUPABASE_URL と VITE_SUPABASE_ANON_KEY を .env に設定してください')
}

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

export type Profile = {
  id: string
  email: string
  name: string | null
  plan: 'free' | 'pro' | 'premium'
  role: 'user' | 'admin'
  created_at: string
}

主なCRUD操作

// SELECT: 自分のプロフィールを取得
const { data, error } = await supabase
  .from('profiles')
  .select('*')
  .eq('id', userId)
  .single()

// INSERT: プロフィールを新規作成
const { data, error } = await supabase
  .from('profiles')
  .insert({ id: userId, email, name, plan: 'free', role: 'user' })

// UPDATE: プランを更新
const { data, error } = await supabase
  .from('profiles')
  .update({ plan: 'pro' })
  .eq('id', userId)

まずSQL Editorでテスト用の管理者ユーザーのロールを変更します。

UPDATE profiles
SET role = 'admin'
WHERE email = 'あなたのメールアドレス@example.com';

PS> npm install react-router-dom

Google AI Studioで管理画面コンポーネントを生成します。

以下の条件でReact + TypeScriptの管理画面コンポーネントを作成してください。

【要件】
- React Router v6 を使用する
- /admin パスを管理者ロールのユーザーのみアクセスできるよう保護する
- Supabase の profiles テーブルから会員一覧を取得して表示する
- 検索機能: メールアドレスまたは名前で絞り込み
- フィルター機能: プラン（free/pro/premium）で絞り込み
- ページネーション: 1ページ10件表示
- 管理者でない場合は / にリダイレクト

【ファイル】
- src/components/AdminGuard.tsx
- src/pages/AdminDashboard.tsx
- src/pages/MemberList.tsx

const updateMemberPlan = async (
  memberId: string,
  newPlan: 'free' | 'pro' | 'premium'
) => {
  const { error } = await supabase
    .from('profiles')
    .update({ plan: newPlan })
    .eq('id', memberId)

  if (error) {
    console.error('プランの更新に失敗しました:', error.message)
    return false
  }
  return true
}

CSVエクスポート機能もGoogle AI Studioで生成します。UTF-8 BOM付きで出力することでExcelでも文字化けしません。

以下の要件でTypeScriptのCSVエクスポート関数を作成してください。
- Supabase の profiles テーブルのデータをCSVでダウンロードする
- ファイル名: members_YYYYMMDD.csv
- 文字コード: UTF-8 BOM付き（Excelで文字化けしないため）
- ヘッダー行: ID, メールアドレス, 名前, プラン, 登録日
- ブラウザのダウンロードダイアログを表示する

PS> npm install recharts

以下の要件でReact + TypeScript + rechartsを使ったダッシュボードを作成してください。

【グラフ1】月別登録者数推移（LineChart）- 過去6ヶ月
【グラフ2】プラン別内訳（PieChart）- free/pro/premium の人数割合
【表】月次収益シミュレーション: free=$0, pro=$9.99, premium=$29.99で計算
- recharts の ResponsiveContainer でレスポンシブ対応
- TailwindCSS でカード形式のレイアウト

1. Vercelダッシュボードでデプロイ済みプロジェクトを開く
2. 「Settings」→「Environment Variables」を開く
3. VITE_SUPABASE_URL と VITE_SUPABASE_ANON_KEY を追加する（Production, Preview, Development すべてに設定）
4. 「Redeploy」ボタンで再デプロイする
5. SupabaseダッシュボードのURL Configuration に Vercel ドメインを追加する

VITE_SUPABASE_URL      = https://xxxxxx.supabase.co
VITE_SUPABASE_ANON_KEY = eyJhb...（Anon Key）

Resendは開発者向けのメール送信APIサービスです。シンプルなAPIでHTMLメールを送信できます。無料枠は1日100通・月3,000通です。

1. https://resend.com にアクセスしてGitHubアカウントで登録
2. ダッシュボードの「API Keys」→「Create API Key」をクリック
3. Name: my-saas-app、Permission: Sending access で作成
4. 生成されたAPIキー（re_xxxxxx）をメモ（一度しか表示されない）
5. .envに追記する（VITE_プレフィックスを付けないこと）

RESEND_API_KEY=re_xxxxxx（取得したAPIキー）

PS> npm install resend

プロジェクトのルートに api フォルダを作成し、send-email.ts を作成します。

import { Resend } from 'resend'

const resend = new Resend(process.env.RESEND_API_KEY)

export const config = { runtime: 'edge' }

export default async function handler(request: Request): Promise<Response> {
  if (request.method !== 'POST') {
    return new Response('Method Not Allowed', { status: 405 })
  }

  const { to, subject, name, type, message } = await request.json()

  const { data, error } = await resend.emails.send({
    from: 'noreply@あなたのドメイン.com',  // テスト用: onboarding@resend.dev
    to: [to],
    subject: subject,
    html: generateEmailTemplate(type, name, message),
  })

  if (error) {
    return new Response(JSON.stringify({ error: error.message }), { status: 500 })
  }

  return new Response(JSON.stringify({ success: true, id: data?.id }), { status: 200 })
}

▲ Resend APIのテスト送信。{"success":true}が返ればメール送信成功

1. ウェルカムメール（会員登録時自動送信）

const handleSignUp = async (email: string, password: string, name: string) => {
  // 1. Supabase でアカウント作成
  const { data, error } = await supabase.auth.signUp({ email, password })
  if (error) throw error

  // 2. profiles テーブルにプロフィールを追加
  await supabase.from('profiles').insert({ id: data.user!.id, email, name, plan: 'free', role: 'user' })

  // 3. ウェルカムメールを送信
  await fetch('/api/send-email', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ to: email, subject: '【サービス名】ご登録ありがとうございます', name, type: 'welcome' })
  })
}

2. 一括メール送信（全会員へ）

import { Resend } from 'resend'
import { createClient } from '@supabase/supabase-js'

const resend = new Resend(process.env.RESEND_API_KEY)
const supabase = createClient(
  process.env.VITE_SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!  // Service Role Key（サーバーサイドのみ！）
)

// 全会員を取得 → 50件ずつ分割して送信（無料枠の制限対応）
const chunkSize = 50
for (let i = 0; i < emailBatch.length; i += chunkSize) {
  await resend.batch.send(emailBatch.slice(i, i + chunkSize))
}

全機能の動作テストチェックリスト

デプロイ手順

PS> git add .
PS> git commit -m "feat: SaaSアプリ完成 - Supabase認証・管理画面・Resendメール送信"
PS> git push origin main
→ Vercelに自動デプロイ開始

よくある本番環境エラー

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}