一行代码不写搞定开发和上线｜Cursor + Devbox｜AI写代码｜全栈开发｜Docker｜K8S

UP主: 三分钟实验室 · 时长: 18:31 · 🔗 B站原视频

标签: Cursor · AI编程 · 全栈开发 · Devbox · 自动化部署

Cursor与Devbox：最强开发组合

你会打字，那你就能开发前端项目。你会打字和点鼠标，就能启动数据库，并完成后端开发。你以为就这？不，还有点下鼠标，打包前后端镜像，再点一下，部署，上线。没错，你的应用已经被部署在阿里云的服务器上了，并且拥有弹性伸缩、负载均衡等等K8S带来的所有能力。这就是目前两个最强的开发工具Cursor加Devbox的最强组合。大家好，欢迎来到三分钟实验室。今天我们一起来用Cursor加Devbox两个地表最强开发工具，来完成从前后端开发到部署上线的所有工作，成为真正意义上的全栈程序员。

整体开发与部署流程

开始之前先跟大家讲一下整个流程。首先我们会在Sealos的Devbox上创建一个前端开发环境、一个后端开发环境以及一个数据库，通过Cursor连接这两个环境。我们通过提示词让Cursor来编写前后端代码、操作数据库以及前后端的对接等等。因为前后端代码以及运行环境都在Devbox上，所以Devbox可以帮我们百分之百成功地一键打包镜像，一键部署到一个提供公网地址的服务器上。如果你部署过项目，懂Docker、K8S，你一定明白我在说什么。如果你不懂也没关系，关注我，我们以后都会讲。Devbox解决了除了写代码以外的所有问题，而Cursor刚好又解决了写代码的问题。所以我们就使用Cursor加Devbox，一行代码不用写、一行命令不用记的情况下来完整地开发上线一个项目。

准备工作：安装Cursor与注册Sealos

首先我们需要安装Cursor，也就是一个代码编辑器，你可以理解为是一个内置了AI的VSCode。在浏览器中搜索Cursor，下载安装就行了，这里不演示了。需要注意的是，Cursor需要用邮箱登录，会送免费体验的额度。有条件的同学体验完了之后可以付费支持一下，毕竟为好的产品买单，市场上才会出现更多好的产品。就像你们看完我的视频，如果觉得质量不错的话不要忘记点赞和投币，这样市场上才会出现更多质量更好的视频。如果你没有付费能力，就通过不停地切换邮箱注册，以此来达到白嫖的目的。第二个就是需要注册一个Sealos账号，你可以在视频简介中找到Sealos的地址，或者直接浏览器搜索Sealos找到官网进来使用。新用户加新手任务会送十几块钱，够我们用很久了。

创建后端环境与数据库

首先我们先来搞定后端开发。我们的目标是写一个To-Do-List的后端，也就是四个接口：增删改查，也就是我们上期视频手动写过的。首先我们需要一个数据库，登陆进来Sealos，在桌面上找到数据库的标志，点进来之后新建一个数据库。后端语言选择Node加Mongo数据库，如果想用其他语言、其他数据库，选择你喜欢的就好了。选择完了之后名字不改了，直接部署就行。稍等片刻数据库就变成运行中了，也就是启动成功。左下角给我们提供连接信息，先不管它。回到桌面找到Devbox，进来之后新建一个项目，语言选择Node.js。如果想使用其他语言也是一样的，直接选择就好了。拉到下面会看到有一个容器暴露端口的地方，端口写个3000。为什么写3000待会再解释，改完之后直接创建就行了。等状态变成运行中，就可以进行开发了。

连接Cursor与编写后端提示词

这里就是打开编辑软件的地方，我把它切换成Cursor了，你们也把它切换成Cursor。首先要保证电脑已经正确安装完了Cursor，然后在这个编辑器中打开。它有可能会启动两个，把没用的关掉就可以了。这样我们就远程连接成功了。Cursor的使用比较简单，直接点右上角就可以进行聊天，聊天会有代码的上下文，可以用@符号选定某个代码文件作为上下文。我们一般会用另外一个功能，也就是按住Command或Control加I打开的聊天窗口。这个聊天窗口有权限直接修改文件，比如创建文件、删除文件等等，所以开发新项目用这个比较方便。需要注意的是，在这里可以切换AI模型，请把AI模型切换成Claude 3.5 Sonnet 2024-10-22这个最新的模型，其他模型写起代码来要稍微差一点。

做完这些后，打开提示词。提示词我会放在视频简介中，你们直接打开就可以看到。我写的提示词说让他给我开发一个基于Node.js的To-Do-List后端项目，需要实现以下四个接口。我把四个接口的详细信息都写在这里了，比如接口名、功能、参数以及需要返回的值。写完这些之后直接发给它就可以了。如果想开发的项目跟我不一样，就按照这个格式去写接口要求。这里我稍微补充了一点，比如使用Mongo数据库等等，除了Mongo数据库以外的其他要求可有可无。

