Aus AI Studio in Cloud Run bereitstellen

1. Übersicht

Wo fängt die Entwicklung mit KI heute an? Für die meisten von uns beginnt es oft mit einer einfachen Frage: „Kann ich schnell einen Prototyp für die Lösung des Problems erstellen, über das ich nachgedacht habe?“ Genau hier kommt Google AI Studio ins Spiel. Hier können Sie schnell Prototypen für alles erstellen. In diesem Codelab erstellen wir eine einfache Webanwendung mit Vibe-Coding und stellen sie in Cloud Run bereit.

Aufgaben

Möchten Sie eine Webanwendung mit Vibe Coding erstellen und anderen zur Verfügung stellen? In diesem Lab erstellen wir eine Webanwendung und stellen sie in Cloud Run bereit – alles mit AI Studio. In diesem Lab werden Sie:

1. Einfache Webanwendung mit Vibe Coding erstellen
2. Prüfen, ob die Anwendung wie erwartet funktioniert
3. Anwendung in Cloud Run bereitstellen

Voraussetzungen

• Ein Browser, z. B. Chrome oder Firefox

2. Hinweis

1. Wählen Sie in der Google Cloud Console auf der Seite zur Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.
2. Die Abrechnung für das Cloud-Projekt muss aktiviert sein. So prüfen Sie, ob die Abrechnung für ein Projekt aktiviert ist .
3. Wenn Sie den Link zum Einlösen von Guthaben haben, folgen Sie dieser Anleitung, um das Guthaben einzulösen.

3. Prototyp

Rufen Sie Google AI Studio auf. Beginnen Sie mit der Eingabe Ihres Prompts, der die Anwendung beschreibt, die Sie erstellen möchten. Hier ist mein Prompt:

Create a formal looking frontend application that has two buttons: "Snowflakes" and "Balloons". If the user clicks on the "Snowflakes" button, snowflakes of medium size should start falling on the screen from top to bottom for 5 seconds. If the user clicks on the "Balloons" button, balloons of medium size should start floating from the bottom of the screen and float to the top for 5 seconds.

Wählen Sie das gewünschte Modell aus. Hier verwenden wir Gemini 3 Pro (Vorabversion). Klicken Sie auf die Schaltfläche Erstellen.

Anhand dieser einfachen Beschreibung erstellt AI Studio eine Webanwendung, die genau der von Ihnen angegebenen Beschreibung entspricht. Die Erstellung der Anwendung dauert 2–3 Minuten.

Sollten Sie Probleme mit der Anwendung feststellen, können Sie zusätzliche Prompts eingeben, um das Verhalten der Anwendung zu korrigieren. Sie können beispielsweise die Größe der Schneeflocke auf das Doppelte der aktuellen Größe erhöhen.

Unten sehen Sie einen Snapshot der generierten Anwendung:

4. In Cloud Run bereitstellen

Jetzt, da die Anwendung bereit ist, können wir sie in Cloud Run bereitstellen.

1. Klicken Sie rechts oben auf der AI Studio-Seite auf die Schaltfläche Veröffentlichen. Wenn Sie den Mauszeiger darauf bewegen, wird „App bereitstellen“ angezeigt.
2. Dadurch wird das Pop‑up-Fenster **App in Google Cloud bereitstellen** geöffnet.

>

Jedes Gmail-Konto erhält zwei kostenlose Cloud Run-Apps. Dazu benötigen Sie nicht einmal ein Google Cloud-Projekt.

3. Klicken Sie auf das Drop-down-Menü Cloud-Projekt auswählen.
4. Wählen Sie das Projekt im Drop-down-Menü aus. Wenn Sie Ihr Projekt nicht im Drop-down-Menü finden, klicken Sie auf Projekt importieren und wählen Sie das Projekt im Bereich Projekt importieren aus.
5. Nachdem Sie das Projekt ausgewählt haben, wird geprüft, ob die Abrechnung aktiviert ist. Möglicherweise müssen Sie Ihrem Projekt Abrechnungsdetails hinzufügen.
6. Klicken Sie auf den Button App bereitstellen und warten Sie, bis die Anwendung in Cloud Run bereitgestellt wurde.

Der Name des Cloud Run-Dienstes wird automatisch generiert.

7. Die Bereitstellung sollte in wenigen Minuten abgeschlossen sein. Sie erhalten die App-URL. Wenn Sie auf die URL klicken, wird die bereitgestellte Webanwendung angezeigt.

5. Bereinigen

So vermeiden Sie, dass Ihrem Google Cloud-Konto die in diesem Beitrag verwendeten Ressourcen in Rechnung gestellt werden:

1. Wechseln Sie in der Google Cloud Console zur Seite Ressourcen verwalten.
2. Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie auf Löschen.
3. Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf Herunterfahren, um das Projekt zu löschen.

6. Glückwunsch

Glückwunsch! Sie haben eine Anwendung in AI Studio erfolgreich mit Vibe Coding versehen und in Cloud Run bereitgestellt.

AI Studio ist eine ideale Plattform zum Entwickeln und Testen von Anwendungen, mit der Nutzer ihre Designs sofort in Aktion sehen können.

Durch die nahtlose Integration von AI Studio in Cloud Run können Nutzer ihre Anwendungen mühelos direkt in Google Cloud bereitstellen. Die Verwendung von Cloud Run bietet alle Vorteile einer serverlosen Umgebung, da die Komplexität und der Aufwand der Infrastrukturverwaltung entfallen.