哈喽，大家好，

我是阿星👋

很多同学问让 gemini3 了手势交互网站好玩是好玩，

怎么部署到网上🤔像下面这样的实时交互网站👇部署出去直接玩

工具类部署给朋友用👇

今天我们就来解决这个问题，让你真正有一个网站可以拿出手！

下面是 3 个方法：

1、直接在 googlestudio 发布应用，有成本

2、在 vercel 一键部署，不红没成本

3、国内 aliyun+宝塔，成本不超过你一星期奶茶

提前和大家说明一下

1、代码不部署到网上还可以通过 share studio 里的链接给朋友，不是必须部署。但是如果你想实现 ying 利，让更多人用起来就必须进行部署

2、所有学 AI 的同学我都建议，直接大家要做一个真正的网页+一个真正的 app，没人用的代码不算产品。

3、海外的方法基础版 free 的，国内的方法加起来也没一个星期买奶茶的钱多！所以不用担心！

方法一： 直接在 googlestudio 发布

Google studio👉写完了👉右上角点火箭👉选 key

部署成功后会有这 3 个应用，直接点击 view app 就弹出来的那个网站，就是你的应用 url

接着你就要有成本了如果有人用了你这个应用，key 都是你的 key

点击箭头，进去之后就可以查看这个站的资源用量了

方法二：通过 Vercel 托管

第一步：从 Google AI Studio 推到 GitHub

写完代码之后在你的 Google AI Studio 项目中点右上角（不知道怎么用 gemini3 的复习一下我之前写的：👉Gemini3 做小红书封面生成器，效率暴增 1000% ，实现爆款封面自由！）

按照指引，你的整个文件夹都会推到 github 上。

如果你没有 github 账号，利用 Google 上号本身弄一个。如果有直接按默认设置提交就行了。

接着会让你选择是否公开代码，建议大家直接选 private，之后如果有需要再公开。一旦 public 了地球上的程序员都能搜到看到-_-||

特别提醒：一定要注意保护自己的代码，开源一定是你已经想好自己的商业模式的情况下的选择。否则到后期你看到别人拿你开源的东西做出成绩了，你会很被动，可能没法阻止代码的扩散了求告无门。当你想清楚之后，开源甚至可以作为一种商业手段去用，比如 DIFY 这家公司的策略。所以大家一定要综合考虑再去开源。

1. 1. 这样，你的代码就从本地搬到了云端仓库，完成了第一步的迁徙。

   

   
   

第二步：连接 Vercel，一键部署

访问 Vercel 官网，使用你的 GitHub 账号登录。（因为我们要接入 github 的项目更方便）授权后，Vercel 就能看到你的仓库了。

点击“Import Project”（导入项目）

在列表里找到你刚创建的仓库，点击导入。

在配置页面，所有设置都保持默认即可，因为 vercel 本身是会自动识别的，freamework preset 不知道的话可以根据源代码问下你的 ai，让它来判断在 vercel 上怎么选择，然后直接点击底部的 “Deploy” 。

等待几十秒，部署完成！系统会自动生成一个 项目名.app 的地址，点击就可以打开你的项目！

这样的专属网址。现在，任何人都能通过这个链接看到你的内容了。

可以看到这个网址是 app 结尾的，

vercel 还可以自定义域名，

不会的看我之前写过的👉10 分钟搞定出海域名！Vercel+Cloudflare 完美低成本绑定丨小白 AI 出海教程

vercel 部署的优点就是 “代码上传 GitHub，Vercel 自动接手” 。

你完全不用操心服务器、域名这些事，特别适合快速分享和展示。

之后想要访问直接在控制台访问即可。

方法三：国内典型上线方法

如果你想更深入了解一个网站是如何从零搭建起来的，享受完全掌控的感觉，可以使用国内常见的 aliyun 服务器和宝塔面板来操作。先看图理解一下各个名词的含义。

特别提醒：aliyun 这块对于没做过的同学会有点想 shi，感觉不是在学 ai，是在学 ailiyun 使用方法，不过坚持下来，只需要一次之后直到流程就可以部署无数个网站。

整个过程就像是在盖房子，通过下面的步骤平地而起——

第一大步：搞服务器

1. 保存代码到本地（准备转头）

因为我们是要手动部署，所以先将 Google AI Studio 里的完整项目文件保存到你电脑上。

建议新建一个清晰的文件夹，比如“jarviscode”，英文的就行。

我们直接在本地任何代码编辑器里打开这个项目文件夹，先放一边。（每个项目都是一个文件夹，而不是我们平常理解的单个文件。）

2. 搞云服务器（盖好房子）

前往 aliyun，你们只用选最低的那个就行了，个人完全够了。

选择合适的配置（最低档即可），记得一定要选这个宝塔面板的！不要选别的！咱们后面讲的都是围绕这个版本的。

然后你就拥有了一台 24 小时在线的云端电脑。记下它的 公网 IP 地址 ，这是它的“坐标”。

之后要找到这个服务器，就直接点右上角的控制台就可以了，aliyun 常见的功能都在这里，然后选择 ECS👇。

然后点进去找到公网 IP，记下来，之后做域名解析的时候还会用到。

3. 注册域名（门牌号）

在 aliyun 或任何域名服务商那里，挑选一个你喜欢的、好记的域名，最好 cn、com 结尾的常见的，不要太奇怪的。

4、 申请 SSL 证书（说明书）

