爆肝 2 月，我的 AI 代码生成平台上线了！ - 程序员鱼皮
大家好，我是程序员鱼皮。经过近 2 个月的奋斗，我带大家开发的新项目《AI 零代码应用生成平台》进入尾声。
这是一套以 AI 开发实战 + 后端架构设计为核心的项目教程，基于 Spring Boot 3 + LangChain4j + LangGraph4j + Vue 3 开发的对标大厂的 企业级 AI 代码生成平台，带大家掌握新时代程序员必知必会的 AI 智能体开发、AI 工作流等前沿技术，大幅提升求职竞争力！
我带大家开发了多种模式的应用生成、可视化修改、AI 图片搜集、持久化对话记忆、一键部署等功能：
我已经录制了几十个小时的视频教程，而且光是文字教程就 15w 字，妥妥一本书的量！可想而知我最近掉了多少头发。。。
这篇文章是一个保姆级的项目前后端部署上线教程，来跟着鱼皮一步一步把这个项目上线吧！
推荐观看视频版：https://bilibili.com/video/BV1Kwb6zLEee
大纲
- \n 服务器初始化\n
- \n 部署规划\n
- \n 安装依赖\n
- \n 后端部署\n
- \n 前端部署\n
- \n 应用部署\n
- \n 测试验证\n
- \n 扩展知识\n 服务器初始化
部署规划
安装依赖
后端部署
前端部署
应用部署
测试验证
扩展知识
一、服务器初始化
首先购买一台服务器，推荐选择轻量应用服务器，提供了很多开箱即用的模板，帮我们预装了环境和软件，省时省力。
鱼皮这里选择一台预装了 1Panel Linux 面板的轻量应用服务器，配置为 2 核 2 G，部署咱们的项目足够了。但是不能低于这个配置，否则卡爆！
应用模板一般选择最新版本就好了，如下图：
1Panel 是一个现代化、开源的 Linux 服务器运维管理面板，跟宝塔 Linux 类似。提供可视化的服务器管理界面，支持应用商店、容器管理、文件管理、数据库管理等功能，适合中小团队或者个人学习使用，告别使用黑漆漆的命令行来操作服务器。
购买好服务器后，进入服务器控制台的应用管理页，登录 1Panel 面板。首次登录时，需要先登录服务器，通过输入命令的方式获取面板的默认账号密码，如图：
点击登录后，进入到 web 终端，复制脚本并执行，根据指示更新自己设置的密码：
根据终端输出的信息，访问面板，输入初始用户名和密码。然后成功登入面板，豁然开朗，服务器的状态尽收眼底！
二、部署规划
在正式操作前后端部署前，我们要先进行一个规划，比如要部署哪些项目和服务、需要哪些依赖、占用哪些端口等。
1、获取源码
本项目代码完全开源：https://github.com/liyupi/yu-ai-code-mother
后续这个项目会改造为微服务，建议新手学习和部署根目录的后端项目，使用传统的分层架构。
2、部署方案
为了提高效率，本项目前端和后端均使用 1Panel 面板进行部署。
涉及到具体的部署方式：
1）前端：遵循 Vue 项目的部署模式，基于 Nginx 运行
2）后端：直接运行 Jar 包进行部署
注意，强烈不建议通过 Docker 来部署本项目的后端！因为涉及到 NPM 命令执行、依赖安装、Selenium 自动化操作浏览器、文件持久化等，制作 Docker 的成本会很大，而且有可能出现内存不足。
此外，这个项目还涉及到部署 AI 生成的应用，需要利用 Nginx 配置进行代理。
鱼皮在编程导航带大家做过十几套项目了，几乎每种部署方式都给大家讲解过，可以按需学习。
3、地址规划
前端：通过 Nginx 提供网站访问服务，访问地址为 http://{域名}。
后端：通过 Nginx 进行转发，访问地址为 http://{域名}/api，实际运行在 8123 端口
AI 生成的应用：通过 Nginx 提供网站访问服务，根据请求地址转发到不同的应用，访问地址为 http://{域名}/dist（如果你有多个域名的话，那就不需要子路径来映射）
💡 注意，使用 Nginx 转发是为了让前端和后端域名一致，保证不会出现跨域问题。
4、端口规划
等下我们会依次安装依赖，端口占用情况如下：
需要在服务器控制台的防火墙中开通需要外网访问的服务端口，比如 MySQL 和 Redis：
三、安装依赖
1、Nginx
进入网站板块，面板会提醒我们安装 OpenResty：
OpenResty 是一个基于 Nginx 与 Lua 集成的高性能 Web 平台，可用于快速开发高并发、可扩展的 Web 应用、网关等。
简单来说，它是对 Nginx 的增强，为了便于理解，后面我们统一称为 Nginx。
安装 OpenResty，使用默认配置即可：
安装中，可以看到其实面板是通过容器来运行应用的：
进入到网站板块，看到 OpenResty 成功运行：
访问服务器地址，能看到 Nginx 字样就表示安装成功：
2、MySQL
进入数据库板块去安装：
安装时选择 8.x 版本、修改 Root 密码、开启端口外部访问：
安装完成后，可以看到 MySQL 已启动：
先为后端项目创建一个数据库。数据库名称和我们项目需要的数据库名称保持一致（此处为 yu_ai_code_mother），注意用户名、密码和访问权限：
创建成功，可以看到数据库的信息。尝试利用数据库管理软件连接数据库，比如在 IDEA 中打开后端项目，通过数据库面板在本地检查连接是否正常：
执行鱼皮提供的 SQL 脚本，初始化库表：
记得看一下数据库表是否创建成功。
3、Redis
进入数据库面板的 Redis 标签页，安装 Redis：
版本选择默认的即可，需要配置密码、开启远程访问：
安装完成后，在 IDEA 数据库面板中验证本地能否连接远程 Redis：
4、Java 环境
JDK 是运行后端项目的基础。虽然 1Panel 也提供了可视化配置 Java 运行环境的方式，但是跟应用是强绑定的，封装在容器内，而我们需要后端项目能调用终端执行 NPM 命令和应用截图等操作，所以需要手动安装。
可以利用 SDKMAN 快速安装和管理 JDK 等依赖。
SDKMAN 需要用到压缩和解压缩命令，因此需要先进入终端安装这些命令：
然后执行命令来安装 SDKMAN：
安装后，查看可用的 Java 版本，本项目一定要选择 JDK 21！
接下来安装 JDK 21 并设置为默认版本：
5、Node.js 环境
本项目的业务中，生成 Vue 工程项目时需要打包构建、AI 工作流生成架构图时也需要用到 Mermaid CLI 等，这些都依赖 Node.js 环境和 NPM 包管理工具。
直接去 Node.js 官网安装，选择 Linux 系统，会看到一堆命令，作用是安装 nvm 这样一个 Node.js 管理器：
复制命令到终端执行：
6、Chrome 浏览器
由于本项目包含 Selenium 网页截图功能，需要安装一个浏览器，首推 Chrome。
执行下列命令即可安装：
还要安装中文字体，否则网页无法显示中文（这里我让 AI 帮我随便选了，也可以安装别的）：
7、其他服务
项目还用到了一些第三方服务，比如腾讯云 COS 对象存储、DeepSeek API、阿里云百炼 API，可以去对应的官网开通。
接下来，我们依次进行后端和前端部署。
四、后端部署
1、编写生产环境配置
修改 application-prod 生产环境配置，包括数据库、Redis、对象存储、各种大模型的 API Key 等，替换为上述安装依赖时指定的配置（如用户名、密码）。
注意，为了性能和安全，最好关闭 MyBatis Flex 的日志、以及 AI 相关的日志，还要给 Knife4j 接口文档设置用户名和密码。
配置代码较长，可以在开源项目获取：https://github.com/liyupi/yu-ai-code-mother
2、打包运行
首先更改 pom.xml 文件的打包配置，删除掉 maven 插件配置的 excludes 块，否则可能打包时会遇到报错。
在 IDEA 中打开后端项目，忽略测试并打包：
打包成功，得到 jar 包文件：
建议先在本地终端输入命令以 prod 模式运行 jar 包，看看项目能否正常启动：
发现项目可以正常运行、各个功能也都正常，再进行后续操作：
3、部署到服务器
将打好的 jar 包通过面板上传到服务器的指定目录下，我这里是/project/yu-ai-code-mother-backend：
接下来进入 jar 包所在目录/project/yu-ai-code-mother-backend 的终端，先在前台运行 jar 包：
查看输出信息，确定项目启动成功：
然后在后台运行 jar 包，这样终端关闭后项目依然会运行：
可以在 jar 包相同目录下看到日志文件：
4、Nginx 配置
后端转发配置
我们的预期是：如果访问的是后端接口（地址有/api 前缀），则 Nginx 将请求转发到后端服务。
先创建一个网站（相当于新建 Nginx 站点），选择反向代理类型，域名填写当前服务器 IP 或者自己的域名，代号最好用项目名称：
创建好网站后，编辑反向代理的配置：
修改反向代理的前端请求路径为/api，修改后的配置如图：
SSE 配置
我们为了防止 AI 生成的 SSE 请求超时，需要修改反向代理配置。
由于 Nginx 是通过容器部署，需要找到容器内/www 对应挂载的服务器目录：
找到实际的反向代理配置文件，加上一行配置：
现在就能够直接通过 80 端口（可省略）正常访问后端接口文档：
输入密码后就看到接口文档了：
五、前端部署
前端部署可以参考 Vite 官方文档，分为编写生产环境配置、打包构建、部署和 Nginx 配置这 4 个步骤。
1、编写生产环境配置
新建.env.production 文件，直接使用相对路径，这样前端域名、请求域名和生成网站的部署域名都保持一致，解决跨域和同源问题。
2、打包构建
直接执行前端项目 package.json 文件中的 build 命令：
构建成功后，可以看到 dist 目录：
构建失败怎么办？
常见的构建失败原因是类型校验错误，这是由于脚手架内置的 build 命令会执行类型检查，如果项目代码中有任何类型不规范的地方，都会导致打包失败！
虽然可以自己一个个修复类型，但是太影响效率了，得不偿失，所以引入一个不执行类型检查的构建命令。
在 package.json 文件中定义 pure-build 命令：
然后执行 pure-build 命令，执行打包构建即可。
注意，如果 Node.js 版本较低，也可能会构建失败，这时可以到官网安装更新的版本，最好 >= 20 版本。
3、部署到服务器
一般来说，用户无法直接访问服务器上的文件，需要使用 Nginx 提供静态文件的访问能力。
把 dist 目录内的所有文件上传到服务器上，为了方便，直接上传到之前配置的网站的 root 目录下：
如图：
但是，如果访问服务器，你会发现还是默认网站。也就是说，默认并没有从 1Panel 的网站目录加载网站！需要我们手动修改 Nginx 配置。
4、Nginx 配置
查看 Nginx 配置文件，果然缺少 root 网站根目录配置：
加上一行配置就好：
然后输入服务器 IP（或者你配置的域名）就能访问了：
但是经过验证，目前访问除了主页外的其他页面（比如/user/login），如果刷新页面，就会出现 404 错误。
这个问题是由于 Vue 是单页面应用（前端路由），打包后的文件只有 index.html，服务器上不存在对应的页面文件（比如/user/login.html），所以需要在 Nginx 配置访问规则。如果找不到某个页面文件，就加载主页 index.html 文件。
修改 Nginx 配置，补充下列代码：
保存并重载配置后，再次刷新页面，可以正常访问。
六、应用部署
这个项目比较特殊，除了前后端部署外，还需要为 AI 生成的应用提供部署地址。
由于前端是通过 Nginx 容器部署的，有些服务器上的文件路径是无法直接在容器内访问到的，除非利用容器的挂载能力。
前面也提到了，Nginx 的/www 路径映射到了服务器本机目录，也就是说 Nginx 能访问到/opt/1panel/www 路径下的文件，这就是一个突破口，后端只要把 AI 生成的应用也存放到这个路径下就可以了。
这里我们约定，后端需要确保在/www/sites/yu-ai-code-mother/tmp 目录下生成临时文件。最简单的办法就是把 jar 包移动到这个/www/sites/yu-ai-code-mother 目录下运行（或者通过配置文件修改后端写入文件的路径）。
直接复制 jar 包：
关闭之前已经启动的进程，然后执行命令重新启动 jar 包。
修改前端的 Nginx 配置，配置请求/dist 路径时到项目部署根目录去寻找网页文件：
七、测试验证
最后，我们来对上线效果进行验证。
1）用户注册登录
然后通过修改数据库的方式，将该用户的角色设置为管理员，从而使用更多功能。
2）进入主页，和 AI 对话来生成一个网站：
3）进入对话页面，发现 AI 自动选择了生成模式，并且能够流式输出代码：
4）网站生成完后，可以立刻看到生成的效果：
还可以查看生成的应用详情，支持修改和删除自己的应用信息：
5）再来生成一个更复杂的网站，通过 AI 智能路由触发 Vue 工程项目生成模式。
可以实时看到工具调用的过程，并且在完成后自动构建，然后展示出网站的运行效果：
6）可以进入编辑模式，可视化修改网站的内容：
很快就修改完成了，效果如图：
7）部署生成的应用：
能够访问到部署的网站应用：
8）部署网站成功后，稍等一会儿回到主页，可以看到自动生成了应用的封面图：
9）管理员可以管理和精选应用：
过几分钟后（有缓存），主页就会展示出精选应用啦。至此，网站部署完成！
最后
我个人感觉对新手来说，1Panel 不如宝塔面板更友好，毕竟全容器操作，新手很容易在路径和依赖上踩一些坑。
至此，整个项目已经完成上线，希望大家能通过这个项目掌握企业级 AI 项目的开发、优化和上线方法，得到全方面编程能力和 AI 应用开发技巧的提升。
最后再次强调，本项目代码完全开源（暗示 star 嘿嘿）：https://github.com/liyupi/yu-ai-code-mother
完整教程编程导航可见，感兴趣的同学欢迎来跟我学习新项目~
更多编程学习资源
- \nJava 前端程序员必做项目实战教程 + 毕设网站\n
- \n 程序员免费编程学习交流社区（自学必备）\n
- \n 程序员保姆级求职写简历指南（找工作必备）\n
- \n 程序员免费面试刷题网站工具（找工作必备）\n
- \n 最新 Java 零基础入门学习路线 + Java 教程\n
- \n 最新 Python 零基础入门学习路线 + Python 教程\n
- \n 最新前端零基础入门学习路线 + 前端教程\n
- \n 最新数据结构和算法零基础入门学习路线 + 算法教程\n
- \n 最新 C++ 零基础入门学习路线、C++ 教程\n
- \n 最新数据库零基础入门学习路线 + 数据库教程\n
- \n 最新 Redis 零基础入门学习路线 + Redis 教程\n
- \n 最新计算机基础入门学习路线 + 计算机基础教程\n
- \n 最新小程序入门学习路线 + 小程序开发教程\n
- \n 最新 SQL 零基础入门学习路线 + SQL 教程\n
- \n 最新 Linux 零基础入门学习路线 + Linux 教程\n
- \n 最新 Git/GitHub 零基础入门学习路线 + Git 教程\n
- \n 最新操作系统零基础入门学习路线 + 操作系统教程\n
- \n 最新计算机网络零基础入门学习路线 + 计算机网络教程\n
- \n 最新设计模式零基础入门学习路线 + 设计模式教程\n
- \n 最新软件工程零基础入门学习路线 + 软件工程教程\n Java 前端程序员必做项目实战教程 + 毕设网站
程序员免费编程学习交流社区（自学必备）
程序员保姆级求职写简历指南（找工作必备）
程序员免费面试刷题网站工具（找工作必备）
最新 Java 零基础入门学习路线 + Java 教程
最新 Python 零基础入门学习路线 + Python 教程
最新前端零基础入门学习路线 + 前端教程
最新数据结构和算法零基础入门学习路线 + 算法教程
最新 C++ 零基础入门学习路线、C++ 教程
最新数据库零基础入门学习路线 + 数据库教程
最新 Redis 零基础入门学习路线 + Redis 教程
最新计算机基础入门学习路线 + 计算机基础教程
最新小程序入门学习路线 + 小程序开发教程
最新 SQL 零基础入门学习路线 + SQL 教程
最新 Linux 零基础入门学习路线 + Linux 教程
最新 Git/GitHub 零基础入门学习路线 + Git 教程
最新操作系统零基础入门学习路线 + 操作系统教程
最新计算机网络零基础入门学习路线 + 计算机网络教程
最新设计模式零基础入门学习路线 + 设计模式教程
最新软件工程零基础入门学习路线 + 软件工程教程