哈罗,大家好,我是涛哥,上市公司程序员裸辞,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 网站上线部署的喂饭级教程,前端后端分分钟搞定!​" :

Leave a Reply

Your email address will not be published. Required fields are marked *

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源