AI 应用部署：从零开始到上线

AI 应用部署：从零开始到上线

1. 写在前面

1.1 Vibe Coding

2025 年标志着软件开发范式的重大飞跃，这一年被业界定义为 “Vibe Coding”（氛围编程）或“自然语言编程”的元年。这一范式的核心在于：开发者不再受限于逐行编写代码，而是通过自然语言描述应用的功能、逻辑与整体“氛围”，由人工智能自动生成完整的代码库。Google AI Studio 推出的 “Build” 功能正是这一趋势的集大成者，它集成了 Gemini 2.0 Flash 和 Pro 模型，使用户能够在浏览器中直接实现基于 React、Angular 框架的现代 Web 应用的生成、预览与部署。

然而，对于中国大陆（PRC）的开发者和内容创作者而言，从 Google AI Studio 的“生成预览”到面向终端用户的“正式发布”，其间横亘着巨大的技术与基础设施鸿沟。这不仅涉及安全性、可扩展性等常规软件工程命题，更包含了特殊的网络环境限制——即“防火长城”（GFW）对 Google API、CDN 资源及部分海外托管平台的阻断，以及跨境数据传输所带来的高延迟挑战。

1.2 Google AI Studio

Google AI Studio 的 Build 模式并非单纯的代码补全工具，而是一个具备深度上下文感知能力的工程生成器。当用户输入提示词（Prompt）后，Gemini 模型会基于其预训练的软件工程知识体系，自动构建出逻辑完整、结构清晰的文件系统级项目。

根据实测与技术文档分析，Google AI Studio 生成的应用通常遵循以下技术规范：

• 前端框架：React 18+ React 拥有目前最成熟的生态系统和最丰富的组件库，这使得 AI 能够高效地引用并集成现成的设计模式。
• 构建工具：Vite Vite 凭借极速的冷启动和热模块替换（HMR）性能，为 AI Studio 的即时预览环境提供了极为流畅的开发体验。
• 编程语言：TypeScript / JavaScript (JSX) AI 优先倾向于生成带有类型定义的 TypeScript 代码，旨在通过静态检查显著减少潜在的运行时错误。
• 样式方案：Tailwind CSS Gemini 表现出对 Tailwind 类名生成的高度契合，这种原子化 CSS 的方式比维护独立的 CSS 文件更符合 AI 辅助开发的高效逻辑。
• AI 原生集成 生成的项目中通常会包含 geminiService.ts 或类似模块，直接封装了对 Google GenAI SDK 的核心调用逻辑，实现了 AI 能力的开箱即用。

从原型到生产：必须跨越的六大技术鸿沟

尽管 AI Studio 生成的应用在预览环境中运行流畅，但若将其直接视为“生产就绪（Production Ready）”并发布，将面临严峻的工程风险。尤其针对中国市场的特殊网络与技术环境，开发者必须跨越以下六个维度的技术鸿沟：

2. 部署前的准备

• 代码托管服务 (GitHub) 打开 GitHub 注册账号。Cloudflare Pages 可以直接从 GitHub 导入代码，实现持续集成（CI/CD）：后续代码改动只需推送至 GitHub，Cloudflare 即可自动触发重新部署。

• 静态托管平台 (Cloudflare Pages) Google AI Studio 生成的应用主要由前端代码组成（不含传统后端服务器）。我们只需进行静态托管即可。推荐选用 Cloudflare Pages，请前往官网完成账号注册。

• 数据库服务 (Supabase) 如果应用需要持久化存储（如保存用户信息、聊天记录），则需要数据库。推荐选用 Supabase，它提供了易用的后端即服务（BaaS）能力，请注册并创建项目。

• 网络中转代理 (Cloudflare Workers) 由于国内无法直连 Google AI 服务，需要搭建中转代理。我们可以利用 Cloudflare Workers 快速部署一个代理服务来转发 API 请求。

• 本地开发环境 如需在本地修改代码后再部署，请准备：

  • IDE: Visual Studio Code
  • 运行时: Node.js (建议安装 LTS 版本)

• 域名注册 建议注册一个自定义域名，以避开托管平台默认域名在国内可能存在的访问限制。

3. 部署流程

具体部署操作的演示细节，请参考配套视频教程。

4. 常见部署问题及解决方案

4.1 Cloudflare 部署报错

请务必确认点击的是 “部署 Pages” 而非“创建 Worker”。

• 在 Cloudflare 控制台中，部署 Pages 的入口通常位于页面下方的文本链接中。
• 

确认部署配置项：

• Build command (构建命令): 填写 npm run build 或 vite build。
• Build output directory (构建输出目录): 填写 dist。
• Deploy command: 保持为空，让 Cloudflare 自动处理。

4.2 应用启动白屏

按下 F12 打开浏览器开发者工具，检查 Console (控制台) 和 Network (网络) 标签页是否有红色报错。

• 情况 A：无明显报错，但页面空白 通常是部署路径错误。请确认是否误将应用部署为了 Worker 而非 Pages（参考 4.1 节）。
• 情况 B：加载 Google Fonts 超时 如果报错信息包含 fonts.googleapis.com，这是由于该域名在国内被阻断，导致浏览器解析 CSS 时长时间等待直至超时，产生“白屏”现象。 解决办法：
  1. 镜像替换：将代码中的 fonts.googleapis.com 替换为 fonts.loli.net，将 fonts.gstatic.com 替换为 gstatic.loli.net。
  2. 移除引用：直接删除 index.html 中的 Google Fonts 链接，并在 CSS 中定义通用系统字体栈：

     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     

  3. 插件化处理：推荐使用 vite-plugin-webfont-dl 插件，在构建时自动下载字体并内联，彻底摆脱外部依赖。

4.3 环境变量配置失效

如果在 Cloudflare 配置了环境变量但运行报错“变量未配置”：

1. Vite 语法限制：Vite 不使用 process.env，必须使用 import.meta.env。
2. 安全前缀限制：Vite 规定只有以 VITE_ 开头的变量才会暴露给前端。例如：将 SUPABASE_URL 改为 VITE_SUPABASE_URL。

4.5 妙用 AI 解决工程问题

面对复杂的配置需求，可以直接通过 Prompt 让 AI 帮你完成代码改造：

• 集成数据库：

  “为本应用集成 Supabase 数据库。请将应用数据保存至 Supabase，数据库配置项从系统环境变量中读取。请同时提供数据库初始化语句并保存到 initSQL.md 文件中。”

• 配置 API 代理：

  “为了通过反向代理访问 Google Gemini API，请为应用内的 API 调用新增 baseUrl 配置功能。如果配置了 baseUrl 环境变量则使用它，否则使用默认值。”

总结： 部署过程中遇到的绝大多数技术细节问题，都可以通过清晰的 Prompt 交给 AI 来修复。

如果你在部署过程中遇到其他挑战，欢迎在评论区留言交流。