这里需要改写一个东西，就是数据库的连接方式。刚刚创建了一个数据库，在数据库中找到它，点眼睛图标就可以显示连接信息了。我们不需要外网访问，因为服务和数据库都是在Sealos中，通过内网访问就可以了，点击一下就可以复制。你们这里可能没有编辑权限，找个其他的地方记一下，待会写到Cursor里面就可以了。重要的是下面这三句：我让它以当前目录作为根目录，已经初始化了Node.js项目，直接修改就行了；如果需要执行命令的时候，请暂停创建文件让我执行命令。这个命令就是命令行安装一些依赖等等，Cursor是没有权限的，需要手动执行。最后我还让它为项目中的所有代码写上详细的注释，因为我们没有学过Node.js，不知道怎么使用，它写上注释之后大概一看就明白了。把提示词复制一下，回到Cursor贴进来。我们需要改一个东西，也就是数据库的连接方式。去复制一下数据库的连接方式，回到Cursor贴进来。这样就完成了提示词的编写，直接回车发送给它。

运行后端项目与接口测试

可以看到它现在已经帮我们在创建文件以及编写代码了，稍等片刻。它告诉我们写完了，通过这个命令可以启动项目。我们先接受它写的所有代码，接受完了之后复制一下命令，先把项目跑起来试试看会不会报错。现在看到了报错怎么办呢？直接把报错复制发给它就可以了。它告诉我们报错的原因是没有安装一些依赖，我们复制这两个命令在命令行执行一下。如果依赖安装得很慢，可以改一下镜像源，也就是一行命令的事。这行命令我会放在视频简介中，复制进来更换一下镜像源，直接回车执行，然后再安装依赖。依赖安装成功了，最后再运行一下项目。没有问题了，项目已经跑在了3000端口，连接成功。

为什么刚刚创建Devbox的时候要写3000呢？因为我们的项目会跑在3000端口，如果端口没有对应上，到时候项目就访问不成功。一定要保证这里的端口和刚刚创建Devbox时写的容器暴露端口保持一致。找到Devbox里面这个项目，点击详情进来，这里有个外网地址，复制一下，这就是项目的访问地址了。复制之后在这里写一点提示词，测试一下接口是否能够使用。告诉它这是根地址，让它帮忙生成这四个接口的测试用例，还有接口成功和不成功的返回值。

它已经生成了测试用例以及返回值。生成的cURL测试用例在命令行里直接执行就可以了。先执行两个试试看，比如执行添加一个新的待办事项，复制命令打开命令行直接贴进来回车。回车之后看到Success true，成功了。这里也会看到一个调用成功的日志。调用成功之后再来测试一下查询能不能用。没有问题，在数据中拿到了刚刚添加的“学习Node.js”这个项目。另外两个就不测试了，应该不会出错，因为需要ID测试比较麻烦。我们需要把接口信息以及成功响应和失败响应的这些信息都复制一下，找个地方贴进来保存一下，待会后面会用。保存完之后这个窗口就可以关掉了。

最后一步还需要修改一下.sh文件的脚本，需要修改的只是这一行命令。本来项目启动命令是node hello.js，后来改成了node app.js，所以需要把这个改成app.js。这个一定要改，要不然项目上线的时候可能会导致启动失败。到这里后端项目就开发完毕了。保证这个项目在运行的情况下，把编辑器最小化，先不要关掉。

创建前端环境与UI开发

接下来进行前端项目的开发，跟后端基本没有区别。新建项目，选择框架是Vue。如果想用Angular或者是React，选择就可以了，都一样的。继续往下，端口这里写个5173，创建。名字重复了，刚刚没有改名字，改成加个Vue，确认。等运行成功，就通过Cursor来打开这个项目。它会打开一个新的Cursor，不要把后端关了，后端项目要一直运行，待会要调这个接口，先把它最小化。

连接成功之后，同样通过Command加I打开对话窗口，复制一下提示词。这里又给大家准备好了，直接复制就行。先看一下提示词，我让它开发一个基于Vue3的To-Do-List，功能写这里，页面要求写在这里。最重要的是后面这三句：以当前项目作为根目录，已经初始化完了，直接修改就行；如果需要执行命令，请让我先执行命令；需要根据我的需求一步步思考开发，特别是UI部分一定要美化。直接复制提示词回到Cursor，在对话框中输入回车。

