第四章：Vercelへのゼロコストデプロイ（全世界に公開）

開発した美しいウェブサイトが、自分のノートPCでlocalhost:3000と入力して一人で楽しむだけではもったいない。それをオンラインに公開し、世界中の人々、あなたのクライアントや将来の雇用主が、スマートフォンでURLを入力するだけであなたの作品を体験できるようにしましょう。

従来のデプロイ方法は非常に面倒でした：仮想プライベートサーバー（VPS）をレンタルし、SSHで接続し、Nginxをインストールし、SSL証明書を設定し、自動化スクリプトを書く...。これはフロントエンドエンジニアにとって悪夢のような作業でした。しかし今、私たちにはVercelがあります。これはNext.jsの親会社が提供するクラウドプラットフォームで、現在ReactとAstroをデプロイする最も強力で無料の選択肢です。

🐙 ステップ1：ソースコードをGitHubにアップロード

Vercelはzipファイルの直接アップロードを受け付けません。あなたのGitHubリポジトリと接続してデプロイを行います。これには大きな利点があります：自動継続的デプロイ（CI/CD）。今後GitHubに新しいコードをプッシュ（Push）するだけで、Vercelが自動的に検知し、バックグラウンドでウェブサイトを更新してくれます。手動での介入は一切不要です！

GitHub公式サイトにログインし、新しいRepositoryを作成します（例：not_far_web）。READMEの初期化はチェックしないでください。
VSCodeのターミナルに戻り、以下のコマンドを実行します（これは業界標準のGitワークフローです）：

# 1. すべての変更を追跡に追加
git add .

# 2. 意味のあるバージョン履歴をコミット
git commit -m "ホームページUIとデータベース接続を完成"

# 3. メインブランチ名がmainであることを確認
git branch -M main

# 4. リモートGitHubリポジトリを紐付け（URLはあなたのものに変更）
git remote add origin https://github.com/あなたのアカウント/not_far_web.git

# 5. 強力にプッシュ！
git push -u origin main

ターミナルにBranch 'main' set up to track remote branch 'main'と表示されれば成功です！

🚀 ステップ2：Vercelで「ワンクリックデプロイ」

Vercel公式サイトにアクセスし、Sign upをクリック、Continue with GitHubを選択して認証ログインします。
ダッシュボードに入ったら、画面右上の黒いAdd New... > Projectをクリックします。
リストから先ほどアップロードしたnot_far_webプロジェクトを見つけ、右側のImportボタンをクリックします。

ここで最も驚くべきことが起こります：Vercelは自動的にあなたのプロジェクトがAstroフレームワークであることを検知し、すべてのビルドコマンド（astro build）と出力ディレクトリ（dist）を自動入力します。手動設定は一切不要です！

🔒 ステップ3：環境変数の設定（超重要、間違えるとデータベースに接続できません！）

下部のDeployをクリックする前に、一旦止まってください！第2章で作成した.envファイルを覚えていますか？.envファイルは決してGitHubにアップロードされません（Supabaseのパスワードが含まれているため）。 GitHubにパスワードがない場合、VercelがGitHubからコードを取得してコンパイルする際、当然パスワードが見つからず、あなたのウェブサイトはクラウド上でデータベースに接続できずクラッシュします！

Vercelの管理画面で、手動でパスワードを「教えて」あげる必要があります：

Vercelのデプロイ設定画面で、Environment Variablesセクションを展開します。
ローカルPCの.envファイルを開き、2行のKeyとValueをそれぞれコピーして貼り付けます：
- Name欄に：PUBLIC_SUPABASE_URL / Value欄に：https://xxx.supabase.co
- Name欄に：PUBLIC_SUPABASE_ANON_KEY / Value欄に：あなたの長いANON_KEY
横のAddをクリックします。
両方の変数が追加されたことを確認したら、下部の青いボタンDeployをクリックします！

🎉 ステップ4：お祝いとカスタムドメインの設定

