【実録】Firebase StudioからGoogle AI Studioへ移行してみた!手順と注意点を徹底解説

皆さん、こんにちは。okamoです。

前回記事【2027年3月廃止】Firebase Studioの代替は?VSCode+Copilotへの移行手順を徹底解説の中で、「現在はPrepare for AI Studioボタンが無効になっていますが、有効になったら非エンジニア向けの実録記事を書く予定です」とお伝えしましたが、本日無事に「Prepare for AI Studio」ボタンが有効になっていたため、約束通り記事にしました!

今回の移行対象アプリは、Firebase連携(Firestore, Firebase Auth, Firebase Storage)や決済システム(Stripe)との連携が含まれた、フルスタックな自作の個人メディアシステム(のテストサイト)です。Firebase連携については、Firebase Admin SDKを使用してサーバーサイドからアクセスしており、記事の追加・修正にはGeminiによるAI連携も組み込まれています。

独自ドメイン設定済みの環境(test.okamomedia.tokyo)で、Firebase App Hosting上で稼働しているシステムが果たして無事にAI Studioへ移行できるのか。実際の画面とともにお届けします。


Firebase Studio → AI Studio への移行手順(実録)

  1. Firebase Studio のコンソールで 「Move Now」ボタン を押します。 Move nowボタン

  2. 続いて 「Prepare for AI Studio」ボタン を押します。 Click_Prepare_AI_Studio_Button.png

  3. 続いて「Move to Google AI Studio」ボタンを押します。 Click_Move_To_AI_Studio_Button.png

  4. AI Studioでの構築が開始されます。

※注) 処理中に「今日の無料生成の上限に達しました」と表示された場合、Gemini API Keyを登録して下さい。AI Studioを完全無料で利用するの難しいと思います。アプリ公開後(Publish後)はCloud Runの費用も発生します。

構築が完了するとプレビュー画面が表示されます。環境変数の移行を確認する為、右上の歯車アイコンをクリックし、「Secrets」を選択します。 Click_Google_AI_Studio_Setting_Icon.png

  1. 環境変数がきちんと移行できていることを確認します。私の環境では問題なく移行されていました。 Setting_Secrets.png

  2. 「Publish」ボタンをクリック後、「Get started」ボタンを押します。 Google_AI_Studio_Publish.png

  3. プロジェクト選択欄で、「プロジェクトをインポート」を選択します。 GCP_Project_Import1.png

  4. インポート候補のプロジェクトから、現在利用しているFirebaseのプロジェクトを選択します。(ここが重要なポイントです!) GCP_Project_Import2.png

  5. 「Publish app」ボタンを押します。 Click_Publish_App_Button.png

  6. しばらく待つと、Publishが完了します。 Complete_publish.png ※独自ドメインを利用していない場合、移行前(App Hosting)とは別のURLになりますのでご注意ください。

  7. GCPコンソールから「Cloud Run」を確認すると、サービスが新規作成されています。 Cloud_Run.png ※Cloud Run自体は東京リージョンに対応していますが、移行により作成されるサービスのリージョンは us-west1 固定になるようです。

  8. 独自ドメインを設定するため、左メニューから「ドメインマッピング」を選択し、「マッピングを追加」ボタンを押します。 Add_Domain_Mapping.png

  9. ドメイン名を入力し、「続行」ボタンを押します。 Input_Domain_Name.png ※Google Search Consoleの所有権確認と同様の方法で、ルートドメインの所有権確認(TXTレコードの追加)が必要です。

  10. CNAMEレコードが表示されますので、ご利用のDNS管理システム(例:ムームードメインなど)でCNAMEレコードを設定します。 Setting_CNAME_Record.png ※App HostingのAレコードを利用していた場合は削除してから、新しいCNAMEレコードを追加してください。

  11. ドメインマッピングが完了するまでしばらく待ちます。 (私は1時間近く待ちました。DNSのTTL設定にもよると思いますが、反映には結構な時間がかかります。)


移行時の重要ポイント

1. 既存のApp Hosting環境は無傷のまま