它让我们安装一个必要的依赖，复制一下。同样，如果安装依赖很慢，拷贝我提供的命令先执行更换一下镜像源，然后再安装依赖。安装完成之后，回复“安装完毕，执行完毕”。它现在已经帮我们生成文件和代码了，稍等片刻。它问是否可以继续，接受之前的代码之后，直接说“继续”。它说目前已经开发完毕了，开发了这么多功能，我们接受一下。接受完之后，在命令行把项目跑起来：npm run dev。

跑起来之后在浏览器中打开，目前看起来没有问题。测试一下功能，夜间模式也有了，添加一个试试，添加成功了。这里也可以进行筛选，筛选完之后点击完成，还有个进度条统计和一点点动画，可以删除。目前看起来没有任何问题。功能上如果还想优化一下UI或者其他方面，可以继续跟它沟通。比如我让它更改一下背景颜色，接收一下代码回到网页，加上了背景颜色，做了一点点美化。如果不满意还可以继续沟通，这里节省时间就不做演示了，反正都是打字很简单。目前前端功能已经搞定了。

前后端接口对接与跨域处理

我们还没有对接接口，所以下一步要进行接口对接。刚刚从后端Cursor那里复制出来的信息就用得上了，也就是关于接口如何调用以及成功和失败的响应信息。把这些东西复制一下，打开前端Cursor写提示词：“下面是关于To-Do-List的四个接口，我已经写清楚了接口信息，请你完成接口对接的工作。”把剩下的信息贴进来回车。它说已经成功了，先接受代码，回到前端刷新一下。

不出意外的情况下出了意外，在我之前测试的时候是没有出现这个问题的。如果在控制台中看到了这个问题，代表是跨域的问题，一般来说是由后端解决。如果感兴趣可以跟GPT聊聊天，把报错发给它，让它告诉你应该怎么解决、原理是什么。这里不展开了，直接讲解决方案。打开后端的Cursor，找到app.js。首先执行npm install cors，安装完之后需要引入一下，就像这样写就可以了。引入完之后要使用一下它。总共是三个事情：第一步安装，第二步引入，第三步使用。保存一下，把项目重新跑起来。回到前端刷新，你会发现跨域问题已经解决了，刚刚添加到数据库的数据也查到了。现在进行增删改查测试：增加一个新的，没有问题；完成，没有问题；删除，没有问题。刷新一下，数据还在。前端对接后端接口的功能也开发完毕了。

上线前准备与端口配置

接下来就是上线的问题了。在上线之前还有两项工作要做：打开前端代码，找到.sh结尾的文件，把npm run start改成npm run dev，这是第一件事情。第二件事情，找到package.json，找到启动命令，在dev后面（一般来说只有一个vite），加上--host 0.0.0.0。这句话什么意思先不解释了，加上就对了。更改完之后保存一下。这个时候看到项目是跑在3000端口的，所以刚刚创建Devbox时写的端口就不对了。打开刚刚创建的Vue Devbox，找到详情、变更，把端口改成3000。不管你是前端项目还是后端项目，一定要保证暴露的端口和项目运行的端口是同一个端口。改完之后变更确认。到这里，前后端项目都已经开发调试完毕了。

项目打包部署与上线总结

下一步就是上线。先上线后端，点到详情这里，发布版本。这里其实就是打包Docker镜像了，版本号写个1.0.0，描述想写就写一点，发版确定。稍等片刻，在发版的过程中主机会关机，后端的Cursor就会断联，直接叉掉就行了。发版成功之后直接点击上线，这里什么都不用改，暴露端口刚刚写的是什么就是什么，直接部署应用确认。等状态变成Running，后端项目就已经部署上线成功了。

这个时候需要复制一下公网地址，回到前端编辑器。为什么呢？因为刚刚前端请求连的是测试环境，现在已经部署上线了，是生产环境，所以需要修改一下接口地址。它已经给我们写好了，留了BaseURL，把测试环境的删了，换上生产环境的地址并保存。现在再去前端测试一下接口能不能用：修改没问题，添加没问题，删除没问题。这样后端就成功上线了。

现在来上线前端项目。同样找到前端Devbox详情，发布版本1.0.0，确认。发版时测试环境会关机，Cursor会断联，不用管它直接关掉。发版成功后点击上线，不做修改直接部署。等状态变成Running，访问一下公网地址测试功能。功能没有任何问题，前后端也就上线成功了。

给大家总结一下我们做了什么：首先在Devbox里面做了两个开发环境，用Cursor远程连接进行开发。开发完毕不用的时候就把它关机，养成好习惯。开发完之后，通过Devbox一键把应用部署到应用管理中。两个服务就已经部署在云服务器上了，可以通过公网访问。如果有自己的域名，可以在变更这里自定义换成自己的域名。至此，你的项目从开发到上线的所有流程就完成了。以上就是本期视频的所有内容，如果觉得对你有帮助，记得点赞、投币、转发、关注，我们下期视频再见。