为了让你的网站地址是安全的 https://，需要 SSL 证书。在 aliyunSSL 证书页面，选择 “个人测试证书” 进行申请，然后记得是点创建证书！！！不是点旁边那个立即🛒 ，千万不要点错了！

然后点进去自己设置个子域名或者直接用主域名就行了，你要记清楚，到底是用的主域名还是子域名。后面用得到。

点完之后证书状态不会立即生效，需要你手动申请👇

然后不用管不用都给你，直接点击提交审核

还没完，点击提交审核后就会开始让你添加 DNS 解析。框起来的就是让你添加的记录。

可以看到解析记录的类型是 TXT，一会儿我们还要添加一条类型为 A 的，一般一共就这两条。

5、域名解析（贴牌工）

购买后，进入 域名控制台 ，找到 “域名解析” 设置。

域名解析又简称 DNS。DNS 就是个贴牌工，把作为门牌号的域名和作为实体房子的服务器联系起来。NS 就是 name service

填上你刚才申请 ssl 证书的时候让你添加的记录。

等一会儿一般会自动解析过来，如果没有你就手动添加一下就可以了。

然后，证书签发后，将证书文件（通常是一个 .key 文件

和一个 .pem 文件

） 下载到电脑本地 ，后面在宝塔面板中会用到。

然后添加一条记录：类型选 A 记录 ，主机记录填 @。

值 必须准确填写 你服务器的公网 IP。

这样，访问你的域名时，请求才会被指向你的服务器。

第二大步：用宝塔面板上站

接下来我们要用宝塔面板来干活！

你可能会问那刚才买啥服务器

如果说服务器是转头和实体房子，宝塔面板就是 ipad 上看到的这个房子的投影，能让你对这个房子看得更清楚。我们直接操作服务器太不可视化了，所以宝塔面板这种工具能让我通过点来点去，去操作服务器。

1、找到自己的宝塔地址

我们选使用 Workbench 工具以 SSH 协议登录 Linux 实例。（不用理解，SSH）SSH 是那套确保连接安全可靠的“底层协议和规则”，而 Workbench 则是利用这套规则，为你打造的“一键直达、开箱即用”的豪华操作控制台。 你用 Workbench，就是在享受 SSH 带来的安全，同时免去了使用 SSH 的繁琐。

现在，回到你最开始在 aliyun 买的服务器，点到这个服务器的页面，然后右上角点「远程连接」蓝色按钮，

然后你就进入了一个命令行界面，小白不要怕，这些不是数学，都是英语！

打开之后键入下面的命令👇，直接复制过去，然后回车即可看到外网地址

bt default

然后把这 url 复制到浏览器里打开，就可以到你的宝塔面板地址了👇🏻

你没用的话这里的界面是等待你一键安装的，你一定要一键安装，千万别自定义那么多，

小白很容易搞错。

中间可能时间会比较长，

不要关机！不要叉掉！

等着就行了，装完了就和我一样了👇🏻

2、添加站点

在宝塔面板左侧点击“网站”，然后点击“添加站点”。

在域名这一栏中， 务必填写你刚购买并已解析的域名，千万不要误填成服务器的 IP 地址，否则你的域名会访问不到你的站上的内容。

3、添加 SSL 证书

然后点击右侧的设置按钮，往下看，点 SSL 即可。

在 SSL 证书区域，将你下载的 .key 文件内容粘贴到“密钥(KEY)”框，.pem 文件内容粘贴到“证书(PEM)”框，然后保存。

证书获取方式：SSL 控制台

然后我们下载第一个就可以了

用 sublime 打开

下载后的文件复制到宝塔站点的 SSL 证书处，即可。

4、 上传代码并发布

但是现在代码是在我们本地的源代码，炒了菜必须装盘儿浏览器才能看懂。

第一个方法 vercel 之所以不用这些脏活，因为 Vercel 帮你把脏活累活（Build）给偷偷干了，而宝塔（Nginx）只负责展示结果。

所以走宝塔流程，用你习惯的 IDE 打开“我的圣诞树项目”文件夹。

选项一：告诉 AI

现在帮我生成build文件夹，我要在宝塔面板进行上架。

然后 AI 会给你单独在这个项目文件夹下建立一个 build 文件夹。也可能是一个 ZIP 压缩文件夹。

选项二：手动建构

1. 1. 运行命令 npm install 安装依赖。

2. 2. 运行命令 npm run build 进行打包。

3. 3. 打包完成后，会多出一个 dist 文件夹。

把dist文件夹里面的内容 （通常是 index.html 和 assets 文件夹）拖到宝塔的网站根目录，这才是浏览器能看懂的网站文件。

回到宝塔面板的“文件”管理器，导航到你添加站点时生成的 根目录 ，将这个 ZIP 压缩包上传进去，然后右键点击它，选择“解压”。

注意确保网页文件（如 index.html）直接位于网站根目录下。

如果不知道怎么放置文件夹层级，直接问 AI 让他给你画层级图。

回到宝塔的“网站”列表，找到你的站点，点击右侧的“重启”按钮。

激动人心的时刻来了：打开一个新的浏览器标签页，输入你的完整域名站点就已经上线啦！

🌍无论选择哪种，你的作品都已在世界的一角拥有了自己的位置。

🪓如果在任何一步遇到了拦路虎，最简单有效的办法就是： 将终端或页面上显示的完整错误信息复制下来，去咨询你的 AI ，它们能为你提供非常具体的解决方案。

ok！我是阿星～

我们下期再见👋