AI Studioへの移行を行うと、Firebase App Hostingの環境はそのまま維持され、新規にCloud Runのサービスが立ち上がります。 そのため、独自ドメインを使っていない場合はサービスのURLが変わります。 移行がうまくいかなかった場合は、App Hosting側に切り戻しをすれば良いだけですので、安心して試すことができます。

2. Firebase Admin SDKの権限について

サーバー側からFirebaseへアクセスするためにFirebase Admin SDKを利用していましたが、Cloud Runへ移行後も個別に権限を追加することなく動作しました。 GCPのIAMを確認してみたところ、Cloud Runサービスのアカウントには自動的に Firebase App Hosting サービス エージェント のロールが付与されていました。 Grant.png これにより、移行後も引き続きAdmin SDKを介したアクセスが可能です。

3. AI Studioのプレビュー表示に関する注意点

AI Studio上でプレビューを表示させるためには、Firebase Admin SDKのサービスアカウントキー(JSON)が必要になります。Firebaseコンソールから新しい秘密鍵を生成し、環境変数経由でアプリに渡す必要がありますのでご注意ください。


アプリケーション側で修正が必要だった箇所

今回の移行(App Hosting → Cloud Run)に伴い、コードの修正が必要になった箇所をまとめました。 (すべてAI StudioのGemini に修正してもらいました)

■ Googleプロフィールアイコンが表示されない

Googleのプロフィール画像(*.googleusercontent.com)を表示する際、以前の環境ではNext.jsの <Image> コンポーネントを使うと next.config.ts での設定が必要になったり画像最適化エラーになるため、あえて通常の <img> タグを使用していました。 しかし、移行時のGeminiによるコード修正で <Image> コンポーネントに書き換えてしまっており、表示エラーになっていました。

■ 記事編集画面のサムネイルが巨大化

こちらも上記の <img> から <Image> への書き換えが原因です。 AI Studio(Next.js環境)への移行にあたり、Geminiがパフォーマンス向上のために <Image fill /> に書き換えたことで、レイアウトが崩れ意図しない巨大なサイズで表示されるようになってしまいました。

■ クライアントIPの取得方法の変更

App Hosting環境で利用できていた x-fah-client-ip がCloud Runでは使えなくなります。 代わりに x-forwarded-for のヘッダー値を右側から確認し、ローカルIP(169.254.169.126 のような特殊なIP)以外のIPアドレスを取得する処理へと変更しました。(本番環境にてアプリから見えるリクエストヘッダー値をすべてデバッグ確認した上でAI StudioのGeminiに修正してもらいました)

■ 記事追加時のGemini API関連エラー

記事の生成・保存時に以下のエラーが発生しました。 Must supply a contentType when sending File URIs to Gemini.

理由: AI Studio環境に移行してパッケージがインストールされた際、Genkit関連のライブラリも最新仕様にアップデートされたためです。これにより、contentType を未指定のまま利用しようとすると、APIリクエストの手前でSDKがエラーを出してブロックする仕様に変わっていました。明示的に指定することで解決しました。


まとめ

いくつかの軽微なコード修正は必要でしたが、Firebase連携やStripe決済を含むフルスタックアプリ(個人向けメディアシステム「homepage」のテストサイト)を無事にAI Studio(Cloud Run)へ移行することができました!

今回はあえてエラーが出そうな複雑な構成のアプリで検証を行いましたが、もっと単純なアプリ(Firebase連携等の外部連携のないアプリ)であれば、コード修正なし・エラーなしでスムーズに移行できそうな印象です。(エラー困った時はAI Studioの最新のGeminiにサポートしてもらえます)

前述のとおり、「Prepare for AI Studio」ボタンで移行しても旧環境(App Hosting)は無傷のままです。基本的にはボタンをポチポチ押していくだけですので、非常に気楽に試せます。 万が一うまくいかなければApp Hostingに切り戻せば良いだけですので、お時間のある方はぜひお気軽にAI Studioへの移行をお試しください!

2026/4/12追記: 3人のAI達による辛口レビュー

個性的な3人のAI達が「手順は正確だが、内容は浅い」「誰に向けた記事なのか?」と鋭く切り込んでいます。

興味のある方はぜひ、覗いてみて下さい。

firebase-studiogoogle-ai-studio について語るスレ(okamoちゃんねる)