Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@seiya-sugimoto(杉本 誠也)

Lovable で勤怠管理アプリを作ってから、DB を Supabase に移行するまでの記録

Posted at

「ノーコードでサクっと作った勤怠アプリを、ちゃんとした DB（Supabase）に載せ替えたい」
というところまで一気通貫でやった記録です。

  • UI: Lovable
  • ソース管理: GitHub
  • DB(初期): Lovable Cloud
  • DB(最終): Supabase(PostgreSQL)
  • 動作確認: ローカル npm run dev（Vite）

全体の流れ

  1. Lovable で勤怠管理アプリを新規作成
  2. 要件定義どおりに Cloud DB で動かしてみる
  3. GitHub と連携してソースを管理
  4. Supabase に新しい Project を作成
  5. Supabase 向けの .env を用意
  6. Supabase の SQL Editor で migration を流してスキーマ作成
  7. Lovable Cloud 側のデータを CSV で出して Supabase にインポート
  8. ローカルで npm run dev → Supabase 接続で動作確認
  9. Supabase Auth の URL / Email 設定を調整
  10. 自分のユーザーに admin 権限を付与 → 管理者ページの表示を確認

1. 勤怠管理アプリの要件定義（Lovable 側）

Lovable に渡した要件定義はざっくり以下。

機能要件（抜粋）

  • Google ログイン / メール＋パスワードログイン
  • 初回ログイン時オンボーディング
    • 氏名 / 社員番号 / 部署
  • 打刻
    • 出勤ボタン（1タップ）
    • 退勤ボタン（1タップ）
    • 当日のステータス表示（未出勤 / 出勤済 / 退勤済）
  • 勤怠ステータス
    • 遅刻 / 早退 / 休暇 / テレワーク / 残業
  • 個人向け画面
    • 日別一覧
    • 月次集計（勤務時間・残業時間）
    • 所定労働時間は 9:00〜17:30（7.5h）
  • 管理者向けダッシュボード
    • 全社員の一覧
    • 月次サマリー（遅刻回数・休暇回数など）
    • CSV エクスポート

データ構造（概念）

  • users / profiles / user_roles 的なユーザ関連
  • attendance 勤怠記録
  • 勤務時間・残業時間はトリガーで自動計算

これを Lovable に投げると、画面＆Cloud DB スキーマまで一式作ってくれる。

2. Lovable でアプリ作成 + 動作確認

ここは Lovable 側のウィザードに従って進めただけ。

  1. Lovable で新規プロジェクトを作成
  2. さっきの要件をプロンプトに貼る
  3. 自動生成された画面をいくつか修正
  4. 内蔵プレビューで Cloud DB を使ってログイン〜打刻まで動作確認

この時点では DB は Lovable Cloud のまま。

20251209_勤怠管理アプリ3.png

20251209_勤怠管理アプリ1.png

20251209_勤怠管理アプリ2.png

3. GitHub と連携してリポジトリ作成

Lovable の UI から GitHub 連携を有効化。

  1. 左メニュー → Integrations → GitHub
  2. GitHub の OAuth を許可
  3. Workspace と GitHub アカウントの紐付け
  4. プロジェクト側の設定で
    seiya-sugimoto/attendanceApp というリポジトリ名で接続

Lovable 側の GitHub パネルはこんな感じの状態になる：

  • seiya-sugimoto/attendanceApp と表示
  • View on GitHub ボタンでリポジトリを開ける
  • CLI 用に gh repo clone seiya-sugimoto/attendanceApp のコマンドが出る

これで ソースコードをローカルに clone できる状態 になった。

4. Supabase プロジェクトの作成

次に DB を Supabase に移す。

  1. https://supabase.com に GitHub アカウントで Sign in
  2. New organization（例: seiya's Org）
  3. New project を作成
    • Project name: attendanceApp
    • Database password: 強いパスワードを設定
    • Region: Asia-Pacific を選択（日本から近い）
  4. 数十秒待つと PostgreSQL インスタンスが立ち上がる

Project Settings → General から以下を確認しておく：

  • Project name
  • Project ID（あとで使うこともある）

5. Supabase 用の .env を用意する

GitHub からローカルに clone して開く：

gh repo clone seiya-sugimoto/attendanceApp
cd attendanceApp

Lovable が自動で .env を作ってくれている場合があるので、まず中身確認。
なければ自分で作る。

Supabase のダッシュボード → Project Settings → API から以下を取得：

  • Project URL（例: https://xxxx.supabase.co）
  • anon public key

.env には Vite 用のプレフィックス付きで書く（ここ重要）：

VITE_SUPABASE_URL=https://xxxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJI...

※ 私のプロジェクトではすでに .env が存在していたので、
中身だけ Supabase 用の値に書き換えた。

6. Supabase にスキーマを流し込む（migration 実行）

Lovable が生成したリポジトリには、
supabase/migrations/ ディレクトリがあり、SQL が何本か入っている。

例：

supabase/migrations/
  20241208_init.sql
  20241208_user_profiles_roles.sql
  20241208_attendance_tables.sql

これらを 古いファイルから順番に Supabase の SQL Editor で実行する。

手順

  1. Supabase ダッシュボード → 左メニュー SQL Editor
  2. 「New query」を開く
  3. 1本目の migration ファイルの中身をコピペ
  4. Run ボタンを押す
    • 成功すると Success. No rows returned と出る
      → テーブル・関数・トリガーが正常に作成された合図
  5. 2本目以降も同様に、昇順で 実行する

途中でこんなエラーが出たら：

ERROR: relation "attendance" already exists

→ そのテーブルはもう作られているので、その SQL はスキップして次へ。