水を飲みながら、約30秒から1分待つと、Vercelがリモートサーバーであなたのプロジェクトをパッケージングし終え、画面に祝いの紙吹雪（Confetti）が舞います！ Vercelはあなたにユニークな無料URLを提供します（例：not-far-web-git-main-あなたのアカウント.vercel.app）。

しかし、これが商業案件の場合、クライアントにvercel.appで終わるURLを見せるわけにはいきません。クライアントが購入した独自ドメイン（例：notfar.com）を紐付ける必要があります。

🔥【Vibe Prompt カスタムドメイン実戦呪文】 私のAstroプロジェクトはVercelにデプロイされました。独自ドメイン（例：notfar.com）を適用したいです。

Vercel管理画面のSettings > Domainsで追加する詳細な手順を教えてください。

私のドメインはCloudflare（またはGoDaddy）で購入しました。DNSレコードをどのように設定すべきですか？

A RecordとCNAMEとは何か、どちらを記入すべきか明確に説明してください。

AIは非常に詳細なDNS設定の説明を提供します。一般的に、Cloudflareでwwwをcname.vercel-dns.comに向けるCNAMEを設定し、数分間のDNS伝播を待つと、Vercelは自動的に無料のSSLセキュリティ証明書（URL横の緑の南京錠）を発行します。

⚠️ [よくある落とし穴] デプロイ失敗：Type Check Error（型エラー）

多くの初心者がローカルでnpm run devをテストする時はすべて正常ですが、VercelにアップロードするとFailed to compileやType errorで失敗します。これは開発モードではTypeScriptが寛容ですが、Vercelはデプロイ時に厳格なビルドチェック（npm run build）を実行するため、1つの変数でも型定義を忘れると容赦なくブロックされるからです。

Vibe Coderの解決法： VSCodeに戻り、ターミナルでnpm run buildを手動実行します。ターミナルにはVercelと同じエラーが表示されます。そのエラーをコピーしてCursorに貼り付けます：「ビルド時にこの型エラーが発生しました。修正してください」。修正してGitHubにプッシュすると、Vercelは自動的に再デプロイします。

💼 [ビジネスアプリケーションシナリオ] 無料プランの逆襲とSaaSの始まり

Vercelが提供するHobbyプラン（無料版）は、1日に数千人が訪問する中小規模のウェブサイトに対応できます。これは、クライアントのイメージサイトを開発する際、「ホスティングとデプロイコスト」が0円であることを意味します！「サイト公開費」と「月間ホスティング保守費（1500〜3000円）」をクライアントに請求でき、これがあなたの案件の純利益になります。

さらに高度な使い方として、VercelはCI/CDワークフローをサポートしています。クライアントがタイトルを変更したいと言った場合、VSCodeでテキストを変更し、git pushを押すだけで、残りのすべてが自動的に行われ、クライアントは1分後にページをリロードするだけで更新を確認できます。この究極のエンジニア体験こそ、現代のSaaS（サービスとしてのソフトウェア）起業の標準的な始まり方です。

✅ コースまとめ：あなたはもう初心者ではありません！

Not Far Webの基礎実戦を完了したことをおめでとうございます！この旅を振り返ると、あなたは以下のことを学びました：

AIを使って瞬時にデータベース構造を生成し、データを書き込む（Supabase）。
React Hooksを制御してユーザー状態を管理する。
企業レベルのGlassmorphism質感のアニメーションコンポーネントを作成（Tailwind + Framer Motion）。
セキュリティ意識を構築（.envと.gitignore）。
ゼロコストで自動継続的デプロイを実現（Vercel）。

あなたは商業レベルのイメージサイトを構築する完全な技術チェーンを手に入れました。しかし、真のフルスタック開発者は、より複雑なデータ構造と地図位置情報を処理する方法を学ぶ必要があります！「リアルタイムランドマークとクラスタリング機能を備えたキャンプ地図」に挑戦したいですか？あなたのVibeを準備し、次の上級コースへ進みましょう：Course 2: Car Camping Map！