哈罗,大家好,我是涛哥,上市公司程序员裸辞,All in AI,探索 AI 编程更多可能,主要使用 Claude Code 等 AI 编程工具进行开发,打造一人公司,立志在 AI 时代做出世界级产品。
现在在各种 AI 编程工具的加持下,让开发变得非常快,很多开发小白也能快速做出一个功能齐全的网站。
但是如何把做好的网站发布到线上,给其他用户访问、使用成了我们不得不面对的一个问题。
前面这篇文章, 【保姆级】神器 宝塔Linux面板,帮你把用AI编程工具开发的网站快速发上线 写了如何一步步将用 vue 开发的前端和 go 语言开发的后端通过宝塔面板部署到线上,通过 Nginx 服务将前端后端功能结合到一起组成一个完整网站,最终给用户进行访问。
不过对于大部分刚入门 AI 编程的小白来说,可能并不能流畅地用好 go 这门语言,网上的大部分教程都推荐使用 Next.js 这个框架来完成开发,这的确是一个既能快速开发,能力又很强的选择。
Next.js 是一个非常棒的入门框架,它可以让你用现在最流行的前端技术 React 来同时构建网站的前端和后端部分,而不需要分开学习两套不同的技术。
Next.js 也是一个基于 Nodejs 实现的一个 web 框架,所以今天我就用一个 nodojs 开发的网站来作为示例:
Nodejs示例网站仓库: https://github.com/samelltiger/node-backend-srv

这是一个基于 Node.js 开发的前后端分离项目,专门用于实时监控和展示服务器的基本环境信息。系统通过简洁美观的界面,为用户提供服务器运行状态的实时可视化展示。
在开始教程之前,先说明一下,这个教程是接着前两个教程的,一些重复的步骤在这里教程中不会反复写,推荐先去看看第一个前端篇的教程,那个教程中有说如何购买阿里云便宜的服务器、如何安装宝塔面板等。
这个教程会从使用 Claude code 开发出这个简单的 nodejs 的网站开始,再到完成宝塔面板中网站的部署。
开发 Nodejs 网站
这个示例网站的提示词很简单,几句话就可以搞定。当然你也可以直接去上面的GitHub仓库地址里面去下载。
代码块 这是一个使用node开发的前后端项目。 这个项目的核心功能就是用于展示服务器的基本环境信息(不涉及系统安全的基本信息)。 前端通过调用接口,每隔几秒中自动获取最新的数据。 只需要一个展示基本信息页面就可以了(ip地址默认要用*号屏蔽,点击展示才能展示)。
Claude code 开发完之后,在终端中执行以下命令来安装并运行:
代码块 # 安装依赖 npm install # 启动服务 npm start

打开上图中的 url:https://localhost:3000 ,网页效果图:

为了更好的阅读体验,来飞书看吧:
https://egtmutdg24.feishu.cn/docx/NabXdXqiCoZNtNx7ourci8rWn5c
Comments on "Claude Code+宝塔面板:Nodejs/Next.js 网站上线部署的喂饭级教程,前端后端分分钟搞定!" :