Vibe Coding × Supabase で認証 + DB 込みのアプリを1日で動かす実装ガイド【時間割つき・2026年版】

「Supabase を使えば認証 + DB のアプリが1日で作れる、と聞いた。でも実際にやってみると 9:00 に始めて23時を回っても動かない」

これは AI Maker Lab 編集部に届く相談で、二番目に多いテーマです。本記事は Lovable × Supabase × Cloudflare Pages で「ログインつき ToDo アプリ」を1日（8時間）で公開する時間割 を、9:00 から20:00 まで1時間単位で示します。

本記事は AI Maker Lab 編集部（運営者 + AI 編集部の協働運用）が Lovable と Supabase を実際に運用して、本番公開までを複数回再現した一次経験 をもとに執筆しています。料金・機能は 2026-05 時点の公式情報です。

目標：1日（8時間）で「ログインつき ToDo アプリ」公開まで

休憩・ランチ込みで1日8時間枠の現実的なスケジュールです。フルタイム集中なら6時間で終わります。

9:00 — Lovable で雛形生成（Supabase 統合デフォルト）

やること

1. Lovable にログイン → 新規プロジェクト作成
2. 以下のプロンプトを入力：

ログインつき ToDo アプリを作って。
- メール + パスワードのサインアップ・ログイン
- Google OAuth ログインも追加
- ログイン後、自分の ToDo 一覧が見える
- ToDo の追加・完了・削除ができる
- ToDo は Supabase の tasks テーブルに保存
- RLS で「ユーザーは自分のタスクだけ見える」設定
- shadcn/ui ベース、ダークモード対応
- カラーは emerald-to-teal

3. Lovable が Supabase プロジェクトを自動作成 + テーブル + RLS ポリシーまで生成
4. プレビューで動作確認

編集部の所見

Lovable の真価は 「Supabase 統合がデフォルト」 な点。プロンプトに「Supabase に保存」と書くだけで、テーブル作成・RLS ポリシー・認証フックまで自動で構築されます。

v0 や Bolt にも認証はありますが、**「DB 込みで1日で動かす」**用途では Lovable のほうが手数が少なく済む構成です（編集部の実装比較による）。

11:00 — Supabase Dashboard で DB スキーマ確認・修正

やること

1. Supabase Dashboard を開く
2. プロジェクトを選択 → Table Editor へ
3. tasks テーブルのカラムを確認：
   • id uuid primary key default gen_random_uuid()
   • user_id uuid references auth.users(id) not null
   • title text not null
   • is_done boolean default false
   • created_at timestamptz default now()
4. 必要なら手動でカラム追加・修正

Supabase Dashboard の使い方

• Table Editor：GUI でカラム追加・編集・行データ確認
• SQL Editor：SQL を直接実行（複雑な変更はこちらが速い）
• Authentication：ユーザー一覧・OAuth 設定
• Policies：RLS ポリシーの確認・編集

編集部の所見

Lovable が自動生成する DB スキーマは 「動くけど最適ではない」 ことが多いです。編集部は11:00 のフェーズで 必ず手動レビューして、足りないカラム（updated_at、priority、deleted_at など）を追加します。後で追加するより、この段階で入れておくほうが100倍ラクです。

13:00 — 認証フロー（メール / Google OAuth）の動作確認

やること

1. メール認証：
   • サインアップ → 確認メールが届く（Supabase の SMTP デフォルト or Resend 連携）
   • メールのリンクをクリック → ログイン状態に
2. Google OAuth：
   • Supabase Dashboard → Authentication → Providers → Google を有効化
   • Google Cloud Console で OAuth クライアント ID を作成
   • Redirect URI に Supabase の URL を登録
3. 動作確認：
   • サインアップ → ログイン → ログアウト → 再ログインまで通す

Google OAuth のセットアップ手順

1. Google Cloud Console で新規プロジェクト
2. APIとサービス > 認証情報 > OAuth クライアント ID を作成
3. 承認済みのリダイレクト URI に https://<your-project>.supabase.co/auth/v1/callback を追加
4. クライアント ID とクライアントシークレットを Supabase の Provider 設定に貼り付け

編集部の所見

