GitHub・Vercel・Supabaseの違いと使い方を解説

Webアプリを無料で公開したいけど、3つのツールの役割が分からない、という経験はありませんか？このガイドでは、世界中の約100万人の開発者が使うGitHub、Next.js最適化のデプロイ基盤Vercel、PostgreSQL採用のバックエンドSupabaseの関係と、実際の構築手順を詳しく解説します。読み終わったあなたは、3つのツールを連携させてWebアプリを0から本番公開できるレベルになります。

3ツールの役割を30秒で理解する

GitHub・Vercel・Supabaseは、Webアプリのコード管理・自動公開・データ保存の3層を分担しています。これら3つが揃うことで、初心者でもフルスタックなWebアプリを無料で構築できる環境が整います。

まずこの構成で始めましょう。Next.js + Supabase + Vercelの組み合わせが、2026年の個人開発・スタートアップで最も採用例が多い「モダンWebスタック」です。

3ツールの連携イメージ～コードから公開まで

``` 🗄️ Supabase → 💻 Frontend → 🐙 GitHub → ▲ Vercel → 🌐 完成 データ設計 → Next.js/React → コード管理 → 自動デプロイ → Webアプリ公開 DB・認証・API準備 → UIコンポーネント → git pushで保存 → Pushを検知 → 世界中からアクセス可能 ```

この流れが、個人開発からスタートアップまで、最も効率的な開発ワークフローです。

GitHub：コード管理・共有の基盤

世界中に約100万人の開発者がいます。GitHubはコードの版管理・バックアップ・協力開発を可能にするプラットフォームです。Vercelやその他ツールも、GitHubのリポジトリを監視して自動アクション（デプロイなど）を実行する連携基盤として機能します。

GitHub無料プランで使える機能（2026年7月現在）

GitHub無料プランではほぼすべてのサービスが無料で利用できます。個人開発なら費用はかかりません。

重要： GitHub Copilotの新規登録は2026年4月から一時停止されています。AIコード補助を使いたい場合は、公式の受付状況を確認してください。

GitHub Free プランで足りない場面

• プライベートリポジトリの高度な分析機能 → 有料プラン（Pro $4/月）
• Organization全体の監査ログ → Enterprise プラン

ただし、個人開発やスタートアップ初期段階では無料で十分です。

 

Vercel：GitHubからの自動デプロイ

GitHubにコードをpushするだけで、自動的にWebアプリが世界中のCDNに公開されます。GitHub連携済みならmainブランチへのpush時点で本番環境のビルドが走り、PRごとに固有のプレビューURLが自動生成されます。手動操作は一切不要です。

Vercel Hobby（無料）プランの制限と上限（2026年7月最新）

個人の非商用プロジェクトなら、Hobbyプラン（無料）で十分な上限が設定されています。ただし重大な制約があります。

最重要： アフィリエイトサイト、広告掲載、EC販売など商用利用はHobbyプランではNG。該当する場合はProプラン（$20/月）への移行が必須です。

帯域100GB超過を避ける5つのコツ

1. 画像最適化を有効化 - next/imageのunoptimized設定を削除し、WebP自動変換を利用 2. 静的ページを増やす - generateStaticParamsで不要なSSRを削減 3. ポーリング間隔を延ばす - クライアント側のAPI呼び出しを最低30秒に設定 4. 外部ストレージ利用 - 画像をCloudflare R2やSupabase Storageに退避 5. 複数プロジェクト分散 - 高トラフィックサイトはNetlifyやCloudflare Pagesに分散

Pro移行の判断基準は、SSR + API Routesの多用、ポートフォリオの就活・営業利用、または月1000ユーザー超過時点。

Supabase：PostgreSQL採用のバックエンド

Firebaseの代替として注目されるSupabaseですが、NoSQLではなくPostgreSQLの汎用性を活かしており、認証・ストレージ・リアルタイム機能・Edge Functionsをひとつのダッシュボードで管理できます。

Supabase Free プランの容量と上限（2026年7月最新）

Freeプランは500MBのデータベースストレージとMAU50,000人、APIリクエスト無制限で始められます。

FirebaseではなくSupabaseを選ぶ理由

実運用アドバイス： 500MBを超える前に有料プランへの移行を計画することが重要です。データ削除での対応は本番運用に向きません。

