Google AI Studioで作ったアプリをGitHub連携・公開する方法｜手順と注意点
Google AI Studioでアプリが動くようになったら、次はコードを保存し、ほかの人にも使ってもらえる形にしたいところです。
その際に整理したいのが、GitHubへの保存と、アプリの公開は別の操作だということです。
GitHubはコードや変更履歴を管理する場所です。一方、デプロイは、利用者がアクセスできる環境にアプリを配置する作業を指します。
この記事では、Google AI StudioのBuildモードで作成したWebアプリを対象に、GitHub連携から公開後の確認までを解説します。
※2026年9月27日時点の公式資料に基づく説明です。画面表示や利用できる機能は、アカウントや更新状況によって異なる場合があります。
目次
AI Studio・GitHub・Cloud Runの役割
まず、各サービスの役割を確認しましょう。
| サービス | 主な役割 |
|---|---|
| Google AI Studio | AIへの指示を通じてアプリを作り、プレビューで動作を確認する |
| GitHub | ソースコードと変更履歴を保存し、共同開発に使う |
| Cloud Run | 公開したアプリを実行する |
Google AI StudioのBuildモードには、GitHubとの同期と、Cloud Runへの公開機能があります。
最初の公開に、GitHub Actionsの設定は必須ではありません。 まず標準の公開機能で動作を確認し、更新作業の自動化が必要になった段階で、別途構成を検討できます。
手順1：公開する前に、アプリの動作を確認する
まず、AI Studioのプレビューで主要な操作を試します。
例えば、文章を要約するアプリなら、次のような確認ができます。
| 操作 | 確認すること |
|---|---|
| 短い文章を入力する | 要約結果が表示される |
| 空欄のまま送信する | 入力を求める案内が出る |
| 長い文章を入力する | 制限やエラーが分かりやすく表示される |
| 処理中にボタンを押す | 意図せずリクエストが重複しない |
| API通信に失敗する | 処理中の表示が終わり、再試行できる |
画面が表示されることと、アプリとして使えることは別です。正常な入力だけでなく、失敗した場合の動きも確認しておきましょう。
不具合をAIに修正してもらう際は、「何を入力したか」「どの操作をしたか」「どうなってほしかったか」を具体的に伝えると、修正内容を確認しやすくなります。
手順2：GitHubと連携し、コードを保存する
公式資料では、AI Studioの設定画面にあるGitHubタブから、アプリをリポジトリに接続する方法が案内されています。
基本的な流れは次のとおりです。
- Buildモードで対象のアプリを開く。
- Settingsを開き、GitHubタブへ進む。
- 画面の案内に従ってGitHubアカウントとの接続を進める。
- 新しいリポジトリを作成するか、既存のリポジトリを指定する。
- アプリの変更をGitHubへ送る。
連携後は、GitHub側でもコードと変更履歴が保存されていることを確認します。
また、リポジトリの公開範囲も確認してください。コードを一般公開する予定がなければ、非公開のリポジトリで管理する方法があります。
ただし、非公開であっても、APIキーやパスワードをコードに保存してよいわけではありません。
外部で編集したコードを取り込む場合
GitHub連携では、AI Studio側の変更を送る操作に加え、外部で変更したコードを取り込む操作もできます。
双方で同じ箇所を変更すると、競合が起こる場合があります。競合した際は差分を確認し、残す内容を選びます。
「AI Studioで修正した内容」と「GitHubに保存された内容」が一致しているかを、区切りごとに確認する習慣が役立ちます。
手順3：公開に必要な条件を確認する
AI Studioからの公開には、利用条件によって異なる選択肢があります。
| 公開方法 | 主な条件 |
|---|---|
| Starter Tier | 対象アカウント向け。最大2つのアプリを公開可能 |
| 通常のデプロイ | AI Studioと連携したGoogle Cloudプロジェクトと、課金の有効化が必要 |
Starter Tierは、すべてのアカウントが利用できるわけではありません。過去または現在のCloud課金アカウントの利用状況、Workspaceなどのアカウント種別による対象外条件があります。
公開画面に表示される選択肢と、公式の利用条件を確認して進めてください。
また、アプリの実行とGemini APIの利用では、費用の発生条件が異なります。公開できたことだけで、すべての利用が無料になるとは判断しないようにしましょう。
手順4：Publishからアプリを公開する
Buildモードでアプリを開き、右上のPublishから公開設定へ進みます。
Starter Tierの公式手順では、次の操作が案内されています。
- Publishを選ぶ。
- Get Startedを選ぶ。
- Publish Appで公開する。
通常のデプロイを利用する場合は、必要なGoogle Cloudプロジェクトや課金設定を整え、表示される案内に従います。
公開が完了すると、アプリへアクセスするためのURLが発行されます。対応する公開設定では、ai.studio配下のカスタムURLも指定できます。
GitHubへ保存しただけでは公開は完了しない
GitHubへの同期と、公開先への反映は別々に確認します。
自動デプロイを別途設定していなければ、GitHubに変更を送っただけで公開アプリが更新されるとは限りません。
修正後は、同期状況と公開状態を確認し、必要な再デプロイを行いましょう。
APIキーは、ブラウザに埋め込まない
Gemini APIを使うアプリでは、APIキーの管理が重要です。
現在のAI Studio Buildでは、Gemini APIキーをサーバー側のシークレットとして扱う仕組みが案内されています。公開時も、秘密情報をブラウザへ渡さない構成を維持します。
特に、次のような変更には注意してください。
- APIキーをHTMLやブラウザ用JavaScriptに直接書く。
- キーを含む設定ファイルをGitHubへ送る。
- 動作確認のためにキーを画面やログへ出力する。
- 外部環境へ移す際、サーバー側のAPI処理をブラウザ側へ移す。
環境変数を使っていても、その値がフロントエンドのコードへ埋め込まれる設定なら、秘密は守れません。
また、キーを隠すだけでなく、アプリの利用者確認やリクエスト回数の制限なども、用途に合わせて検討します。
📚 この記事もおすすめ！
APIキー・アクセストークン・シークレットキーの違いと、安全な保管方法はこちらで整理しています。
手順5：公開URLで、もう一度動作確認する
公開後は、AI Studioのプレビューではなく、発行されたURLを開いて確認します。
最低限、次の項目を試しましょう。
- 想定する利用者が、必要なログインを経てアクセスできるか。
- 入力から結果表示まで、一連の操作が完了するか。
- スマートフォンでも入力欄やボタンを使えるか。
- エラー時に利用者が次の操作を判断できるか。
- 公開した最新版の内容が表示されているか。
プレビューと公開環境では、設定やアクセス条件が異なる場合があります。公開URLでも確認して、初めて作業完了とします。
よくあるつまずきと確認先
| 状況 | 最初に確認すること |
|---|---|
| GitHubに変更が見当たらない | 接続先のリポジトリと、変更を送る操作が完了しているか |
| 外部で編集した内容がAI Studioに出ない | GitHub側の変更を取り込んでいるか |
| 公開操作を進められない | 利用できる公開方式、プロジェクト、権限、課金設定 |
| 画面は開くがAIが応答しない | サーバーのログ、APIキー設定、利用上限、API側のエラー |
| 修正したのに公開画面が変わらない | 再デプロイの完了、アクセスしているURL、ブラウザのキャッシュ |
エラーが起きたら、表示されたメッセージを残し、どの段階で失敗しているかを分けて調べます。APIキーなどの秘密情報は、相談用の画面やログから取り除いてください。
アプリの保存・公開・更新を分けて管理する
Google AI Studioでアプリを公開する際は、次の3点をそれぞれ確認することが大切です。
- 保存：GitHubに必要なコードと変更履歴が残っている。
- 公開：利用者がアクセスするURLでアプリが動く。
- 更新：修正した内容が公開環境にも反映されている。
まずは小さなアプリで、この一連の流れを確認しましょう。作成から公開までを自分で確認できるようになると、その後の機能追加や共同開発も進めやすくなります。
参考資料
Learning Tools
記事を検索したい方はここから！
記事を検索
関連記事や、今の内容に近いテーマをすぐに検索できます。
例: AI / 情報Ⅰ / Python / 統計 / 資格 / 学習法