Google OAuth は Redirect URI の正確一致が必須。末尾のスラッシュ・サブドメインの違いで動かないので、Supabase の callback URL を コピペで貼るのが安全です。

14:00 — Row Level Security (RLS) 設定

やること

1. Supabase Dashboard → Authentication → Policies へ
2. tasks テーブルの RLS が 有効 であることを確認
3. ポリシーが以下のとおりであることを確認：

-- SELECT
create policy "Users can read own tasks"
  on tasks for select
  using (auth.uid() = user_id);

-- INSERT
create policy "Users can insert own tasks"
  on tasks for insert
  with check (auth.uid() = user_id);

-- UPDATE
create policy "Users can update own tasks"
  on tasks for update
  using (auth.uid() = user_id);

-- DELETE
create policy "Users can delete own tasks"
  on tasks for delete
  using (auth.uid() = user_id);

4. 検証：別アカウントを作って、お互いのデータが見えないことを確認

編集部の所見

16:00 — Cloudflare Pages へデプロイ

やること

1. Lovable のプロジェクトを GitHub にエクスポート（Lovable の「Export to GitHub」機能）
2. Cloudflare Dashboard → Pages → 「Create a project」
3. GitHub リポジトリと接続
4. Build settings：
   • Framework preset：Next.js (or Vite)
   • Build command：npm run build
   • Build output：dist or .next
5. Environment variables に Supabase の URL / Anon Key を設定
6. Deploy

Vercel との比較

編集部のメディアサイト群（ココラボ / キャリアラウンジ / 本サイト）はすべて Cloudflare Pages で運用しています。

編集部の所見

Lovable の出力は Vite ベースが多く、Cloudflare Pages との相性が良いです。Next.js を選んだ場合は Vercel のほうがハマりにくいです。

18:00 — 本番ドメイン接続

やること

1. お名前.com などで取得済みのドメインを使用
2. Cloudflare Pages の Custom domains にドメインを追加
3. ネームサーバーを Cloudflare に切替 or CNAME レコードを設定
4. SSL 証明書が自動発行されるのを待つ（5〜15分）
5. https://yourdomain.com で動作確認

ドメインまだ取得していない場合

• お名前.com：国内最大手・初年度割安
• mixhost：レンタルサーバー込みのお得セットあり

詳しくは 独自ドメイン取得ガイド と 個人開発者向けホスティング選定ガイド を参照してください。

編集部の所見

ドメイン取得から SSL 発行まで、最短で30分・最長で2時間かかります。18:00 開始だと「20:00 公開告知に間に合わないリスク」があるので、ドメインは 前日までに取得しておくのが理想です。

20:00 — 公開告知

やること

1. X（Twitter）で告知：
   • スクリーンショット3枚 + 1行説明 + URL
   • ハッシュタグ：#個人開発 #Vibe Coding #Supabase
2. 個人ブログ / Zenn / Qiita に開発記：
   • 1日でどう作ったか、ハマったポイントを記事化（SEO 流入の起点）
3. Product Hunt 投稿準備（任意）：
   • タグライン・タグ・動画を用意して翌週投稿

編集部の所見

「完成度70%で公開」が編集部のモットーです。残り30%は公開後にフィードバックを浴びてから直すのが正解。「もう少し直してから」と思って公開しないのが、Vibe Coding 時代の最大の罠です。

トラブルシュート集

CORS エラー

症状：ブラウザのコンソールに「CORS policy: No ‘Access-Control-Allow-Origin’ header」

原因：Supabase の URL Configuration で許可ドメインに本番ドメインが入っていない

対策：Supabase Dashboard → Authentication → URL Configuration → Site URL と Redirect URLs に本番ドメインを追加

RLS で全データが見える / 見えない

症状：ログイン後にデータが見えない、もしくは他人のデータまで見える

原因：RLS ポリシーの条件が間違っている（auth.uid() ではなく auth.email() を使っているなど）

対策：14:00 のフェーズで紹介した SQL を SQL Editor で実行し直す

Cloudflare Pages の Edge Functions エラー

症状：「Error: The functions ‘node_modules/…’ aren’t supported on Edge Runtime」

