5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AI Studio のバイブコーディングで作った天気アプリを Cloud Run にワンクリックデプロイしてみた

5
Last updated at Posted at 2026-07-02

はじめに

こんにちは!KDDIアイレット DX開発事業部 深川です
KDDIアイレットの取り組みとして6月22日〜7月3日の期間で開催中の「Google Cloud Next '26 / Google I/O やってみた系ブログリレー」、10日目の投稿です。

Google Cloud Next '26 で、Google AI Studio からフルスタックアプリを Cloud Run にワンクリックでデプロイできる機能が GA になりました。

プロンプトを書くだけでアプリが生成され(バイブコーディング)、そのまま本番環境の Cloud Run に載せられるとのことなので、実際に天気予報アプリを作ってデプロイしてみました。

今回作るもの

  • Open-Meteo API(APIキー不要)で天気を取得するシンプルなWebアプリ
  • ログイン機能・データベースなし(Firebase 連携は使わない構成)
  • デプロイ先: Cloud Run

やってみた

1. Google AI Studio でアプリを生成

https://aistudio.google.com/apps にアクセスし、Build > New app から以下のプロンプトを送信しました。

日本の都市の天気予報アプリを作ってください。

- Open-Meteo API(https://api.open-meteo.com/v1/forecast)を使用。APIキー不要
- 主要都市(東京・大阪・名古屋・福岡・札幌)をボタンで切り替え
- 現在の気温・天気と、今後7日間の予報(最高/最低気温、天気アイコン)を表示
- ログイン機能・データベースは不要
- シンプルでモダンなデザイン

01_masked.jpeg

約10分で生成が完了しました(モデルは Gemini 3.5 Flash、実行時間196秒)。

驚いたのは、プロンプトで指示していない機能まで実装されていたことです。

  • 気温に応じた「おすすめの服装アドバイス」と「傘のご用意アドバイス」
  • 7日間の気温を相対的に可視化するインジケーターバー
  • データ取得中のスケルトンローダー(ちらつき防止)
  • 体感温度・湿度・風速・降水確率・日の出/日の入のカード表示

02_masked.jpeg

2. プレビューで動作確認

プレビュー上で都市切り替え・7日間予報の表示を確認。この時点で普通に完成度が高く、追加の修正指示は不要でした。

03_masked.jpeg

04_masked.jpeg

3. Cloud Run にワンクリックデプロイ(Publish)

画面右上の Publish をクリックすると、公開までのウィザードが始まります。

  1. Step 1: Confirm project and billing — デプロイ先の Google Cloud プロジェクトを選択(請求先アカウントの紐付けが必要)
  2. Step 2: Final touches — アプリ名と説明文が自動生成される(編集可能)
  3. Publish your app をクリック → 「Publishing your app」の進行画面

05_masked.jpeg

06_masked.jpeg

07_masked.jpeg

08_masked.jpeg

数分で完了し、Status: Ready と公開URL(https://japan-weather-forecast-~.asia-east1.run.app)が発行されました。URLにアクセスすると、プレビューと同じアプリがそのまま動いています。

09_masked.jpeg

10_masked.jpeg

※ 公開URL・スクショ内のプロジェクト番号はマスクしています。また、検証用のため現在このアプリは停止済みです。

4. 裏側を覗いてみる

ワンクリックの裏で何がデプロイされたのか、gcloud で確認してみます。

gcloud run services list --project <プロジェクトID> --filter="japan-weather-forecast"
   SERVICE                 REGION      URL                                                     LAST DEPLOYED BY     LAST DEPLOYED AT
✔  japan-weather-forecast  asia-east1  https://japan-weather-forecast-xxxx.asia-east1.run.app  fukagawa@iret.co.jp  2026-07-02T13:33:15.318806Z

普通の Cloud Run サービスとしてデプロイされていました。興味深いのは**リージョンが asia-east1(台湾)**だったこと。Publish フローにリージョン選択はなく、自動で決定されるようです(東京 asia-northeast1 ではありませんでした)。

サービスの詳細も見てみます。

gcloud run services describe japan-weather-forecast \
  --region asia-east1 --project <プロジェクトID> \
  --format="yaml(spec.template)"
spec:
  template:
    metadata:
      annotations:
        autoscaling.knative.dev/minScale: '0'
        run.googleapis.com/base-images: '{"app-container":"us-central1-docker.pkg.dev/serverless-runtimes/google-22/runtimes/nodejs22"}'
        run.googleapis.com/cpu-throttling: 'true'
        run.googleapis.com/sessionAffinity: 'true'
        run.googleapis.com/sources: '{"app-container":"gs://ai-studio-bucket-xxxx-asia-east1/services/japan-weather-forecast/version-1/compiled/build_artifacts.tar.gz"}'
    spec:
      containerConcurrency: 1000
      containers:
      - args:
        - -c
        - if [ -f server.js ]; then node server.js; else npm start; fi
        command:
        - /bin/sh
        env:
        - name: SQL_DB_NAME
          value: cloud_sql_production_database
        - name: GEMINI_API_KEY
          value: AIza************(マスク)
        - name: APP_URL
          value: https://japan-weather-forecast-xxxx.asia-east1.run.app
        image: scratch
        name: app-container
        ports:
        - containerPort: 3000
          name: http1
        resources:
          limits:
            cpu: '1'
            memory: 3Gi
        startupProbe:
          failureThreshold: 10
          periodSeconds: 1
          tcpSocket:
            port: 3000
        timeoutSeconds: 300

読み取れるポイント:

  • ソースデプロイ方式: ビルド成果物は GCS の専用バケット(ai-studio-bucket-~)に格納され、Node.js 22 のベースイメージ上で実行される
  • ゼロスケール: minScale: 0 なので、アクセスがなければ課金はほぼゼロ
  • スペックは 1 CPU / 3Gi メモリ / 同時実行1000: 天気アプリには十分すぎる構成
  • 使っていない環境変数も注入される: SQL_DB_NAME(DBは使っていない)や GEMINI_API_KEY が自動でセットされていた

5. 注意点

  • Gemini API キーが環境変数に平文で自動注入される: 今回のアプリは Gemini API を使っていないのに GEMINI_API_KEY がセットされていました。describe 出力やスクショを共有する際は要マスク。不要なら公開後にキーの扱いを確認すべきです
  • リージョンは選べない: 日本向けアプリでも asia-east1 に配置されました
  • 請求はデプロイ先プロジェクトに発生: ゼロスケールとはいえ、公開しっぱなしには注意(Publish パネルから Unpublish 可能)

まとめ

プロンプト入力からデプロイ完了まで、コードを1行も書かずに 30分弱 でした。

  • アプリ生成: 約10分(指示していない気の利いた機能まで実装される)
  • Publish: 数クリック・数分で公開URL発行
  • 実体は普通の Cloud Run サービス(ソースデプロイ、ゼロスケール)

「プロトタイプから本番までの距離」が本当に縮まったのを実感できるアップデートでした。一方で、リージョンや API キーの扱いなど、業務利用ではひと手間確認が必要な点もあります。

Next '26 では他にも Cloud Run Instances(Private Preview)などエージェント向けの新機能が多数発表されているので、今後も試していきたいと思います。

後片付け

gcloud run services delete japan-weather-forecast --region asia-east1 --project <プロジェクトID>

または AI Studio の Publish パネルから Unpublish app でも停止できます。

5
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?