Google AI StudioアプリをCloud Runなしで無料デプロイする方法

要点だけ先に

Google AI Studioでアプリを作り、プレビューでは問題なく動いていて、あとは共有できる公開URLが欲しい——そんな状況だと思います。ただ、Deploy ボタンを押すと、Google Cloud Runへ誘導されます。Cloud Runは自分で設定する必要があり、無料枠を超えると使った分だけ課金されるサーバー環境です。ほとんどのAI Studioアプリにとっては大げさすぎます。

ポイントはこうです。AI Studioアプリの正体は React + Vite プロジェクトで、Viteプロジェクトは最終的にただの静的ファイル（HTML・CSS・JavaScript）にコンパイルされます。静的ファイルなら、Netlify・Cloudflare Pages・GitHub Pagesに無料でホスティングできます——サーバーなし、コールドスタートなし、メンテナンスするものもありません。このガイドは、AI Studioから書き出したコードを公開済みサイトにするまでを、何もインストールせずに案内します。ビルドは React2Static を使ってブラウザ内で行われるので、コードがサーバーにアップロードされることはありません。

Google AI Studioから実際に得られるもの

AI Studioからコードを取り出すと、手に入るのはプロジェクトフォルダです。package.json、vite.config.ts、index.html、そして src/ フォルダ。これはソースコードであって、ウェブサイトではありません。解凍してindex.htmlをダブルクリックすると、真っ白なページが表示されます——ブラウザは生のTypeScriptやJSXをそのまま実行できないからです。まずViteがすべてをブラウザ向けのファイルにまとめる必要があります。このバンドル処理が ビルド で、「AI Studioでは動く」と「インターネット上で動く」の間に不足している唯一の工程です。

つまり作業は3ステップだけ。プロジェクトを取り出し、静的ファイルにビルドし、そのファイルをホスティングに置く。

Google AI Studioからアプリを書き出すには？

AI Studioには、コードを取り出す方法が2つあります。GitHubリポジトリに接続するか、プロジェクトをダウンロードするか。どちらの場合も、必要なのはpackage.jsonを含む プロジェクトフォルダ一式 です——単一ファイルの中身をコピーしただけでは不十分です。ZIPで書き出した場合は、解凍せずそのままにしておいてください。次のステップがまさにそれを使います。

静的ファイルにビルドするには？

React2Static は、WebContainersを使ってあなたのブラウザ内で本物のViteビルドを実行します。何もアップロードされません——Node.js環境も、依存関係のインストールも、ビルドも、すべてあなた自身のマシン上でローカルに行われます。

ダウンロードしたこのフォルダが、そのまま公開するウェブサイトになります。中のファイルはどれも、素のHTML・CSS・JavaScriptです。

Google AI Studioアプリをローカルで動かすには？

index.htmlをただ開くことはできません——プロジェクトはまずビルドするか、サーバーで配信する必要があります。インストール不要のやり方は、React2Staticでブラウザ内でビルドしてプレビューすることです。Node.jsが入っているなら、プロジェクトを解凍して npm install、続けて npm run dev を実行してください。ローカルサーバーが起動し、localhostのURLが表示されます。

無料でホスティングできる場所は？

静的ホスティングに対応していれば、どのサービスでも使えます。以下はどれも無料で、ビルド済みフォルダをドラッグ＆ドロップするだけです。

Cloudflare Pages - グローバルCDN、自動HTTPS、無料の.pages.devドメイン付きの無料ホスティング。

Netlify - ドラッグ＆ドロップでデプロイでき、初めてでも扱いやすい。

Vercel - プロジェクトを作り、ファイルをアップロードすれば完了。

GitHub Pages - 無料ですが、カスタムレスポンスヘッダーを送れないため、一部のプロジェクトはうまく動きません。単純なアプリなら十分です。

Cloudflare Pagesへのデプロイ手順

HTTPSとグローバルCDNが無料で付いてきます。独自ドメインが欲しければ、あとからプロジェクト設定で追加できます。

そもそもなぜGoogle Cloud Runを使わないのか？

Cloud Runは コンテナ を動かします——リクエストに応え続ける準備が整ったサーバーを借りる形です。リージョンを選び、無料枠を超えると使った分だけ課金されます。これはアプリにバックエンドがあるときに適した選択です。データベース、サーバーサイドレンダリングのページ、ブラウザに晒せない秘密のAPIキーなどがある場合です。

ブラウザからGemini APIを呼ぶだけのAI Studioフロントエンドには、そのどれもありません。それは静的ファイルです。静的ホスティングは無料で、コールドスタートがなく、どんなにトラフィックが増えても対応でき、メンテナンスすべきサーバーもありません。Cloud Run（やその他のサーバー）を使うのは、実際にサーバーサイドのコードを足すときだけで十分です。

一つ注意点。アプリが秘密のキーでGeminiを呼んでいる場合、そのキーは静的なJavaScriptの中に置かれ、誰にでも読まれてしまいます。その場合だけは、ブラウザから直接呼ぶのではなく、APIの前に小さなサーバーレス関数を置くのがよいでしょう。

Claude Code・Cursor・Codexでも使えますか？

使えます。Claude Code、Cursor、GitHub Copilot / Codex、Bolt、Lovableは、どれも同じ種類のVite + React（またはVue / Svelte）プロジェクトを生成します。3ステップはまったく同じ——プロジェクトフォルダを手に入れ、静的ファイルにビルドし、ホスティングに置く。このガイドで唯一AI Studio特有なのは、書き出しの画面だけです。

デプロイ後に真っ白、または動かない

よくある原因は4つあります。確認しやすい順に並べます。

よくある質問

Google AI Studioからアプリを書き出すには？

AI Studioでプロジェクトをダウンロードするか、GitHubリポジトリに接続するオプションを使い、package.jsonを含むプロジェクトフォルダ一式を保持してください。単一ファイルの中身ではなく、このフォルダこそがウェブサイトにビルドする対象です。

AI StudioアプリのデプロイにGoogle Cloud Runは必要ですか？

いいえ。Cloud Runはバックエンドを持つアプリ向けです。フロントエンドのAI Studioアプリは静的ファイルにコンパイルされ、サーバーなしでNetlify・Cloudflare Pages・GitHub Pagesに無料でホスティングできます。

Google AI Studioアプリを無料でデプロイできますか？

できます。静的ファイルにビルドし、そのファイルをホスティングするのは、最初から最後まで無料です。React2Staticはブラウザ内で無料でビルドし、静的ホスティングにも十分な無料枠があります。

Google AI Studioアプリをローカルで動かすには？

React2Staticでブラウザ内でビルドしてプレビューするか、Node.jsが入っているならプロジェクトフォルダでnpm installとnpm run devを実行します。index.htmlを直接開いても動きません——プロジェクトはまずビルドする必要があります。

なぜGoogle AI Studioアプリはデプロイ後に真っ白になるのですか？

ほとんどの場合、ビルド済みのdist/フォルダではなくソースをアップロードしたか、ビルドのベースパスがホスティングと一致していないためです。環境変数の未設定と、シングルページアプリのルーティングが、他の2つのよくある原因です。

React2Staticを使うと、コードはサーバーにアップロードされますか？

いいえ。React2StaticはWebContainersを使ってブラウザ内でNode.jsのビルドを実行します。ファイルがマシンから出ることはありません。

関連ガイド