公開編

Webアプリを世界へ届けよう！

GitHub と Cloudflare を使ったデプロイ手順

🗺️ 公開（デプロイ）の全体像

あなたのPCにあるアプリ（ディレクトリ）を、インターネット上に公開する流れです。

💻
あなたのPC
完成したコード一式
⇆
🐙
GitHub
コードの保管庫
➔
☁️
Cloudflare
全世界へ配信するサーバー

🐙 STEP 1: GitHubにアップロード

GitHub上で空のリポジトリを作成した後、VS Codeのターミナルで実行します。


          # 1. すでに git init している場合は飛ばしてOK
          git init 

          # 2. 全ファイルを準備
          git add .

          # 3. 最初のセーブ
          git commit -m "Initial commit"

          # 4. メインブランチに設定
          git branch -M main

          # 5. GitHubのURLと紐付け（リポジトリURLをコピペして.gitを追加する）
          git remote add origin https://github.com/アカウント名/リポジトリ名.git

          # 6. アップロード！
          git push -u origin main

☁️ STEP 2: Cloudflare Pagesと連携

次に Cloudflare にログインし、GitHubの保管庫と繋ぎます。

1. Pages プロジェクトの作成
ダッシュボードから「Account home」>「+Add」（右上青ボタン）>（プルダウンから）「Pages」を選択。
2. Gitに接続
「Import an existing Git repository」ボタンを押し、GitHubアカウントを認証します。
3. リポジトリの選択
先ほどコードをプッシュしたリポジトリを選択して「設定の開始」へ！

⚙️ STEP 3: ビルド設定（超重要）

サーバー上でNext.jsを正常に動かすための必須設定です。

【1. フレームワーク設定】

  • プリセット： Next.js を選択

【2. 互換性フラグ (必須!)】

  • 「Compatibility flags」に以下を入力して保存します。
    nodejs_compat

【3. 環境変数の追加】

「Variables and Secrets」にConvexを登録します。

  • 変数名： NEXT_PUBLIC_CONVEX_URL
    値： (https://xxx.convex.cloud 等)

※ 変数名：GEMINI_API_KEY 値：（あなたのAPIキー）はConvex側に登録済みのため、ここでの設定は不要です（が、しておいても問題ありません）。

🚀 STEP 4: デプロイ実行！

準備が整ったら、一番下のボタンを押すだけです！

「保存してデプロイ」をクリック！

  • Cloudflareが自動的にコードを読み込み、Webサイトを組み立てます（ビルド）。
  • 1〜2分待つと、https://プロジェクト名.pages.dev というURLが発行されます！

💡 POINT: 以降は、PCでコードを修正して GitHubにプッシュするたび に、
Cloudflareがそれを検知して 自動でWebサイトを最新版に更新 してくれます！

🌍 STEP 5: カスタムドメインの設定

自分だけのオリジナルURL（ドメイン）を設定しましょう。

  1. Workers & Pagesからプロジェクトを選択し、「Custom Domain」タブを開きます。
  2. 取得済みのドメイン（例：my-app.com）を入力します。
  3. 画面の指示に従い、DNSレコードが自動で追加されれば完了！

🎉 祝・公開完了！ 🎉

おめでとうございます！
あなたの作ったAIアプリが、世界中からアクセス可能になりました。

さっそくスマホや他のPCからURLにアクセスして、
動作を確認してみましょう！
SNSでシェアするのもお忘れなく！👍