博主头像

把Gemini3生成的应用，免费部署成自己的网站，别只会在AI Studio里玩了

外来客 • 2026-08-20 08:01:51

分享
𝕏 f ◉
声明：本文为对公开内容的摘要整理， 未经本站独立核实，可能与原内容存在出入，不代表本站立场、观点或建议； 观点与版权归原作者及原平台所有。 如涉及版权问题，请联系我们，核实后立即删除。 [ 免责声明 ]

🎯 核心观点

  • 针对 Gemini 3 生成的应用，需根据是否包含 AI 功能选择不同部署策略。
  • 纯前端应用可直接部署至静态托管平台，但需警惕 API Key 泄露风险。
  • 含 AI 功能的应用必须通过后端代理或网关机制保护 API Key，避免直接暴露在前端代码中。
  • 国内用户需关注部署平台的网络连通性，部分平台域名无法直连，需绑定自有域名或选择支持直连的平台。

🛠️ 关键事实与步骤

  • 部署平台分类：
  • 静态托管：Vercel、Netlify、Edge One Pages。适用于无 AI 交互的纯前端项目（如 React 应用）。
  • 云托管：谷歌云（Cloud Run）。适用于需调用 AI API 的项目，利用网关自动附加 API Key，保护密钥安全。
  • 纯前端部署流程：
  1. 在 AI Studio 生成应用并保存至 GitHub。
  2. 修改 `index.html` 引入 React 入口文件。
  3. 在部署平台（如 Vercel/Netlify）导入 GitHub 仓库。
  4. 设置环境变量 `Gemini API Key`（纯前端项目可填假值，因不涉及实际调用）。
  5. 部署后，若平台域名国内无法直连，需绑定自有域名。
  • 含 AI 功能部署方案：
  • 方案一（谷歌云）：直接部署至 Cloud Run，系统自动生成 API Key 并通过网关转发请求，浏览器端不可见密钥。前提：谷歌云账户需绑卡并设置结算信息。
  • 方案二（前后端分离）：将项目改造为 Next.js 应用，API Key 仅存于后端 `.env.local` 文件。
  1. 克隆项目至本地，使用 AI 辅助改造为 Next.js 结构。
  2. 本地测试通过后，推送至 GitHub。
  3. 在 Vercel 部署时，环境变量中填入真实的 Gemini API Key。
  4. 请求流程：浏览器 -> 后端 API -> Gemini API，密钥不暴露在前端。
  • 技术细节：
  • 纯前端项目严禁将真实 API Key 写入代码，因浏览器源码公开可见。
  • 改造为 Next.js 后，需删除无用文件以修复部署错误。
  • 使用 Gemini 3.0 Pro 模型需使用付费层级的 API Key，免费层级不支持。

⚠️ 结论与注意事项

  • 安全性：保护 API Key 是部署含 AI 功能应用的核心，必须通过后端或网关隔离密钥。
  • 可用性：Vercel 默认域名国内无法直连，Netlify 和 Edge One Pages 生成的域名国内可直连。
  • 成本与功能：当前方案未包含用户鉴权和支付系统，若需商业化使用，需额外集成 Supabase 或 Stripe 等服务以实现积分购买和账号管理。
  • 前提条件：使用谷歌云部署需完成绑卡；使用 Gemini 3 模型需具备付费 API Key 权限。

博主头像 👤 同一博主

查看该博主全部 56 篇

🧭 类似博主

0 条评论

发表评论

请先 登录 后参与讨论。