料金プランと無料枠の上限（2026年最新）

3ツール全てで「無料」は存在しますが、条件付きです。以下を確認した上で利用開始してください。

実際の開発フロー別コスト試算

シナリオ1：個人ブログ / ポートフォリオ

• GitHub Free + Vercel Hobby + Supabase Free = $0/月
• 月2,000PV程度なら無料枠内

シナリオ2：非商用アプリ（ユーザー機能あり）

• GitHub Free + Vercel Hobby + Supabase Free = $0/月（ユーザー1,000人未満）
• Supabaseで MAU 5,000人超過時 → Proへ移行 = $25/月追加

シナリオ3：アフィリエイトサイト / SaaS初期版

• GitHub Free + Vercel Pro（必須） + Supabase Pro = $45/月（$20 + $25）
• 商用利用はVercel Hobby不可

重要：各サービスの最新料金は公式サイトで必ず再確認してください。 2026年7月時点の情報ですが、変更される可能性があります。

---

3ツールを実際に連携させる手順（ステップ解説）

ステップ1：Supabaseでデータベースを準備（5分）

1. Supabaseにアクセス → Sign Up 2. メールアドレスとパスワードで登録 3. 「New Project」をクリック 4. プロジェクト名・リージョン（Tokyo推奨）・DBパスワードを入力 5. 「Create new project」で確認

待機時間（2～3分）の後、Supabaseコンソールが開きます。

ステップ2：GitHubでリポジトリを作成（3分）

1. GitHubにログイン 2. 左上「+」 → 「New repository」 3. Repository name「my-nextjs-app」（任意） 4. 「Add a README file」にチェック 5. 「Create repository」

ステップ3：ローカルで Next.js プロジェクトを初期化（2分）

```bash # ターミナルで実行 npx create-next-app@latest my-nextjs-app --typescript --tailwind cd my-nextjs-app

# Gitにコミット git remote add origin https://github.com/YOUR_USERNAME/my-nextjs-app.git git branch -M main git push -u origin main ```

ステップ4：Supabase クライアント設定（3分）

```bash # Supabaseライブラリをインストール npm install @supabase/supabase-js ```

プロジェクトルートに `.env.local` を作成：

```bash NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJxx... ```

※ URL と KEY は Supabase Dashboard → Settings → API から取得

ステップ5：Vercelでデプロイ（2分）

1. VercelにGitHubアカウントで登録 2. ダッシュボード → 「Add New」 → 「Project」 3. GitHubリポジトリを選択 → 「Import」 4. Environment Variables に上記の SUPABASE_* を追加 5. 「Deploy」をクリック

デプロイ完了（約1～2分）後、自動生成されたURLにアクセスすればアプリが公開されています。

以降、ローカルで開発 → git push → 自動デプロイの流れが自動化されます。

---

他の選択肢との比較（Netlify・Firebase など）

3つのツール以外にも、有名な選択肢があります。なぜこの3つなのか、客観的に比較します。

結論

GitHub・Vercel・Supabase の組み合わせは、以下の理由で2026年の最強構成です：

• 統合度 - 3ツール全てが連携し、設定が最小限
• 無料枠 - 初期段階は本当に無料
• スケーリング - 有料プランへの移行がスムーズ
• 開発生産性 - AIコーディング（GitHub Copilot）との相性が最高
• 将来性 - 各サービスが積極的に機能追加中

代替案は「データ分析が必要」「Firebaseの投資が既にある」など特殊事情がある場合のみ検討してください。

よくあるつまずきポイントと解決法

初心者が実装時に直面しやすい問題を、あらかじめ挙げておきます。

問題1：Vercelのデプロイが失敗する

症状： `Error: Could not find a valid build`

原因： Next.jsの設定ファイル（next.config.js）が見つからない

解決法： ```bash # プロジェクトルートで確認 ls -la next.config.js

# なければ作成 cat > next.config.js << 'EOF' /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, } module.exports = nextConfig EOF

git add . && git commit -m "Add next.config.js" && git push ```

問題2：Supabaseに接続できない

症状： `Error: SUPABASE_URL is required`

原因： 環境変数が Vercel に登録されていない

解決法： 1. Vercel Dashboard → Project Settings → Environment Variables 2. `NEXT_PUBLIC_SUPABASE_URL` と `NEXT_PUBLIC_SUPABASE_ANON_KEY` を追加 3. Deploy ボタンで再デプロイ

