開発備忘録
ローカル（デバイス）で開発物構築したあとデプロイするときの手順
※バックエンドのサーバーをAWSにするかHF(Private Space)にするかはシステムの仕様で決める。単純なAPIコールですむならHF。
①バックエンドディレクトリとフロントエンドディレクトリそれぞれに.gitignore設置
以下のようなプロンプトで事前に整備するのも良し。
このバックエンドを Hugging Face private Space にデプロイしたいです。
Space に載せやすい構成へ整理してください。
やってほしいこと:
1. Hugging Face Spaces で動く前提で必要ファイルを確認
2. requirements.txt を整理
3. 環境変数に分離すべき値を洗い出して .env.example を作成
4. 起動エントリポイントを明確化
5. .gitignore を整備
6. デプロイ時に必要な README.md を整備
7. GitHub Actions から HF Space に同期できる前提で、必要な workflow の雛形も作成
制約:
- 既存のローカル動作を壊さない
- 変更理由を説明
- Hugging Face Space で問題になりそうな点があれば指摘このフロントエンドは現在 Firebase Authentication 前提の実装が残っている可能性があります。
Supabase Auth に移行したいので、認証関連コードを調査して、移行計画を作ってください。
やってほしいこと:
1. Firebase Auth を使っている箇所を一覧化
2. Supabase Auth に置き換えるべき箇所を整理
3. signUp / signIn / signOut / 現在ユーザー取得 / セッション監視 / 保護ルート の対応方針を提案
4. 実装差分を最小にした移行案を出す
5. 可能なら実際に Supabase Auth ベースへ置換コードを作成
前提:
- Supabase の URL と anon key は環境変数から読む
- メールアドレス + パスワードログインをまず使いたい
- 既存 UI はできるだけ維持したい
②それぞれのローカルをGit管理にする
git init③GitHubに2つのリポジトリを作り、その後、各ローカルディレクトリから pushする
git remote add origin https://github.com/xxx.git
git add .
git commit -m "initial commit"
git branch -M main
git push -u origin main④Firebaseでプロジェクトを作成し、Hostingを有効化する
プロジェクトを作成→Hostingとサーバーレス→Hosting→始める
『Firebase Hosting の設定』では書かれてある手順は実行せず（これはFirebase CLI を使った “手動デプロイ用の手順”であり、今回はGitHub自動デプロイにしたいので）『次へ』でよし
そのあとはターミナルからコマンド実行
npm install -g firebase-tools
firebase login
firebase init hosting
# Use existing project
# プロジェクト選択
# public directory → dist
# single page app → Yes
firebase init hosting:github
# 質問に答える。だいたい標準の回答（npm run build, dist...）かYesでいい。最後のAgentだけnoでよし。
git add .
git commit -m "setup firebase hosting"
git push
githubのフロントエンドのリポジトリでデプロイが成功していて、FirebaseのHostingの画面にアプリのURL表示されてたらOK
これでフロントエンドのgithub→Firebase自動デプロイ設定完了。
⑤バックエンドとHFをつなげる
HFでprivate spaceを作成（Docker, private）し、アクセストークンを生成。アクセストークンは、バックエンドのgithubリポジトリのsecretにHF_TOKENとして追加。※HF_REPO_ID（Hugging Face の Space の URL と同じ ユーザー名/スペース名）をvariablesに追加するのも必要だった
その後、コード側で
・バックエンドが HF Space で動く構成に整理
・GitHub Actions で main push 時に Space に同期するように.github/workflows/sync-to-hf-space.ymlを作成
（プロンプトでOK）
pushして成功すればOK
git actionに必要な環境変数以外の環境変数はHFのsecretで設定するのも忘れずに。
⑥supabaseのAuth設定（ローカルでシステムと接続済みの場合）
supabaseの対象のプロジェクトにいき、Authentication→URL configuratuinでwebアプリのURLを設定する。
次にSign in/ ProvidersでEmailをON
次に以下のようなプロンプトを使用し、フロントにAuth実装
このフロントエンドに Supabase Auth を新規導入してください。
前提:
- Supabase の DB 接続はすでに存在する可能性があります
- 既存の Supabase client 初期化処理があれば流用し、なければ追加してください
- 環境変数名は既存実装に合わせてください。もし未実装なら VITE_SUPABASE_URL と公開キー用の env を追加してください
- 既存UIはできるだけ壊さないでください
要件:
- メールアドレス + パスワードでサインアップ
- メールアドレス + パスワードでログイン
- ログアウト
- セッション保持
- リロード後もログイン状態を復元
- 未ログイン時は保護ページにアクセスできない
やってほしいこと:
1. 既存の Supabase client 初期化処理の有無を確認し、あれば流用、なければ追加
2. Supabase Auth を使うための状態管理を追加（AuthProvider または同等の構成）
3. Login ページを追加
4. Signup ページを追加
5. ProtectedRoute を追加
6. 未ログイン時は保護ページにアクセスできないようにする
7. ログイン状態を監視し、リロード後も復元されるようにする
8. README に必要な env と設定手順を追記
9. npm run build が通る状態まで仕上げる
制約:
- service role key は使わない
- 既存の DB 利用コードを壊さない
- 変更したファイルごとに内容を要約してください
- まずはメールアドレス + パスワード認証のみを実装してくださいフロントの実装ができたら、
SupabaseからURLとanon key取得
.env.localに入れる
GitHub Secretsにも追加
これでOK
