Google AI Studioプロジェクトをデプロイ可能なWebアプリに変換
💻 React → HTML/CSS/JS
クリックまたはドラッグしてZIPファイルをアップロード
Google AI Studioで生成されたプロジェクトに対応
サーバー不要、すべてブラウザ内でビルド
コードはサーバーにアップロードされず、完全にローカル処理
ワンクリックでデプロイ可能な静的ファイルを生成
正直に言うと、私自身プログラミングの経験がなく、最初は様々なデプロイ方法を探し回っていました。自分の設計したウェブサイトをもっとちゃんとした形で共有したかったんです。これが私が使ってきた中で最も速い方法です。もしもっと良い方法をご存知でしたら、ぜひ Discord で教えてください。うまくいけば、ここに追加します!
上記のビルド済みZIPファイルをダウンロードして通常のフォルダに解凍
dash.cloudflare.com にアクセスしてログイン(アカウントがない場合は無料登録)
左側のメニューから Workers & Pages を見つけてクリック
Create application をクリック
ページ下部の小さな文字 "Looking to deploy Pages? Get started" を見つけて、Get started をクリック

Drag and drop your files 方式を選択
お好きな Project name を入力
解凍したフォルダをアップロードエリアにドラッグ
デプロイが完了するまで待ち、成功ページが表示されたら .pages.dev で終わるリンクをクリックしてウェブサイトにアクセス

🎉 おめでとうございます!このリンクを友達に共有すれば、きっと驚かれますよ!
Cloudflareが自動的に無料の.pages.devドメインを提供してくれるので、ドメインを購入する必要はありません。このドメインにはHTTPSとグローバル加速が含まれており、友達に見せたり自分で使ったりするには十分です。特別な要件(例えば、よりプロフェッショナルなドメインが欲しい)がない限り、この無料ドメインで問題ありません。
Cloudflare Registrarでドメインを購入(推奨)または既存のドメインを使用
Pagesプロジェクト設定でCustom domains → Set up a custom domainをクリック
ドメインを入力し、指示に従ってDNS設定を完了。有効になるまで待機
ちなみに、このウェブサイト自体も AI コーディングの成果なんです!
正直なところ、人それぞれ状況が違いますし、ちょっとした操作ミスもあるので、デプロイ中に色々な問題に遭遇するかもしれません(私自身も何度も躓きました)。そんな時は、もう一度最初から手順を実行してみてください。馬鹿げているように聞こえるかもしれませんが、意外とうまくいくことが多いです。
デプロイ対応プラットフォーム Cloudflare Pages • Vercel • Netlify
Made with ❤️ for Google AI Studio users