問題3：Githubへの push が拒否される

症状： `fatal: 'origin' does not appear to be a 'git' repository`

原因： リモートリポジトリのURLが間違っている

解決法： ```bash # 現在の設定を確認 git remote -v

# 間違っていれば削除して再設定 git remote remove origin git remote add origin https://github.com/YOUR_USERNAME/REPO_NAME.git git push -u origin main ```

問題4：Supabase の DB 容量が 500MB に達してしまった

症状： `Error: Read-only mode` でアプリが動作停止

原因： Free プランの上限到達

解決法： ```sql -- 1. 容量を確認 SELECT pg_database.datname, pg_size_pretty(pg_database_size(pg_database.datname)) AS size FROM pg_database WHERE datname = 'postgres';

-- 2. 古いデータを削除 DELETE FROM users WHERE created_at < NOW() - INTERVAL '90 days';

-- 3. Vacuumで領域回収 VACUUM FULL; ```

それでも足りなければ Pro プラン（$25/月）への移行を検討してください。

問題5：Vercel Hobby の帯域 100GB を超過した

症状： サイトが 503 エラーで停止

原因： 月間データ転送量が上限を超えた

解決法：

• 画像を圧縮 - next/image で自動最適化（設定済みなら完全無料）
• 外部ストレージ利用 - 大きなファイルはCloudflare R2に移動
• Pro プラン移行 - $20/月で帯域1TBになり、実質的に無制限

---

よくある質問（FAQ）

Q1：本当に3つ全て無料で始められる？

A： はい。GitHub Free + Vercel Hobby + Supabase Free なら、非商用かつユーザー少数なら完全無料です。ただしVercel Hobbyは商用利用禁止なため、その場合はPro($20/月)が必須。

Q2：個人開発でどのくらい使用料が発生するケースが多い？

A： ShiftBの実例では「Freeプランで開発・リリース → 月間ユーザー1,000人超過時点でProプランに移行」というパターンが大半です。初期段階は無料で十分です。

Q3：他の言語（Python・Go）で開発できる？

A： Vercelは Next.js 以外にも対応しています（SvelteKit、Nuxt、Astro など）。Supabase も言語非依存です。ただしVercel の最適化は Next.js 向けなため、他言語ならRailway や Heroku 代替の検討も一案。

Q4：Supabaseのセルフホストは実務的？

A： オープンソースなのでセルフホスト可能ですが、運用負荷が大幅に増加します。個人開発～小規模SaaSはクラウド版（Supabase公式）を推奨。規模が大きい場合（200人チーム超）に初めて検討する価値があります。

Q5：スケール時にこの3つから乗り換える必要が出る？

A： Supabaseのプロプランやエンタープライズプランで大規模運用に対応できるため、完全な乗り換えは不要な場合が多いです。Vercelも Proプランで帯域1TBになり、月数千ドルの使用料でも対応します。

まとめ

• GitHub は無料コード管理の基盤。 100万人以上の開発者に使われ、Vercel などの連携ツールが自動アクションを実行する仕組み。個人開発なら費用ゼロ。

• Vercel は自動デプロイの魔法。 GitHubへのpushで即座に世界中のCDNに公開。Hobby（無料）と Pro（$20/月）で機能差があり、商用利用は Pro 必須。

• Supabase は PostgreSQL ベースのバックエンド。 Firebase よりもSQL自由度が高く、セルフホスト可能。Free プランは MAU 50,000人・DB 500MB で初期段階は十分。

• 3つ合計でも $0 から始められる。 ユーザー成長に応じて段階的に有料プランへ移行する流れが健全。

• 2026年の最強構成は動作実績が多い。 スタートアップ・個人開発の双方で採用例が増え続けており、ノウハウ・ドキュメント・コミュニティ支援が充実している。

次に取るべき行動： 今すぐ Supabase で無料プロジェクトを作り、テーブルを1つ設計してみてください。その後 GitHub でリポジトリを作成し、2～3時間で Next.js アプリを Vercel に公開するまでが、最短の学習ルートです。

参考リンク

• GitHub Free プラン（公式）
• Vercel 料金・無料プラン（公式）
• Supabase 料金・無料プラン（公式）
• GitHub 最新統計 2026