免费部署 Google AI Studio 应用（不用 Cloud Run）

一句话总结

你在 Google AI Studio 里做好了一个应用，预览里跑得好好的，现在想要一个能分享出去的正式网址。可那个 Deploy 按钮会把你引向 Google Cloud Run——一台要自己配置、超出免费额度还得按用量付费的服务器。对大多数 AI Studio 应用来说，这有点小题大做。

其实道理很简单：AI Studio 应用本质上是一个 React + Vite 项目，而 Vite 项目最终都会编译成一堆纯静态文件（HTML、CSS、JavaScript）。静态文件可以免费托管在 Netlify、Cloudflare Pages 或 GitHub Pages 上——不用服务器、没有冷启动，也没什么要维护、要打补丁的。这篇教程带你从 AI Studio 导出的代码一路走到网站上线，全程不用装任何软件。构建这一步在你的浏览器里用 React2Static 完成，所以你的代码不会上传到任何服务器。

Google AI Studio 到底给了你什么

当你从 AI Studio 里导出代码，拿到的是一个项目文件夹：一个 package.json、一个 vite.config.ts、一个 index.html，还有一个 src/ 目录。这是源代码，不是网站。要是你解压后直接双击 index.html，看到的会是一片空白——浏览器没法直接运行 TypeScript 和 JSX。得先让 Vite 把这些内容打包成浏览器能跑的文件，这个打包步骤就是构建（build），也正是"在 AI Studio 里能跑"和"在网上能用"之间唯一缺的那一环。

所以整件事就三步：把项目导出来，构建成静态文件，把文件放到托管平台上。

怎么把应用从 Google AI Studio 导出？

AI Studio 给你两种把代码拿出来的方式：连一个 GitHub 仓库，或者直接下载项目。不管哪种，你要的都是完整的项目文件夹，得包含 package.json——而不是只复制某个文件里的内容。如果你导出的是 ZIP，先别解压，下一步正好要用。

怎么构建成静态文件？

React2Static 用 WebContainers 技术，在你的浏览器里跑一次真正的 Vite 构建。什么都不会上传——Node.js 环境、装依赖、构建，全都在你自己的机器上本地完成。

下载下来的这个文件夹就是你的网站，里面每个文件都是纯 HTML、CSS 或 JavaScript。

怎么在本地运行我的 Google AI Studio 应用？

你没法直接打开 index.html——项目得先构建、或者用服务器跑起来。不想装东西的话，就用 React2Static 在浏览器里构建并预览。要是你本机装了 Node.js，把项目解压后运行 npm install、再运行 npm run dev，它会启动一个本地服务器并给出一个 localhost 地址。

免费托管在哪些地方？

任何静态托管都行。下面这些都免费，把构建好的文件夹拖进去就能部署：

Cloudflare Pages - 免费托管，自带全球 CDN、自动 HTTPS，还送一个免费的 .pages.dev 域名。

Netlify - 拖拽即部署，对新手很友好。

Vercel - 建个项目，把文件传上去就行。

GitHub Pages - 免费，但它没法发送自定义响应头，少数项目会出问题；大多数简单应用没问题。

一步步部署到 Cloudflare Pages

HTTPS 和全球 CDN 都免费。以后想要自定义域名，在项目设置里加就行。

为什么不干脆用 Google Cloud Run？

Cloud Run 跑的是一个容器——你租的是一台随时待命、等着响应请求的服务器。你得选一个区域，超出免费额度后按用量付费。当你的应用有后端时，它才是对的工具：数据库、服务端渲染的页面，或者不能暴露在浏览器里的密钥。

而一个只在浏览器里调用 Gemini API 的 AI Studio 前端应用，这些需求它都没有。它就是静态文件。静态托管免费、没有冷启动、能扛住任意流量，也没有服务器要你去打补丁。只有当你真的加了服务端代码时，才需要 Cloud Run（或者任何服务器）。

一点提醒：如果你的应用是拿一个密钥去调 Gemini，那这个密钥就直接躺在你的静态 JavaScript 里，谁都看得到。这种情况下，你会想在 API 前面加一个小的 serverless 函数，而不是直接从浏览器里调。

Claude Code、Cursor、Codex 也适用吗？

适用。Claude Code、Cursor、GitHub Copilot / Codex、Bolt、Lovable 生成的都是同一类 Vite + React（或 Vue / Svelte）项目。三步完全一样：拿到项目文件夹、构建成静态文件、放到托管平台上。这篇教程里除了导出那一步，没有任何东西是 AI Studio 专属的。

部署后一片空白、或者坏了

最常见的四个原因，从最好查的开始：

常见问题

怎么把应用从 Google AI Studio 导出？

用 AI Studio 里"下载项目"或"连接 GitHub 仓库"的选项，保留包含 package.json 的整个项目文件夹。是这个文件夹、而不是某个文件里的内容，才是你拿去构建成网站的东西。

我必须要 Google Cloud Run 才能部署 AI Studio 应用吗？

不用。Cloud Run 是给有后端的应用用的。前端的 AI Studio 应用会编译成静态文件，能免费托管在 Netlify、Cloudflare Pages 或 GitHub Pages 上，不用服务器。

能免费部署 Google AI Studio 应用吗？

能。构建成静态文件、再托管这些文件，从头到尾都免费。React2Static 在你的浏览器里免费完成构建，静态托管也有很大方的免费额度。

怎么在本地运行 Google AI Studio 应用？

要么用 React2Static 在浏览器里构建并预览，要么在装了 Node.js 的情况下，在项目文件夹里运行 npm install 和 npm run dev。直接打开 index.html 是不行的——项目得先构建。

为什么我的 Google AI Studio 应用部署后一片空白？

基本都是因为传的是源码、而不是构建好的 dist/ 文件夹，或者构建的 base 路径和托管位置对不上。缺环境变量、单页应用的路由，是另外两个常见原因。

用 React2Static 时我的代码会上传到服务器吗？

不会。React2Static 用 WebContainers 在你的浏览器里跑 Node.js 构建，你的文件不会离开你的机器。

相关指南