Claude Code+宝塔面板：Nodejs/Next.js 网站上线部署的喂饭级教程，前端后端分分钟搞定！

哈罗，大家好，我是涛哥，上市公司程序员裸辞，All in AI，探索 AI 编程更多可能，主要使用 Claude Code 等 AI 编程工具进行开发，打造一人公司，立志在 AI 时代做出世界级产品。

现在在各种 AI 编程工具的加持下，让开发变得非常快，很多开发小白也能快速做出一个功能齐全的网站。

但是如何把做好的网站发布到线上，给其他用户访问、使用成了我们不得不面对的一个问题。

前面两篇文章， Claude 和 Cursor 的最佳拍档！宝塔面板：让 AI 开发的网站，1 小时成功上线（前端篇）和 Claude Code+宝塔面板：网站上线部署的喂饭级教程，前端后端分分钟搞定！分别写了如何一步步将用 vue 开发的前端和 go 语言开发的后端通过宝塔面板部署到线上，通过 Nginx 服务将前端后端功能结合到一起组成一个完整网站，最终给用户进行访问。

不过对于大部分刚入门 AI 编程的小白来说，可能并不能流畅地用好 go 这门语言，网上的大部分教程都推荐使用 Next.js 这个框架来完成开发，这的确是一个既能快速开发，能力又很强的选择。

Next.js 是一个非常棒的入门框架，它可以让你用现在最流行的前端技术 React 来同时构建网站的前端和后端部分，而不需要分开学习两套不同的技术。

Next.js 也是一个基于 Nodejs 实现的一个 web 框架，所以今天我就用一个 nodojs 开发的网站来作为示例，一步步教大家快速把nodejs站点部署上线：

示例网站仓库： github.com/samelltiger…

这是一个基于 Node.js 开发的前后端分离项目，专门用于实时监控和展示服务器的基本环境信息。系统通过简洁美观的界面，为用户提供服务器运行状态的实时可视化展示。

在开始教程之前，先说明一下，这个教程是接着前两个教程的，一些重复的步骤在这里教程中不会反复写，推荐先去看看第一个前端篇的教程，那个教程中有说如何购买阿里云便宜的服务器、如何安装宝塔面板等。

这个教程会从使用 Claude code 开发出这个简单的 nodejs 的网站开始，再到完成宝塔面板中网站的部署。

开发 Nodejs 网站

这个示例网站的提示词很简单，几句话就可以搞定。

这是一个使用node开发的前后端项目。
这个项目的核心功能就是用于展示服务器的基本环境信息（不涉及系统安全的基本信息）。
前端通过调用接口，每隔几秒钟自动获取最新的数据。
只需要一个展示基本信息页面就可以了（ip地址默认要用*号屏蔽，点击展示才能展示）。

Claude code 开发完之后，在终端中执行以下命令来安装并运行：

# 安装依赖
npm install

# 启动服务
npm start

打开上图中的 url：http://localhost:3000 ，网页效果图：

到这里，这个 nodejs 的网站就开发完了，这个网站非常简单，只有一个前端页面和一个后端接口。

网站已经在本地运行成功了，接下来我们要把它部署到服务器上，让所有人都能访问。在部署之前，我们需要做两个准备：一是将代码上传到服务器，二是在服务器上安装运行所需的Node.js环境。

部署 Nodejs 网站

安装 Node 软件

准备 Node 网站代码文件

为了在服务器上运行我们的代码，首先需要在宝塔面板创建一个Node网站项目，用于存放网站的项目文件。

添加 Node 项目站点

第一步，添加 Node 项目

第二步，启动服务

到这里，node 网站已经在服务器上运行起来了，上面的这个服务的端口是 3000，如果这个端口已经在服务器的安全组里开启了，那么应该是可以通过 服务器IP地址:3000 在浏览器访问了。

端口信息可以从下图中查看到：

如果无法访问，无法进入网页，那么可以参考 Claude 和 Cursor 的最佳拍档！宝塔面板：让 AI 开发的网站，1 小时成功上线（前端篇）这篇文章中安全组设置的步骤添加进去，然后再来访问。

虽然现在可以通过 IP:3000 来访问我们的网站了，但这并不是一个理想的线上访问方式。端口号不易记忆，且直接暴露后端服务存在安全隐患。通常，我们会使用Nginx作为反向代理和Web服务器，让用户通过默认的80端口（或一个干净的端口，如文中的8700）来访问（一般会配置一个域名，但是考虑到大家目前可能没有域名，所以还是使用8700端口号的方式），再由Nginx将请求转发给后台真正的Node.js服务。这样做更安全、更规范，也更便于管理。