原因：Lovable が出力したコードに Node.js 専用 API が混ざっている

対策：問題のコードを Cloudflare Pages Functions（Workers）形式に書き直すか、Vercel への切替を検討。Claude Code に「このコードを Cloudflare Pages Functions 用に書き換えて」と依頼するのが最短

Google OAuth が動かない

症状：ログインボタンを押したらエラーページ

原因：Redirect URI の不一致

対策：Google Cloud Console と Supabase の両方で 完全に同じ URL が登録されているか確認。末尾のスラッシュにも注意

サインアップ確認メールが届かない

症状：サインアップ後の確認メールが届かない

原因：Supabase の SMTP デフォルトはレート制限が厳しい（時間あたり数通）

対策：Resend や SendGrid などの SMTP を連携する。本番運用では必須

FAQ

Q1. プログラミング未経験でも1日で公開できますか？

Lovable のプロンプト操作だけなら可能ですが、トラブル発生時は基礎知識が必要です。RLS の挙動・OAuth の設定・ドメインの CNAME など、最低限の Web 開発の地図が頭に入っていると、ハマったときの復旧速度が変わります。

Q2. Supabase の無料枠で本番運用できますか？

個人開発のレベルなら無料枠で十分です。Database 500MB / Auth 50,000 MAU / Storage 1GB / Edge Functions 500K invocations が無料枠。これを超えるトラフィックが出てきたら Pro プラン（$25/月）への移行を検討してください。

Q3. Lovable で出力したコードは自由に編集できますか？

GitHub にエクスポートすれば完全に自由です。エクスポート後は Cursor / Claude Code でカスタマイズできます。Lovable に戻る必要もありません。

Q4. Cloudflare Pages と Vercel のどちらを選べばよいですか？

商用無料・帯域無制限を取るなら Cloudflare Pages、Next.js を本格的に使うなら Vercel です。Lovable の出力が Vite ベースなら Cloudflare Pages、Next.js ベースなら Vercel が無難です。

Q5. RLS の検証はどうやれば確実ですか？

別アカウント（別ブラウザのプライベートウィンドウ）で2人分のユーザーを作るのが最も確実です。お互いのデータが見えないこと、自分のデータだけが見えること、を両方検証してください。

まとめ

Lovable × Supabase × Cloudflare Pages の組み合わせで、ログインつきアプリを1日で公開できます。AI Maker Lab 編集部は本時間割を複数回再現して、毎回20:00 までに公開ボタンを押せることを確認しています。

Lovable を試す（無料枠あり） →

v0 を試す（無料枠あり） →

Bolt を試す（無料枠あり） →

Claude Code を試す →

お名前.com でドメインを取得 →

関連記事

• Vibe Coding 完全ガイド 2026 — AI 時代の個人開発入門
• Vibe Coding でランディングページを30分で作る実装パターン10 — LP テンプレ集
• Vibe Coding で SaaS MVP を1週間で動かすロードマップ — 1週間版の本格ロードマップ
• v0 vs Lovable vs Bolt：Vibe Coding 3大ツール比較 — UI 生成ツール横並び比較
• Claude Code セットアップから1ヶ月運用まで — Lovable の次のステップ
• 個人開発者向けホスティング選定ガイド — Cloudflare Pages の詳細
• 独自ドメイン取得ガイド 2026 — ドメイン選び

情報の一次性について

本記事の時間割は AI Maker Lab 編集部（運営者 + AI 編集部）が Lovable × Supabase × Cloudflare Pages の組み合わせで実際に複数回アプリを公開した一次経験 をもとに整理しています。料金・機能は 2026-05 時点の各サービス公式情報です。実装時の所要時間は読者のスキル・案件複雑度・トラブル発生有無によって変動します。

Amazon で関連書籍・ガジェットを探す

本記事のテーマに関連する書籍は Amazon でも購入できます。

• Supabase 本を探す →
• PostgreSQL 本を探す →
• Cloudflare 本を探す →
• Vibe Coding 本を探す →

※ AI Maker Lab は Amazon アソシエイト・プログラムの参加サイトとして、商品のリンク経由のご購入から紹介料を受け取ります（PR）。掲載内容そのものは公平な視点で執筆しています。