個人でAIメディアを作る全体像 技術スタックと立ち上げの流れ
Astro + Vercel + Supabase + Claude Codeの組み合わせで、個人開発者が月数千円以下のコストでAIメディアサイトを作れる。技術選定の理由から公開までの流れを、このサイト自体の構築経験をもとに解説する。
12件の記事
Astro + Vercel + Supabase + Claude Codeの組み合わせで、個人開発者が月数千円以下のコストでAIメディアサイトを作れる。技術選定の理由から公開までの流れを、このサイト自体の構築経験をもとに解説する。
静的サイトの問い合わせフォームを、Supabase Edge Functions・Resendのメール送信・SlackのWebhookを使って実装する。サーバー不要・コストほぼゼロで動く問い合わせシステムの作り方を解説する。
JAMstackは静的サイト(Markup)にAPIとJavaScriptを組み合わせて動的機能を実現するアーキテクチャだ。Astro + Vercel + SupabaseのスタックでJAMstack的な設計をどう実現するかを解説する。
Vercel・Supabase・Claude Code・ドメインを組み合わせた個人開発の月額コストを、無料枠の範囲・有料化のタイミング・コスト削減の工夫を含めて整理した。月3,000〜5,000円で運営できる構成を解説する。
個人開発のメディアサイトに管理ダッシュボードを追加する。アクセスランキング・問い合わせ一覧・環境フラグ管理の3機能をSupabase + Astroで実装する設計と実際のコードを解説する。
Resendは開発者向けのメール送信APIで、無料プランで月3,000件まで送信できる。APIキーの取得・ドメイン設定・JavaScriptでのメール送信実装まで、個人開発に必要な手順を解説する。
Supabaseを使って静的サイトのアクセスデータを自前で計測する仕組みを作れば、Google Analyticsのトラッキングスクリプトなしにページビュー・人気記事・流入元を把握できる。設計と実装を解説する。
Supabase Authのメール+パスワード認証を使って、個人開発の管理ページを保護する実装方法を解説する。ログインフォーム・セッション管理・保護ページの作り方をAstroでのコード例とともに示す。
Supabase Edge FunctionsはDenoで動くサーバーサイドの関数で、APIキーを隠したバックエンド処理・外部API連携・データベースの管理操作に使える。セットアップから実装・デプロイまでを解説する。
SupabaseはPostgreSQLデータベースをAPIで扱えるBaaSで、個人開発に必要なデータベース・認証・ファイル保存を無料プランで始められる。アカウント作成からテーブル作成・データの読み書きまでの手順を解説する。
SupabaseのRLS(Row Level Security)を設定していないと、anon keyを使えば誰でもデータベースの全データを読み書きできる。RLSの仕組み・設定方法・よく使うポリシーパターンを実装コードで解説する。
静的サイトにページビューカウンターを実装するには、Supabaseのデータベースとクライアントサイドのリクエストを組み合わせる。Astro + Supabaseで実際に動くカウンターを作る手順を解説する。