引言
最近刷到很多用Google AI Studio生成各种好玩的应用的视频，不过这些应用都是依托于AI Studio上运行的，使用起来很不方便，所以就在想能不能将AI Studio生成的应用部署到网站上，更加方便的进行访问。本文主要介绍一下相关的部署方式和自己用的比较舒服的一套开发和部署流程。
部署方式
在B站上找到一个相关的视频看了一下，说的还是比较全面的，可以参考这个视频中的方式进行部署。
把Gemini3生成的应用，免费部署成自己的网站，别只会在AI Studio里玩了_哔哩哔哩_bilibili
四种部署方式对比：
| 部署平台 | 主要特点 |
|---|---|
| Vercel | 默认域名国内无法直连，可绑定自定义域名解决 自动识别框架，部署简单，免费额度充足 |
| Netlify | 操作与Vercel类似，域名国内可用 免费额度有限 |
| 腾讯EdgeOne Pages | 国内平台，访问速度较快 完全免费 |
| 谷歌云 | 需要绑定信用卡和结算信息 自动保护API Key，通过网关代理请求 |
不同应用
无AI功能的纯前端应用
特点： 静态网页，不需要API调用
部署步骤：
- 在Google AI Studio生成应用
- 点击”保存到GitHub”
- 选择任一平台（Vercel/Netlify/EdgeOne）
- 一键部署完成
有AI功能的应用
特点： 需要调用Gemini API，必须保护API Key
方案1：谷歌云部署
- 使用Google AI Studio的”部署应用”功能
- 自动创建API代理，保护API Key
- 通过谷歌网关转发请求，前端看不到Key
缺点是似乎只有Gemini模型可以，如果用qwen或者deepssek这样的就不太行
方案2：改造为全栈应用
技术栈： Next.js + 前端后端分离 核心思路：
- 前端 → 调用后端API
- 后端 → 保存真实API Key并调用Gemini
- 部署到支持后端的平台（Vercel/Netlify/EdgeOnel）
这个方案的话比较通用，支持任意的模型
改造步骤：
- 使用AI编程工具（如Codex）将纯前端项目改造为Next.js全栈项目
- API Key存放在后端环境变量中
- 前端通过
/api/generate等接口调用后端 - 部署时在后端配置真实API Key
开发和部署流程
自己最近结合网上教程和自己摸索基本确立了一套比较舒服的开发部署流程，在此记录一下。
开发
首先是通过Ai Studio开发一个应用的初版，然后上传到github
接下来我们可以在Ai Studio中逐步优化，也可以选择通过CURSOR去进行后续的修改，我们打开CURSOR，然后选择clone repo，登录一下我们的Github即可。（最近也在尝试VScode中集成codeX去进行开发，都可以，看个人喜好）
把GitHub上的项目拉取下来之后就可以进行修改了（当然，其实也可以跳过Ai Studio，直接在CURSOR中写初始代码，然后上传Github等）
然后通过CURSOR可以进行一些修改和开发，修改之后预览效果可以在终端（快捷键Ctrl+J）中通过以下命令运行预览效果：
nmp install
npm run dev
当效果满意之后可以提交到github中（让cursor帮忙完成就行），如果手动的话可以使用下面的命令
- 初次配置 (仅需一次)
- 切换协议：
git remote set-url origin git@github.com:用户名/仓库名.git- 作用：将 HTTPS 切换为 SSH 免密模式。
- 确认状态：
git remote -v- 作用：检查远端地址是否已更正。
- 日常循环 (常用命令)
- 查状态：
git status- 作用：确认改动了哪些文件。
- 存入暂存区：
git add .- 作用：标记所有改动准备提交。
- 提交本地：
git commit -m "说明文字"- 作用：保存改动快照到本地仓库。
- 推送到远端：
git push origin main- 作用：将本地改动同步到 GitHub。
此处分享一个最近看到的一个比较适合入门的Git教程（感觉Git还是比较重要的一个东西）
部署
之前一直用Netify进行部署，主要他能够生成一个直接访问的URL，但是免费额度有限，于是转而使用EdgeOne。
常规部署
EdgeOne中只需要选择对应的Git仓库就行，然后填写项目名，分支这些信息。如果是需要用到API KEY的应用，那么可以在环境变量的地方指定。
部署成功之后就可以进行预览了，如果不配置自定义域名的话链接是3h有效，所以尽量还是配置自定义域名（前提是需要有一个备案好的域名）。下面会介绍如何配置自定义域名。
EdgeOne绑定自己的域名
参考腾讯官方文档：自定义域名
点击添加自定义域名
需要到域名解析服务商那里添加解析记录，我用的是阿里云的域名，所以去阿里云控制台进行操作
点击添加解析
然后按照之前的提示把相关信息填写好就行
此时我们再点击验证就可以验证成功了
但是此时访问www.salary.kongcm.cn 发现访问不了，报502了，说明服务器端有问题
我们回到edgeone，发现还需要添加CNAME
回到阿里云控制台再添加一条CNAME解析
稍等一会这边的状态就变成了已生效
此时再尝试访问，我发现还是访问不了（是因为开了代理，把代理关闭就可以正常访问了）
关闭代理可以正常访问，但是会提醒不安全，因为我们的网站并没有SSL证书。Edgeone也帮我们考虑了这一点，可以参考：申请免费证书
我们点击HTTPS配置那里的配置（我这张图是配置好的，没配置的话这里应该显示不太一样）
然后选择申请免费证书，选自动验证
因为我们之前已经配置过CNAME解析了，这里只需要等待一会儿就OK了，我们可以看到显示已部署，然后把强制HTTPS打开，大功告成。
我们再次尝试访问，发现没有再提醒不安全了。
结语
以上就是自己最近对于Gemini Ai Studio开发部署应用的一些探索，其实并不算复杂，只是网上目前的资料比较琐碎，所以在这里进行一些整理。
