一文教会你如何把AI写的程序部署上线

这篇文章是一个之前从来没有搞过编程的我。如何一步步查资料问AI，花了两天时间，终于把自己用AI编程的一款软件部署到网上的过程。

期间踩了很多坑，走了很多弯路，浪费了很多时间。

因为部署流程步骤较多，我把部署过程记录下来，是分享给大家共同进步，也是为了自己后续部署的时候翻看。

前提

近期我用Codex编程了一款简单的软件，名字叫：jotbook。

其实就是个记账软件，用来记我每天的支出，然后内容是保存到本地的。不用登陆，没有数据库，没有后端。网上查了建议用PWA架构，说是接近原生应用，部署方便简单，我就用了。

在本地调试的没问题后，接下来工作就是部署上线，这样我就能在我手机上用了。

我之前考虑过就用本地调试的软件来使用。但是实际情况是不方便，需要你的电脑一直开机，一直把服务启动着。所以还是部署上线吧。

部署上线

部署上线过程总结为三步：

1.上传Github

2.vercel部署上线

3.域名解析

虽然只有三步，但是一步一坑。我也是尝试了很多办法最后才选择在vercel进行部署的，这种目前是最方便的。

接下来，如果没有现有的项目，大家可以复制我的这个项目（https://github.com/zhengyunhui123-dev/jot），跟着我的教程走一遍上线流程。

上传Github

编程必须要用Git，毋庸置疑。

Git主要是用来做版本管理的，不做好版本管理，你把代码改崩了，让你知道什么是痛苦。

Github是你把代码在云端存储的地方，上传到Github主要是为了下一步Vercel部署方便。

Git使用

git不用说了，基本都安装过，用Claude code要求必须安装git，用git如果懒得记那些命令，可以下载一个“小乌龟”——TortoiseGit。

![[Pasted image 20260502134620.png]]

毕竟你要求LLM给你git一次都是白花花的token，还容易污染上下文，不如自己手动搞。

这是是我建议手动提交的原因之一。

git分提交和推送，提交是提交在本地，推送是推送到Github上。只有推送成功了才能同步到Vercel上。

git提交的时候，千万主要下面两点：

1.敏感信息不要提交，比如你的key，你的账号密码，别傻兮兮全选提交，在里面筛选筛选再提交。

2.本地依赖不要提交，就是那个叫“node_modules”的文件夹，提交了在Vercel部署的时候会报错。所以把这个文件夹也摘出来。

以上也是我建议手动提交的原因之一。

git的其它详细使用方法可以问元宝或豆包。

Github仓库

没有的先注册，注册最好用谷歌邮箱账号。有了谷歌邮箱，基本啥账号都可以直接登录，方便的很。

注册好后，新增仓库，步骤如下。

![[Pasted image 20260502135637.png]]

仓库新增好后，会有一个仓库的链接。

![[Pasted image 20260502140126.png]]

推送到Github的时候，把这个链接复制到你的小乌龟里面，就能推送到这个仓库里面。

![[Pasted image 20260502140235.png]]

当然，推送会失败，因为和Github连接不稳。

![[Pasted image 20260502140512.png]]

这时候不要着急，起来走走，去干干其他事。然后再试试就能成功了。

我之前试过SSH，说是比较稳定，还没搞通，后面搞定了再出教程。

Vercel部署上线

登录Vercel

Vercel网址：https://vercel.com/ 知名大公司，不用担心安全问题。主要做前端应用云端部署平台，个人开发者可以免费使用。

腾讯也学习了他的这种方式，叫：腾讯云 EdgeOne Pages。有国际站和国内站，我昨天试了，有点点麻烦，所以先搁置了。

不过方法应该都一样，大家不放心国外的也可以用腾讯的，建议用国际站。https://pages.edgeone.ai/zh国际站可以直连Github，方便自动更新部署。

登录Vercel用Github直接登录，这点很重要。不要单独注册了，不然后续部署受限。

![[Pasted image 20260502141719.png]]

项目部署

登录后，进入下方界面：（都是纯英文界面，这里可以用谷歌翻译翻译成中文的。英文界面看起来很陌生，我想起搞咋骗的就是切换到英文界面给用户操作然后用户在不知不觉间把钱转走了哈哈哈~）

![[Pasted image 20260502142050.png]]

选择你的项目，点击“import”。然后到了这个界面，输入你的项目名字后，点击“deploy”，就开始自动部署上线了。

![[Pasted image 20260502142354.png]]

前面说过，如果你提交了“node_modules”这类的内容，自动部署会失败。还有其他的失败的原因，你把错误日志复制给你的LLM，让它帮你搞好就行，搞好后在进行提交和推送。

![[Pasted image 20260502143305.png]]

最终调试，部署成功后，就进入这个界面，左下角就是你这个网站的链接。

![[Pasted image 20260502143440.png]]

点击这个链接，就能打开你的网站了，这算是走通了一大半了。

别看现在讲起来简单，但是当时还是花费了很长时间的。

项目更新

项目上线后，如果你的项目版本有迭代，基本上会自动进行更新。在下图就可以看到所有的更新和部署记录。自动更新报错可以手动点击更新。点击下面这图的“。。。”-“Redeploy”。

![[Pasted image 20260502143926.png]]

PS：如果没有⋯，那点击黄色的警告，看警告什么，按照要求改就行。

域名解析

阿里云解析

会有这种情况，部署成功了，但是手机上打不开，这时候就需要配置个自己的域名了。

去阿里云上面买个便宜的域名，然后进入“云解析DNS”，选择你的域名，点击“解析设置”。

![[Pasted image 20260502144824.png]]

建议挂个二级域名，这样可以多挂多个网站用来玩。主机记录写你的二级域名名称或者“www”。记录值先写：“cname-china.vercel-dns.com”，后面Vercel会推荐，按照推荐改就行。

![[Pasted image 20260502145024.png]]

Vercel绑定

解析好后，到Vercel里面绑定。选择“Domains”，在点击“Add Existing”。

![[Pasted image 20260502145730.png]]

在弹窗里面，输入域名，其它就是默认，然后点击“Save”。

![[Pasted image 20260502145827.png]]

如果弹窗下方的内容，就是提示你把阿里云的解析记录，改成 Vercel 推荐的这个地址。

![[Pasted image 20260502145947.png]]

再回到阿里云解析设置那里，点击“修改”，记录值改一下。

然后，手机上点击这个域名，打开你的页面了，那就大功告成了！！！

最后

以上就是本次全部的教程内容了。作为一个不懂代码的文科生，能打通部署上线环节确实不容易。而且这也只是编程工作的一小步而已，后面还有“星辰大海”等着我去攻克呢。