把Gemini3生成的应用，免费部署成自己的网站

视频版：https://www.bilibili.com/video/BV1mcSMBtEkR/

本周最火的玩法，就是用Gemini 3花式生成各种好玩的应用。不过有个问题是，这些应用都是依托于AI Studio上运行的，使用起来很不方便，而且国内没法直连。本期视频主要介绍怎么免费把它部署成自己的网站，分享给小伙伴们使用。我会介绍四个免费的部署平台：Vercel、Netlify、EdgeOne，还有谷歌云。主要分成两类应用：一个是有AI功能的应用，还有一种是无AI功能的应用。

无AI功能

无AI功能的应用，就是指那些不需要与AI交互的基础版的网页APP。

我们来到谷歌的aistudio

https://aistudio.google.com

在左侧找到build。

在这里，一句话就可以把你的想法变成一个可运行的网页或者小工具。最近玩过Gemini 3的朋友应该对这个功能很熟悉了，这里我就不演示怎么生成了。

本期视频的重点是部署。我们在下面可以找到一些官方的样例。这里我以这个应用为例来部署一下，应用的名字叫做“研究可视化”。

Gemini 3把一个真实的量子计算相关的论文，转换成了一个精美的网页。网页里还提供了一个小游戏，用来可视化的展示这篇论文的核心理论。

这个应用就是一个静态网页，它不涉及任何的AI交互功能。我们来看一下怎么部署。在右上角点击“保存到GitHub”。

这里，需要先把应用克隆一份到自己的名字底下，点击“保存”。如果没登录过GitHub账号的话，会提示我们先登录一下。然后给仓库起一个名字，填写一个描述，右下角点击“create git repo”，再点击右下角的“stage and commit”。

点击顶部的链接，我们来到GitHub。这样我们就把应用保存到了自己的GitHub仓库上面。

有了完整代码以后，我们来分析一下这个项目，主要看这里的package.json。在这里可以看到，项目的前端框架是react。react是目前非常流行的前端框架，有组件化、高性能、代码简洁等优点，而且react的生态极为丰富，几乎所有的功能都有现成的轮子可以拿来用。在上面写了它的打包方式是vite build，那这个项目就非常简单了。这个项目是以react框架开发的，使用vite作为编译器的，一个纯前端项目。

接下来我们来到这个文件index.html，

点击右上角的铅笔，

然后找到最下面，这里我们要修改一行代码。这一步是重点，我们需要添加这么一句话，把react的入口文件引用进来。

<script type="module" src="/index.tsx"></script>

然后在右上角点击“commit changes”。

这样我们的仓库就准备好了，接下来部署就非常简单了。

接下来，我们来到第一个免费的部署平台，也就是vercel。 https://vercel.com ，在右上角点击“log in”，这里一定要选择使用GitHub登录。

进来以后，右上角点击“add new -->project”。Vercel会自动的识别项目框架，所以这些配置都不需要改。我们展开下面的Environment，填写一个环境变量，变量的名字叫做Gemini API Key，变量的值随便填一个假的占位就可以了。

因为这个项目没有AI功能，所以我们填个假的key也不会影响项目使用。这里要注意，我们部署的是一个纯前端项目，一定不要把真实的API Key放到前端去使用，因为前端代码是运行在浏览器里面的，任何人都能看到你的源代码。视频的后半段，我会介绍怎么正确安全使用API Key。这里点击“部署”。好，部署成功了，我们点进去看一下，效果看起来很好，非常的完美。

这里要注意一下，Vercel给的这个域名在国内是没法直连的。我们可以点击项目，这里“return to dashboard”，

然后来到settings，左边有一个domain，点击这个“add domain”，可以绑定一个自己的域名，用自己的域名在国内就可以访问到了。有的观众朋友们可能没有自己的域名，那也有别的办法。

我们来看下一个部署平台，就是netlify。

这里一样的，右上角点击“log in”，点击使用GitHub登录。右上角“add new project”，选择“import”，然后选GitHub，点击确认，点击授权。

下面这些配置都不用改，记得在下面添加环境变量，名字还是GEMINI_API_KEY，value随便填，然后点击部署。

部署成功了，我们点进去试一下，netlify给的这个域名在国内是可以直连的。

下一个同样免费的部署平台是腾讯的 EdgeOne Pages。我之前有一个完整视频介绍使用EdgeOne Pages部署项目，它的步骤跟Vercel和Netlify是一模一样的，这里我就不赘述了。

我们使用EdgeOne部署，它生成的这个域名在国内是可以直连的。

有AI功能

接下来，我们看如何部署有AI功能的应用。这里我还是从官网的样例库，在最下面有一个SVG生成器。这里我们输入一句话，点击“generate”，gemini会调用它的AI功能，为我们生成一个SVG的图片。这样图片就生成好了。

我们点开项目的code看一下，在代码里面我们可以看到需要一个Gemini的API Key，

然后调用Gemini模型完成图片的生成。这种项目部署有一个难点，就是我们怎么保护好这个API Key。对，这个项目是一个纯前端项目。我们时刻要有一个安全意识，就是不能把API Key写到前端代码里面，因为任何人只要拿到你的网站，右键查看网页源代码，就可以看到前端的所有源代码。如果把API Key写到前端代码里面，相当于直接泄露了。所以这套代码使用刚才的方式部署是不行的。

这里我们介绍另外一种部署方式，在右上角有一个“部署应用”，就是把APP部署到谷歌云上面。