実行後、Table Editor を開くと以下のようなテーブルが見えるはず：

  • attendance
  • attendance-lovablecloud（元DBからの一時テーブル）
  • profiles
  • user_roles
  • そのほか補助テーブル

これで Supabase 上に Lovable と同じスキーマが再現された。

7. Lovable Cloud → Supabase へデータをインポート

スキーマだけでは空の DB なので、
必要なら Lovable Cloud 側のデータを CSV で持ってきて Supabase に流す。

よくハマるポイント

Supabase の Table Editor で
New table から CSV をインポートしようとすると、
既に attendance テーブルがあるのでエラーになる。

ERROR: 42P07: relation "attendance" already exists

やるべきは「新規テーブルを作る」のではなく、既存テーブルにインポートすること。

正しい Import 手順

  1. Supabase → Table Editor
  2. 対象テーブル（例: attendance）をクリック
  3. 右上の Import data（CSV インポート）を選択
  4. Lovable Cloud からエクスポートした CSV を選ぶ
  5. カラム対応を確認して Import

同様に、必要なら profiles や user_roles も同じ手順で移行する。

8. ローカルで npm run dev して Supabase に繋がるか確認

ここまでで

  • .env に Supabase 情報
  • Supabase にテーブル・データあり

という状態になったので、ローカルでアプリを起動する。

npm install   # 初回だけ
npm run dev

出力例：

VITE v5.4.19  ready in 515 ms

  ➜  Local:   http://localhost:8080/
  ➜  Network: http://192.168.0.72:8080/

ブラウザで http://localhost:8080/ を開くと、
Lovable で作った勤怠管理アプリが Supabase バックエンドで動く。

9. Supabase Auth の設定（URL / Redirect）

最初ここでログインがうまくいかなかった。
原因は Supabase 側の URL 設定がデフォルトのまま だったこと。

デフォルトだと：

  • Site URL: http://localhost:3000
  • Redirect URLs: 空

となっており、アプリは http://localhost:8080 で動いているので不整合が起きる。

設定手順

Supabase → Authentication → URL Configuration

  • Site URL

    http://localhost:8080

  • Redirect URLs

    http://localhost:8080
http://localhost:8080/*
http://localhost:8080/auth/callback

「Save changes」を押して保存。

これで、
ログインフローで Supabase がユーザーをアプリに戻す先がきちんと定義される。

10. 「Email not confirmed」問題の解消

URL を直しても、ログイン時に右下にこんなエラーが出た。

Email not confirmed

Supabase はデフォルトで メールアドレスの確認（Email Confirmation）必須 になっている。

開発中の勤怠アプリでは、
そこまで厳密にしたくなかったので メール確認を OFF にした。

設定手順

  1. Supabase → Authentication → Providers → Email
    もしくは Policies / Settings のメール関連設定
  2. 「Email confirmation required」 系のチェックを OFF にする

また、すでに作ってしまったユーザーについては
SQL で強制的に確認済みにしておくこともできる：

update auth.users
set email_confirmed_at = now()
where email = 'sugimoto@sawada5681.jp';

いずれにせよ、
Email confirmation を OFF にしたらログインが通るようになった。

11. admin ロールを付与して管理者ページを開けるようにする

ログインに成功しても、最初は一般ユーザー扱いなので
管理者ページにはアクセスできない。

このアプリでは、権限は user_roles テーブルで管理されていた。

user_roles の構造例：

column type 説明
id uuid 主キー
user_id uuid auth.users.id
role text user or admin
created_at timestamptz 作成日時

Supabase の Table Editor から手動で admin に変更

  1. Supabase → Table Editor → user_roles
  2. 自分の user_id 行を確認
    • auth.users の id と紐づいている
  3. role カラムを admin に上書き保存

もしくは SQL でやるなら：

update public.user_roles
set role = 'admin'
where user_id = '（自分の user_id）';

これで再ログインすると、
管理者ページにアクセスできるようになる。

実際、
管理者ページに入れた時点で Supabase 移行はほぼ完了。

12. ここまででできたことの整理

  • Lovable で勤怠管理アプリを作成
  • GitHub 連携でソース管理
  • Supabase に新しい Project を用意
  • Lovable が生成した migration を使って Supabase にテーブル定義を構築
  • Lovable Cloud 側のデータを CSV 経由で Supabase にインポート
  • .env で Supabase の URL / ANON_KEY を設定
  • npm run dev で Supabase バックエンドのローカル動作確認
  • Supabase Auth の URL / Redirect / Email 設定を調整してログイン成功
  • user_roles テーブルで role=admin を付けて管理者画面を表示

13. この先やると良さそうなこと（メモ）

Qiita 記事としてはここまでで一段落だけど、
実運用を考えると次のあたりが拡張ポイントになりそう。

  • RLS(Row Level Security) のポリシーを調整
    • 一般ユーザー: 自分の attendance だけ見れる
    • 管理者: 全員分を見れる
  • 有給残数の管理カラム追加
  • 月次締め処理（集計テーブル or ビュー）
  • Supabase Functions / Edge Functions を使った集計バッチ
  • 本番デプロイ用の URL を Supabase Auth の Redirect に追加
  • .env の管理方法（GitHub 上での Secret 管理など）の整理

まとめ

Lovable で UI 〜画面遷移までを一気に作りつつ、
DB は Supabase に寄せていく、というハイブリッド構成はかなり良い手触りだった。

チューニングの肝はこの3つ

  1. migration を Supabase SQL Editor に順に流していくこと
  2. Auth の URL / Email 設定をちゃんと合わせること
  3. user_roles 等で権限を明示すること

ここをクリアすれば、
「ノーコードで作った試作品」を
「ちゃんとした Postgres バックエンドを持つアプリ」に
スムーズに昇格させられる。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?