Eine Google-AI-Studio-App kostenlos deployen (ohne Cloud Run)

Kurz gesagt

Du hast eine App in Google AI Studio gebaut, in der Vorschau läuft sie einwandfrei, und jetzt willst du eine echte URL zum Teilen. Der Deploy-Button drängt dich Richtung Google Cloud Run — ein Server, den du konfigurierst und bezahlst, sobald du das kostenlose Kontingent überschreitest. Für die meisten AI-Studio-Apps ist das überdimensioniert.

Der Punkt ist: Eine AI-Studio-App ist ein React + Vite-Projekt, und Vite-Projekte kompilieren zu einfachen statischen Dateien (HTML, CSS, JavaScript). Statische Dateien hostest du kostenlos auf Netlify, Cloudflare Pages oder GitHub Pages — ohne Server, ohne Kaltstarts, ohne Wartungsaufwand. Diese Anleitung bringt dich vom Code, den du aus AI Studio exportierst, bis zur fertigen Website, ganz ohne Installation. Der Build läuft mit React2Static in deinem Browser, dein Code wird also nie auf einen Server hochgeladen.

Was Google AI Studio dir tatsächlich gibt

Wenn du den Code aus AI Studio exportierst, bekommst du einen Projektordner: eine package.json, eine vite.config.ts, eine index.html und einen src/-Ordner. Das ist Quellcode, keine Website. Wenn du ihn entpackst und index.html per Doppelklick öffnest, bekommst du eine leere Seite — der Browser kann rohes TypeScript und JSX nicht direkt ausführen. Vite muss erst alles zu browserfertigen Dateien bündeln. Dieser Bündelschritt ist der Build, und genau das ist das fehlende Teil zwischen „läuft in AI Studio" und „läuft im Internet".

Die ganze Aufgabe besteht also aus drei Schritten: das Projekt exportieren, es zu statischen Dateien bauen, diese Dateien auf einen Hoster legen.

Wie exportiere ich meine App aus Google AI Studio?

AI Studio bietet dir zwei Wege, an den Code zu kommen: Du kannst die App mit einem GitHub-Repository verbinden oder das Projekt herunterladen. In beiden Fällen willst du den kompletten Projektordner, inklusive package.json — nicht nur den kopierten Inhalt einer einzelnen Datei. Falls du ein ZIP exportiert hast, entpacke es nicht; genau das erwartet der nächste Schritt.

Wie baue ich es zu statischen Dateien?

React2Static führt mithilfe von WebContainers einen echten Vite-Build in deinem Browser aus. Nichts wird hochgeladen — die Node.js-Umgebung, die Installation der Abhängigkeiten und der Build laufen alle lokal auf deinem eigenen Rechner.

Öffne react2static.com

Zieh dein Projekt-ZIP in den Upload-Bereich

Es erkennt das Framework und startet den Build

Warte 1-3 Minuten und lade dann das Ergebnis herunter — deinen gebauten dist/-Ordner als ZIP-Datei

Dieser heruntergeladene Ordner ist deine Website. Jede Datei darin ist reines HTML, CSS oder JavaScript.

Wie lasse ich meine Google-AI-Studio-App lokal laufen?

Du kannst index.html nicht einfach öffnen — das Projekt muss erst gebaut oder über einen lokalen Server bereitgestellt werden. Der Weg ohne Installation ist, es mit React2Static im Browser zu bauen und in der Vorschau anzusehen. Falls Node.js installiert ist, entpack das Projekt und führe npm install und dann npm run dev aus; das startet einen lokalen Server und gibt eine localhost-URL aus.

Wo kann ich es kostenlos hosten?

Jeder statische Hoster funktioniert. Alle hier sind kostenlos und akzeptieren deinen gebauten Ordner per einfachem Drag-and-drop:

Cloudflare Pages - kostenloses Hosting mit globalem CDN, automatischem HTTPS und einer kostenlosen .pages.dev-Domain.

Netlify - Deployment per Drag-and-drop, sehr einsteigerfreundlich.

Vercel - Projekt anlegen, Dateien hochladen, fertig.

GitHub Pages - kostenlos, kann aber keine eigenen Response-Header senden, weshalb manche Projekte Probleme machen. Für die meisten einfachen Apps reicht es.

Auf Cloudflare Pages deployen, Schritt für Schritt

Entpack das heruntergeladene ZIP

Geh auf dash.cloudflare.com und melde dich an

Klick links auf Workers & Pages

Klick auf Create application

Finde ganz unten „Looking to deploy Pages? Get started" und klick auf Get started

Wähle Drag and drop your files

Gib einen Projektnamen ein

Zieh den entpackten Ordner in den Upload-Bereich