我们看到这里写了，使用这种方式部署，它会自动的保护你的 API Key。这里选择一个项目，如果没有项目，可以点击这个加号新建一个。注意，这里我们选择的项目必须在谷歌云上面绑卡，并且设置过结算信息才可以。有关这一步如何操作，在我的上期视频里面有过详细介绍了。

然后点击部署。部署完成以后，它自动生成了一个Gemini的 API Key供项目调用，还生成了一个应用链接。

我们点进去试一下，点进来就可以直接使用。这里我打开了浏览器的调试面板，找到网络请求。我们重点来看一下它的网络请求是怎么走的。我让他画一个大肚子的猫，点击生成。这样猫就画好了。我们在浏览器的网络面板就可以看到它调用AI时的网络请求。

这里它走了项目的api-proxy地址完成AI调用。网站调用AI的时候，浏览器会先请求网站域名下面的API proxy地址，这个请求是发送到了谷歌的网关。然后谷歌的网关接到这个请求以后，把请求转发到Gemini的实际API地址，并且网关会自动附加上创建项目时绑定的API key，从而完成整个调用过程。这样在浏览器那边是看不到 API Key的，也就是谷歌通过它的网关功能保护了我们的API Key。

完成这一套调用过程，有个前提是我们的应用必须部署在谷歌云上面才行，其他的部署方式就享受不到这个功能了。不过我们使用谷歌云需要先绑卡，使用起来很不方便。

我们还有另外一个方案，就是把项目改造一下，改造成一个前端加后端的完整应用，从后端调用Gemini的API。我们的API key只存放在网站的后端，这样也可以保护API key。

改造应用

接下来，我们就用AI编程把这个项目改造一下。我们还是点击右上角的按钮，把项目保存到GitHub上面。接下来，我们要把这个项目克隆到本地来改造一下。如果对Git的命令行不熟悉的朋友们，这里可以使用GitHub的桌面客户端工具。我们打开GitHub Desktop这个软件，左上角File->克隆仓库，然后通过项目的名字搜索到，在下面选择一个目录，点击克隆。

然后我使用VS Code打开文件夹，选择刚才我们克隆下来的文件夹。进来以后第一件事，找到index.html，先把缺失的那行代码给它添加上。

然后我们使用AI把项目改造一下。这里我使用的AI编程工具是Codex，任何一个AI编程工具都能胜任这个工作，它也不难。我的提示词是：

把这个项目改造成一个Next.js的前后端应用，注意Gemini的 API Key要安全地存放在后端，需要在后端调用AI功能，确保我的API Key不会泄露。

改造完成。我们来看一下现在的代码，现在的代码都放到了app跟components目录，下面这些都是前端代码。在api目录下面，是后端代码。现在项目是从后端调用Gemini的API，使用Next.js框架完成了前后端的功能分离。

好，我们来测试一下。我们在项目本地新建一个文件，名字叫.env.local，这里填GEMINI_API_KEY=。

回到aistudio，找到左下角的“Get API Key”。因为项目里面调用的是Gemini 3.0 Pro模型，免费层级是没法使用Gemini 3的，它必须使用第一层级的Gemini API key。在上期视频里面，我详细介绍了怎么获取这么一个API Key。我把这个API Key复制一下，填写到项目里面。

然后可以启动测试。新建一个终端，启动命令npm run dev。然后我们来到这个地址，我们先本地调试一下。我让他画一个孙悟空。好，功能正常，没有问题。

接下来我们把它部署一下。我们回到GitHub Desktop，在这里填一个commit message，我的message是：“改造成Next.js 项目，保护API Key”。然后提交，点击“push origin”，把文件都推送到GitHub上面

。然后我们还是用Vercel部署一下，“add new--> project”，选到我们的项目，点击“import”。我们看到Vercel已经智能的识别出了目前的框架是Next.js，所以这些配置都不用改。我们只需要在Environments里面把环境变量填写上 GEMINI_API_KEY，值的话，这里要填写一个真实的API Key。

点击部署。部署的时候报了一个错，我们可以把这个错贴给AI，让他帮我修复一下。AI帮我们完成了修改，把这两个文件给删了。

然后我把这次修改也提交上去：“删除无用文件，修复部署问题”。提交，push到GitHub上面。我们回到Vercel，重新点击部署。

好，部署成功了。我们再来试一下，我让他画一个椒盐爬爬虾。我们在浏览器的网络请求可以看到，他调用后台的时候走的是api/generate接口，并且这个请求里他是不携带 API Key的。

是我们的请求到达了后端，然后后端调用了真实的Gemini API接口。我们看到他画好了椒盐爬爬虾，还是挺有意思的。不过，我们这个网站还有一个问题，就是别人知道了我们网站的域名，每个人都可以上来玩一下，但是所有的请求都是调用了这个API Key，我们得因为这个API Key的调用产生费用。所以这个网站还缺少一个鉴权系统、一个支付系统。用户应该先注册账号，然后进来购买积分，凭借积分来使用这个网站。我之前有一期完整视频介绍使用Supabase、MCP还有Stripe、MCP完成一个网站的用户鉴权加下单支付。本期视频篇幅有限，我就不加这些功能了。

最后我们总结一下，本期视频我们介绍了四个免费的部署平台，分别是Vercel、Netlify、EdgeOne还有谷歌云，介绍了两种项目不同的部署方案：一个是不带AI功能的，还有一个有AI功能的，我们应该怎么保护自己的API Key。好，本期视频就到这里，感谢大家点赞支持，我们下期再见。