保姆级教程我用百度秒哒部署了一个摸鱼全栈AI网站

前几天，我作为唯一一位线上嘉宾，参加了百度秒哒的一场直播（十分荣幸）

（截图来自群里的粉丝小伙伴，感觉截得还挺帅的TVT）

说实话，官方并没要求我准备太多，就想让我像平时一样，真实地体验和分享

但我这人怕直播翻车

还是吭哧吭哧地把秒哒的各种新功能跑了个遍

本身我自己一些小工具也很喜欢在秒哒上做

因为市面上大多Agent，基本都停留在帮你搭个静态前端页面

但秒哒把后端功能和数据库设计也给包了，能让你从零搞出一个完整的全栈项目

（ai画的示意图，有点抽象）

这意味着什么？

这意味着，即使你完全不懂代码，也能把脑子里的想法，利用秒哒快速变成一个能用的产品

正如他们的负责人朱广翔表示：

AI时代，创意将压倒一切

秒哒将创意落地为应用的能力开放给了所有人。在未来，人人都是开发者，创意即应用

很多时候，一个伟大的想法并不是死于技术不行，而是死于第一步的挫败感。

很多人可能刚打开那些专业的AI编程工具，就被复杂的命令行直接劝退

当然也他们很多细节的地方还需要不断优化打磨~

今天，我就想带你亲历这个过程，分享我用秒哒做的众多案例里，最好玩的一个

01

项目灵感来源

源于我偶然刷到的一个魔性AI产品Draw a Fish：画一条鱼https://drawafish.com

这网站玩法巨简单：你用鼠标画条鱼，AI觉得你画的是鱼，就能把它放进一个全球共享的虚拟鱼缸里，和全世界网友的鱼一起游泳

你还能给别人的鱼投票，看看谁的鱼最牛逼，谁的最抽象

虽然这个网站非常的无脑，但是也是因为他简单、魔性所以充满了社交裂变的潜力

因此我觉得这是个很有创意的产品

但问题来了，这个网站要存储所有用户画的鱼，这必然涉及到数据库

对于代码小白们来说这基本就是天方夜谭了

所以我就想让秒哒尝试一下

02

使用秒哒开发的过程

我上传了一张效果图，然后把网站的介绍填上去，

别问我为什么这么详细，因为我照抄一个介绍这个网站的文章的

然后秒哒就吭哧吭哧地完成了我的需求

https://app-6dmf7tyspp8h.appmiaoda.com

原来的那个Draw a fish首页不够好看，直接做了个saas服务页面

功能区，也就是画鱼，也给我完成了，并且有带完整的调色板，画笔粗细调节，以及画布等等，还细心地添加上了撤销、清空

前面一切安好，但是到鱼缸里我有点绷不住了，

这什么东西，我在前面画的小鱼，到这怎么变成一坨了

仔细了解之后才发现，他是把我做的鱼儿搞成了什么svg的格式，就emm我也不太懂

但是，好在他完美地完成了我的其他需求，比如也有个排名系统，大家可以给别人的鱼打分，从夯到拉

基本上现在就已经很完整了，达到了我希望的效果

如果你开发的过程中有什么不足的地方，还可以继续在右侧的对话框继续改良

另外，秒哒也把版本管理给做好了，每次对话都会保存一次

这个和git的版本是一一对应的，如果ai发疯改错了，或者自己手贱不小心搞崩了，也可以时空魔法一下回退版本

03

部署到Vercel

到这就可以发布上线了，如果你是想发布到国内渠道，比如说公司官网，个人介绍，作品集等等的

可以直接点击右上角的小火箭🚀部署，并且可以添加自己的域名，当然你需要提前备案

但今天，我想玩得更极客一点： 自己下载源码，部署到全球通用的Vercel上

点击控制版本旁边的下载按钮，整个项目就被打包下载下来了

接下来，我们需要把代码上传到GitHub

如果你对Git命令头疼，我墙裂推荐 GitHub Desktop 这个神器，全程点几下鼠标就能搞定https://desktop.github.com/download/

不需要git指令，手动点点就能完成版本管理，以及我们需要的上传项目

关联github账号后你就可以直接上传本地项目上去

然后publish，就发到你的github主页上了注意改一下名字，不然他本身自带的名字又臭又长

这样你的项目就上传好了

对了，在readme里也有详细的部署教程

然后我们就可以到vercel上部署了https://vercel.com/

Vercel是一个能让你快速上线项目的神仙平台

我们只需要用GitHub账号登录Vercel

然后选择“Add New... -> Project”

找到刚才上传的 aifishweb 项目，点击“Import”

然后我们还需要配置一下环境变量，才能正常运行项目

可以打开代码包里的.env 文件，里面需要我们换成自己的有两个内容，分别是

VITE SUPABASE UR 和 VITE SUPABASE ANON_KEY 这些是用于supabese对接的环境

去哪里找到这两个变量呢？

https://supabase.com/

这是最关键的一步，也是区分“玩具”和“产品”的一步

我们需要一个真正的云数据库来存储用户画的鱼，这里我们用Supabase

创建Supabase项目： 注册登录后，创建一个新项目，起名叫 fish

再把项目的名称以及密码设置好，就可以快速上线了

这一步需要用到SQL语句，但别怕 秒哒已经把代码都替我们写好了

在下载的代码包里，找到 supabase/migrations 文件夹下的 .sql 文件，把里面的代码全文复制

回到Supabase，找到“SQL Editor”，把代码粘贴进去，点击“RUN”

瞬间，项目所需的数据表就自动建好了

在Supabase的设置 -> API里，找到并复制 Project URL 和 anon public 这两个密钥

然后我们来到api keys的设置页面，获取anon key

回到Vercel，在部署设置里，找到“Environment Variables”（环境变量），把刚才复制的两个密钥填进去

（ VITE_SUPABASE_URL 和 VITE_SUPABASE_ANON_KEY ）。

另外，有个小坑要注意： 构建指令（Build Command）默认的可能跑不通，把它改成 vite build 还有Install Command 改成 npm install 就行了

最后，点击 Deploy

稍等片刻，当Vercel为你献上庆祝动画时……恭喜你！

你已经成功独立开发并上线了一个专业的、拥有完整前后端和数据库的全栈Web应用！（撒花）

https://aifishweb.vercel.app/

Vercel会给你一个专属域名，现在，全世界的任何人都可以通过这个链接访问你的AI画鱼网站了！

接下来你还可以为它绑定自己的域名，这个我们下次再聊

04

总结与感想

从一个想法，到一个功能完整的全栈应用，再到部署上线全球可访问，全程我几乎没碰一行代码

这真是一个最好的时代

更让我佩服的是秒哒的迭代速度，我直播那天还没的 微信支付 功能

现在已经一键集成了，直接打通了产品变现的最后一公里

他们的产品经理每天都在用户群里和大家“对线”，很多新功能都标注着“该产品升级来源于用户功能许愿”