Warte ein paar Sekunden, bis das Deployment fertig ist

Klick auf den .pages.dev-Link - deine App ist online

HTTPS und ein globales CDN bekommst du kostenlos dazu. Eine eigene Domain fügst du später in den Projekteinstellungen hinzu, wenn du willst.

Warum nicht einfach Google Cloud Run nehmen?

Cloud Run führt einen Container aus — du mietest einen Server, der bereitsteht, um Anfragen zu beantworten. Du wählst eine Region, und über das kostenlose Kontingent hinaus zahlst du nach Nutzung. Das ist das richtige Werkzeug, wenn deine App ein Backend hat: eine Datenbank, serverseitig gerenderte Seiten oder einen geheimen API-Schlüssel, den du im Browser nicht offenlegen kannst.

Ein AI-Studio-Frontend, das nur vom Browser aus die Gemini-API aufruft, braucht all das nicht. Es sind statische Dateien. Statisches Hosting ist kostenlos, hat keine Kaltstarts, verkraftet beliebigen Traffic, und es gibt keinen Server, den du warten müsstest. Greif nur dann zu Cloud Run (oder irgendeinem Server), wenn du wirklich serverseitigen Code hinzufügst.

Eine Warnung: Wenn deine App Gemini mit einem geheimen Schlüssel aufruft, läge dieser Schlüssel in deinem statischen JavaScript und wäre für jeden lesbar. Das ist der eine Fall, in dem du eine kleine serverlose Funktion vor die API setzen solltest, statt sie direkt aus dem Browser aufzurufen.

Funktioniert das auch mit Claude Code, Cursor und Codex?

Ja. Claude Code, Cursor, GitHub Copilot / Codex, Bolt und Lovable erzeugen alle dieselbe Art von React + Vite-Projekt (oder Vue / Svelte). Die drei Schritte sind identisch: Projektordner holen, zu statischen Dateien bauen, auf einen Hoster legen. Nichts in dieser Anleitung ist spezifisch für AI Studio, außer dem Export-Bildschirm.

Meine App ist nach dem Deployen leer oder kaputt

Die vier häufigsten Ursachen, die am schnellsten prüfbaren zuerst:

Du hast den Quellcode hochgeladen, nicht den Build. Hoste den gebauten dist/-Ordner, nicht den Projektordner.

Leere Seite mit 404-Fehlern bei den Dateien. Der Basispfad des Builds passt nicht zu dem Ort, an dem er gehostet wird.

„API key is undefined". Deine Umgebungsvariable (zum Beispiel GEMINI_API_KEY) ist beim Hoster nicht gesetzt oder war nie dafür gedacht, im Browser zu landen.

Beim Neuladen einer Seite bekommst du einen 404-Fehler. Eine Single-Page-App braucht, dass der Hoster bei unbekannten Pfaden auf index.html zurückfällt.

FAQ

Wie exportiere ich eine App aus Google AI Studio?

Nutze in AI Studio die Option, das Projekt herunterzuladen oder es mit einem GitHub-Repo zu verbinden, und behalte den ganzen Projektordner samt package.json. Dieser Ordner, nicht der Inhalt einer einzelnen Datei, ist das, was du zu einer Website baust.

Brauche ich Google Cloud Run, um eine AI-Studio-App zu deployen?

Nein. Cloud Run ist für Apps mit Backend. Ein AI-Studio-Frontend kompiliert zu statischen Dateien, die du ohne Server kostenlos auf Netlify, Cloudflare Pages oder GitHub Pages hostest.

Kann ich eine Google-AI-Studio-App kostenlos deployen?

Ja. Die App zu statischen Dateien zu bauen und diese zu hosten ist von Anfang bis Ende kostenlos. React2Static baut sie kostenlos in deinem Browser, und statische Hoster haben großzügige Gratis-Kontingente.

Wie lasse ich eine Google-AI-Studio-App lokal laufen?

Entweder du baust sie mit React2Static im Browser und siehst sie in der Vorschau an, oder du führst mit installiertem Node.js npm install und npm run dev im Projektordner aus. index.html direkt zu öffnen funktioniert nicht — das Projekt muss erst gebaut werden.

Warum ist meine Google-AI-Studio-App nach dem Deployen leer?

Fast immer, weil der Quellcode statt des gebauten dist/-Ordners hochgeladen wurde oder weil der Basispfad des Builds nicht zum Hoster passt. Fehlende Umgebungsvariablen und Single-Page-App-Routing sind die beiden anderen häufigen Ursachen.

Wird mein Code auf einen Server hochgeladen, wenn ich React2Static nutze?

Nein. React2Static führt den Node.js-Build mit WebContainers in deinem Browser aus. Deine Dateien verlassen nie deinen Rechner.