爆肝2月，我的 AI 代码生成平台上线了！

风澜松叶 發表於 2025-8-15 11:06:00

爆肝2月，我的 AI 代码生成平台上线了！

大家好，我是程序员鱼皮。经过近 2 个月的奋斗，我带大家开发的新项目 《AI 零代码应用生成平台》 进入尾声。
这是一套以 AI 开发实战 + 后端架构设计 为核心的项目教程，基于 Spring Boot 3 + LangChain4j + LangGraph4j + Vue 3 开发的 对标大厂 的企业级 AI 代码生成平台，带大家掌握新时代程序员必知必会的 AI 智能体开发、AI 工作流等前沿技术，大幅提升求职竞争力！
<img src="https://pic.yupi.icu/1/1753332293578-0ccc2a53-6d98-41a7-b714-16fa6a7f095f-20250814154720271.png">
我带大家开发了多种模式的应用生成、可视化修改、AI 图片搜集、持久化对话记忆、一键部署等功能：
<img src="https://pic.yupi.icu/1/1753332451827-220a1df9-ea60-4646-bea0-64e5f73d15fe-20250814154743041.png">
我已经录制了几十个小时的视频教程，而且光是文字教程就 15w 字，妥妥一本书的量！可想而知我最近掉了多少头发。。。
<img src="https://pic.yupi.icu/1/image-20250814155338652.png">
 
这篇文章是一个保姆级的项目前后端部署上线教程，来跟着鱼皮一步一步把这个项目上线吧！
<blockquote>
推荐观看视频版：https://bilibili.com/video/BV1Kwb6zLEee
</blockquote>
 
<h2 class="md-end-block md-heading">大纲</h2>
<ol class="ol-list" start="">
<li class="md-list-item">
服务器初始化
</li>
<li class="md-list-item">
部署规划
</li>
<li class="md-list-item">
安装依赖
</li>
<li class="md-list-item">
后端部署
</li>
<li class="md-list-item">
前端部署
</li>
<li class="md-list-item">
应用部署
</li>
<li class="md-list-item">
测试验证
</li>
<li class="md-list-item">
扩展知识
</li>
</ol>
 
<h2 class="md-end-block md-heading">一、服务器初始化</h2>
首先购买一台服务器，推荐选择轻量应用服务器，提供了很多开箱即用的模板，帮我们预装了环境和软件，省时省力。
鱼皮这里选择一台预装了 <code>1Panel Linux 面板</code> 的轻量应用服务器，配置为 2 核 2 G，部署咱们的项目足够了。但是不能低于这个配置，否则卡爆！
应用模板一般选择最新版本就好了，如下图：
<img src="https://pic.yupi.icu/1/1754550210677-252e51ca-587e-4b10-af42-3106f5b625c8.png">
 
1Panel 是一个现代化、开源的 Linux 服务器运维管理面板，跟宝塔 Linux 类似。提供可视化的服务器管理界面，支持应用商店、容器管理、文件管理、数据库管理等功能，适合中小团队或者个人学习使用，告别使用黑漆漆的命令行来操作服务器。
购买好服务器后，进入服务器控制台的应用管理页，登录 1Panel 面板。首次登录时，需要先登录服务器，通过输入命令的方式获取面板的默认账号密码，如图：
<img src="https://pic.yupi.icu/1/1754550598498-afdd8844-f94e-4961-b927-94dde0c101c7.png">
 
点击登录后，进入到 web 终端，复制脚本并执行，根据指示更新自己设置的密码：
<img src="https://pic.yupi.icu/1/1754550810288-36bb7168-d037-470b-a3d5-5c6a94e83dac.png">
 
根据终端输出的信息，访问面板，输入初始用户名和密码。然后成功登入面板，豁然开朗，服务器的状态尽收眼底！
<img src="https://pic.yupi.icu/1/1754558605570-6e7f0c09-dcb3-4413-acba-05dac73d3db3.png">
 
 
<h2 class="md-end-block md-heading">二、部署规划</h2>
在正式操作前后端部署前，我们要先进行一个规划，比如要部署哪些项目和服务、需要哪些依赖、占用哪些端口等。
 
<h3 class="md-end-block md-heading">1、获取源码</h3>
本项目代码完全开源：https://github.com/liyupi/yu-ai-code-mother
后续这个项目会改造为微服务，建议新手学习和部署根目录的后端项目，使用传统的分层架构。
<img src="https://pic.yupi.icu/1/1754551266937-fcffbff7-f315-4d5c-b81e-b504bb2cdac8.png">
 
<h3 class="md-end-block md-heading">2、部署方案</h3>
为了提高效率，本项目前端和后端均使用 1Panel 面板进行部署。
涉及到具体的部署方式：
1）前端：遵循 Vue 项目的部署模式，基于 Nginx 运行
2）后端：直接运行 Jar 包进行部署
注意，强烈不建议通过 Docker 来部署本项目的后端！因为涉及到 NPM 命令执行、依赖安装、Selenium 自动化操作浏览器、文件持久化等，制作 Docker 的成本会很大，而且有可能出现内存不足。
此外，这个项目还涉及到部署 AI 生成的应用，需要利用 Nginx 配置进行代理。
<blockquote>
鱼皮在 编程导航 带大家做过十几套项目了，几乎每种部署方式都给大家讲解过，可以按需学习。
</blockquote>
 
<h3 class="md-end-block md-heading">3、地址规划</h3>
前端：通过 Nginx 提供网站访问服务，访问地址为 <code>http://{域名}</code>。
后端：通过 Nginx 进行转发，访问地址为 <code>http://{域名}/api</code>，实际运行在 8123 端口
AI 生成的应用：通过 Nginx 提供网站访问服务，根据请求地址转发到不同的应用，访问地址为 <code>http://{域名}/dist</code>（如果你有多个域名的话，那就不需要子路径来映射）
💡 注意，使用 Nginx 转发是为了让前端和后端域名一致，保证不会出现跨域问题。
 
<h3 class="md-end-block md-heading">4、端口规划</h3>
等下我们会依次安装依赖，端口占用情况如下：
<table class="md-table">
<thead>
<tr class="md-end-block"><th>组件</th><th>端口</th><th>作用</th></tr>
</thead>
<tbody>
<tr class="md-end-block">
<td>Nginx</td>
<td>80</td>
<td>Web服务器，处理 HTTP 请求和反向代理</td>
</tr>
<tr class="md-end-block">
<td>数据库</td>
<td>3306</td>
<td>数据存储，管理应用的持久化数据</td>
</tr>
<tr class="md-end-block">
<td>Redis</td>
<td>6379</td>
<td>缓存服务，提供高性能的内存数据存储</td>
</tr>
</tbody>
</table>
 
需要在服务器控制台的防火墙中开通需要外网访问的服务端口，比如 MySQL 和 Redis：
<img src="https://pic.yupi.icu/1/1754552513258-e42cbb36-e946-4d5c-9552-741ce1d31d6a.png">
 
<h2 class="md-end-block md-heading">三、安装依赖</h2>
<h3 class="md-end-block md-heading">1、Nginx</h3>
进入 <code>网站</code> 板块，面板会提醒我们安装 OpenResty：
<img src="https://pic.yupi.icu/1/1754552649618-8f5ed5d8-d8cd-4678-89aa-fa3bc1714e4a.png">
 
OpenResty 是一个基于 Nginx 与 Lua 集成的高性能 Web 平台，可用于快速开发高并发、可扩展的 Web 应用、网关等。
简单来说，它是对 Nginx 的增强，为了便于理解，后面我们统一称为 Nginx。
安装 OpenResty，使用默认配置即可：
<img src="https://pic.yupi.icu/1/1754552680730-4856d552-c688-46b7-928e-2745fb4102d7.png">
 
安装中，可以看到其实面板是通过容器来运行应用的：
<img src="https://pic.yupi.icu/1/1754553451925-395f9fcc-c400-4c66-b17c-524039c9380d.png">
 
进入到 <code>网站</code> 板块，看到 OpenResty 成功运行：
<img src="https://pic.yupi.icu/1/1754553480960-738b8428-df99-48f1-90c0-91a7d51481be.png">
 
访问服务器地址，能看到 Nginx 字样就表示安装成功：
<img src="https://pic.yupi.icu/1/1754553497363-f0362e44-4699-4537-9621-e2b5ef1fbc51.png">
 
<h3 class="md-end-block md-heading">2、MySQL</h3>
进入 <code>数据库</code> 板块去安装：
<img src="https://pic.yupi.icu/1/1754553585763-a36e3a61-7769-4224-a852-48518089b073.png">
 
安装时选择 8.x 版本、修改 Root 密码、开启端口外部访问：
<img src="https://pic.yupi.icu/1/1754558693358-9d3d9c60-ddc2-4eea-94e8-a1c2af769a90.png">
 
安装完成后，可以看到 MySQL 已启动：
<img src="https://pic.yupi.icu/1/1754553791150-c53ee55d-df8f-4c7e-95ab-af6a94da43e5.png">
 
先为后端项目创建一个数据库。数据库名称和我们项目需要的数据库名称保持一致（此处为 <code>yu_ai_code_mother</code>），注意用户名、密码和访问权限：
<img src="https://pic.yupi.icu/1/1754553901578-24df3ac6-9a80-4b4e-9190-182f640a79cb.png">
 
创建成功，可以看到数据库的信息。尝试利用数据库管理软件连接数据库，比如在 IDEA 中打开后端项目，通过数据库面板在本地检查连接是否正常：
<img src="https://pic.yupi.icu/1/1754558907951-f4027257-e75f-43c5-a6df-096d43b73ff9.png">
 
执行鱼皮提供的 SQL 脚本，初始化库表：
<img src="https://pic.yupi.icu/1/1754559078826-65198dbe-6d7d-46b3-8689-aa8bb3b9b2e9.png">
记得看一下数据库表是否创建成功。
 
<h3 class="md-end-block md-heading">3、Redis</h3>
进入 <code>数据库</code> 面板的 Redis 标签页，安装 Redis：
<img src="https://pic.yupi.icu/1/1754559115451-bef155eb-5051-4722-a1c9-2f5f7e716948.png">
 
版本选择默认的即可，需要配置密码、开启远程访问：
<img src="https://pic.yupi.icu/1/1754559194393-be5d70d3-433f-4611-9a36-990c4da93f48.png">
 
安装完成后，在 IDEA 数据库面板中验证本地能否连接远程 Redis：
<img src="https://pic.yupi.icu/1/1754559321072-f5ce0b2f-b1a5-45ab-9cfd-318f71b1eb22.png">
 
<h3 class="md-end-block md-heading">4、Java 环境</h3>
JDK 是运行后端项目的基础。虽然 1Panel 也提供了可视化配置 Java 运行环境的方式，但是跟应用是强绑定的，封装在容器内，而我们需要后端项目能调用终端执行 NPM 命令和应用截图等操作，所以需要手动安装。
<img src="https://pic.yupi.icu/1/1754658632523-69cb384f-5a77-43ad-8645-4b9b6a8eb307.png">
 
可以利用 SDKMAN 快速安装和管理 JDK 等依赖。
SDKMAN 需要用到压缩和解压缩命令，因此需要先进入终端安装这些命令：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">sudo apt install zip unzip -y</pre>
<img src="https://pic.yupi.icu/1/1754652279941-6138ec17-933f-447e-923a-aee3b1228f7c.png">
 
然后执行命令来安装 SDKMAN：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">curl -s "https://get.sdkman.io" | bash</pre>
 
安装后，查看可用的 Java 版本，本项目一定要选择 JDK 21！
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">sdk list java</pre>
 
接下来安装 JDK 21 并设置为默认版本：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"># 安装 sdk install java 21.0.8-amzn # 设置为默认版本 sdk default java 21.0.8-amzn</pre>
 
<h3 class="md-end-block md-heading">5、Node.js 环境</h3>
本项目的业务中，生成 Vue 工程项目时需要打包构建、AI 工作流生成架构图时也需要用到 Mermaid CLI 等，这些都依赖 Node.js 环境和 NPM 包管理工具。
直接去 Node.js 官网 安装，选择 Linux 系统，会看到一堆命令，作用是安装 nvm 这样一个 Node.js 管理器：
<img src="https://pic.yupi.icu/1/1754578428412-b52746c8-dda5-4075-8e4c-bbcd284f3dc4.png">
 
复制命令到终端执行：
<img src="https://pic.yupi.icu/1/1754578727891-1934d775-5a0c-49b1-8ba6-8d39f7369593.png">
 
<h3 class="md-end-block md-heading">6、Chrome 浏览器</h3>
由于本项目包含 Selenium 网页截图功能，需要安装一个浏览器，首推 Chrome。
执行下列命令即可安装：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">curl -fsSL https://dl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/google-chrome.gpg && echo"deb http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee/etc/apt/sources.list.d/google-chrome.list && sudo apt update && sudo apt install -y google-chrome-stable</pre>
还要安装中文字体，否则网页无法显示中文（这里我让 AI 帮我随便选了，也可以安装别的）：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">sudo apt install -y fonts-wqy-zenhei fonts-noto-cjk && sudo fc-cache -fv</pre>
 
<h3 class="md-end-block md-heading">7、其他服务</h3>
项目还用到了一些第三方服务，比如 腾讯云 COS 对象存储、DeepSeek API、阿里云百炼 API，可以去对应的官网开通。
接下来，我们依次进行后端和前端部署。
 
<h2 class="md-end-block md-heading">四、后端部署</h2>
<h3 class="md-end-block md-heading">1、编写生产环境配置</h3>
修改 <code>application-prod</code> 生产环境配置，包括数据库、Redis、对象存储、各种大模型的 API Key 等，替换为上述安装依赖时指定的配置（如用户名、密码）。
注意，为了性能和安全，最好关闭 MyBatis Flex 的日志、以及 AI 相关的日志，还要给 Knife4j 接口文档设置用户名和密码。
配置代码较长，可以在开源项目获取：https://github.com/liyupi/yu-ai-code-mother
 
<h3 class="md-end-block md-heading">2、打包运行</h3>
首先更改 <code>pom.xml</code> 文件的打包配置，删除掉 maven 插件配置的 <code>excludes</code> 块，否则可能打包时会遇到报错。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><excludes>    <exclude>        <groupId>org.projectlombok</groupId>        <artifactId>lombok</artifactId>        <version>1.18.38</version>    </exclude> </excludes></pre>
 
在 IDEA 中打开后端项目，忽略测试并打包：
<img src="https://pic.yupi.icu/1/1754560020162-00db8d92-50f4-4868-a49a-11817359f886.png">
 
打包成功，得到 jar 包文件：
<img src="https://pic.yupi.icu/1/1754560367568-3e30e423-0af2-437d-8656-5b2e78b34c3f.png">
 
建议先在本地终端输入命令以 prod 模式运行 jar 包，看看项目能否正常启动：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">java -jar yu-ai-code-mother-0.0.1-SNAPSHOT.jar --spring.active.profiles=prod</pre>
 
发现项目可以正常运行、各个功能也都正常，再进行后续操作：
<img src="https://pic.yupi.icu/1/1754560740775-35be6a3a-cfb5-47e8-8d2a-e5afef34445b.png">
 
<h3 class="md-end-block md-heading">3、部署到服务器</h3>
将打好的 jar 包通过面板上传到服务器的指定目录下，我这里是 <code>/project/yu-ai-code-mother-backend</code>：
<img src="https://pic.yupi.icu/1/1754658704352-7273c067-e56b-43bb-b4e3-8bdea29254a3.png">
 
接下来进入 jar 包所在目录 <code>/project/yu-ai-code-mother-backend</code> 的终端，先在前台运行 jar 包：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">java -jar yu-ai-code-mother-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod</pre>
 
查看输出信息，确定项目启动成功：
<img src="https://pic.yupi.icu/1/1754659251621-0358728e-c69e-4168-af8f-000726b8359a.png">
 
然后在后台运行 jar 包，这样终端关闭后项目依然会运行：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">nohup java -jar yu-ai-code-mother-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod > app.log 2>&1 &</pre>
 
可以在 jar 包相同目录下看到日志文件：
<img src="https://pic.yupi.icu/1/1754659322461-aa11b880-50c1-4fd7-86c2-e252627440be.png">
 
<h3 class="md-end-block md-heading">4、Nginx 配置</h3>
<h4 class="md-end-block md-heading">后端转发配置</h4>
我们的预期是：如果访问的是后端接口（地址有 <code>/api</code> 前缀），则 Nginx 将请求转发到后端服务。
先创建一个网站（相当于新建 Nginx 站点），选择 <code>反向代理</code> 类型，域名填写当前服务器 IP 或者自己的域名，代号最好用项目名称：
<img src="https://pic.yupi.icu/1/1754575773492-f27eca58-3b7a-4c60-92b3-9462934a9ca3.png">
 
创建好网站后，编辑反向代理的配置：
<img src="https://pic.yupi.icu/1/1754575842807-95e44143-8a43-4cd4-92a4-75bd4d0d847b.png">
 
修改反向代理的前端请求路径为 <code>/api</code>，修改后的配置如图：
<img src="https://pic.yupi.icu/1/1754575421590-f9be6edd-e4e9-4d70-b3d8-51ef2c77f41e.png">
 
<h4 class="md-end-block md-heading">SSE 配置</h4>
我们为了防止 AI 生成的 SSE 请求超时，需要修改反向代理配置。
由于 Nginx 是通过容器部署，需要找到容器内 <code>/www</code> 对应挂载的服务器目录：
<img src="https://pic.yupi.icu/1/1754580348337-12e18156-9acd-4c06-a0bc-5567a3962594.png">
 
找到实际的反向代理配置文件，加上一行配置：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">proxy_read_timeout 900s; # 读取超时延长，避免长连接被中断</pre>
<img src="https://pic.yupi.icu/1/1754647430740-8b9b4589-ecf6-49fc-97ce-d46dd9ea85fb.png">
 
现在就能够直接通过 80 端口（可省略）正常访问后端接口文档：
<img src="https://pic.yupi.icu/1/1754575271157-6d434839-7019-49a2-b72e-be36883e1a30.png">
 
输入密码后就看到接口文档了：
<img src="https://pic.yupi.icu/1/1754575377362-6c1b987c-f438-4f58-adf9-4091138abee2.png">
 
<h2 class="md-end-block md-heading">五、前端部署</h2>
前端部署可以参考 Vite 官方文档，分为编写生产环境配置、打包构建、部署和 Nginx 配置这 4 个步骤。
 
<h3 class="md-end-block md-heading">1、编写生产环境配置</h3>
新建 <code>.env.production</code> 文件，直接使用相对路径，这样前端域名、请求域名和生成网站的部署域名都保持一致，解决跨域和同源问题。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">VITE_DEPLOY_DOMAIN=/dist VITE_API_BASE_URL=/api</pre>
 
<h3 class="md-end-block md-heading">2、打包构建</h3>
直接执行前端项目 <code>package.json</code> 文件中的 <code>build</code> 命令：
<img src="https://pic.yupi.icu/1/1754579287143-af31f3a2-b94c-4a9d-9ce9-73d55cf9c1c1.png">
 
构建成功后，可以看到 dist 目录：
<img src="https://pic.yupi.icu/1/1754579309738-a62ec2f4-7087-41c7-a18c-ac271ff065b6.png">
 
<h4 class="md-end-block md-heading">构建失败怎么办？</h4>
常见的构建失败原因是类型校验错误，这是由于脚手架内置的 <code>build</code> 命令会执行类型检查，如果项目代码中有任何类型不规范的地方，都会导致打包失败！
虽然可以自己一个个修复类型，但是太影响效率了，得不偿失，所以引入一个 不执行类型检查 的构建命令。
在 <code>package.json</code> 文件中定义 <code>pure-build</code> 命令：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">{  "scripts": {    "dev": "vite",    "pure-build": "vite build",    "build": "run-p type-check \"build-only {@}\" --", } }</pre>
然后执行 <code>pure-build</code> 命令，执行打包构建即可。
注意，如果 Node.js 版本较低，也可能会构建失败，这时可以到 官网 安装更新的版本，最好 >= 20 版本。
 
<h3 class="md-end-block md-heading">3、部署到服务器</h3>
一般来说，用户无法直接访问服务器上的文件，需要使用 Nginx 提供静态文件的访问能力。
把 dist 目录内的所有文件上传到服务器上，为了方便，直接上传到之前配置的网站的 root 目录下：
<img src="https://pic.yupi.icu/1/1754580538595-971b3910-4b1a-4e49-8012-b4699cf57713.png">
 
如图：
<img src="https://pic.yupi.icu/1/1754580478285-d76fc150-aa7f-4591-aec0-55059b53cdf7.png">
 
但是，如果访问服务器，你会发现还是默认网站。也就是说，默认并没有从 1Panel 的网站目录加载网站！需要我们手动修改 Nginx 配置。
 
<h3 class="md-end-block md-heading">4、Nginx 配置</h3>
查看 Nginx 配置文件，果然缺少 root 网站根目录配置：
<img src="https://pic.yupi.icu/1/1754581016118-6ad12963-a01f-4ae2-8a9f-3523446ad4ab.png">
 
加上一行配置就好：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"># 主前端网站根目录 root /www/sites/yu-ai-code-mother/index;</pre>
 
然后输入服务器 IP（或者你配置的域名）就能访问了：
<img src="https://pic.yupi.icu/1/1754635512737-f8196530-490f-4267-817c-430659612022.png">
 
但是经过验证，目前访问除了主页外的其他页面（比如 <code>/user/login</code>），如果刷新页面，就会出现 404 错误。
<img src="https://pic.yupi.icu/1/1754635560743-c463a07f-4a55-43a5-9231-b05118111bc3.png">
 
这个问题是由于 Vue 是单页面应用（前端路由），打包后的文件只有 <code>index.html</code>，服务器上不存在对应的页面文件（比如 <code>/user/login.html</code>），所以需要在 Nginx 配置访问规则。如果找不到某个页面文件，就加载主页 index.html 文件。
修改 Nginx 配置，补充下列代码：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"># 处理主网站的路径访问，防止单页面应用 404 location / {    try_files $uri $uri/ /index.html =404; }</pre>
 
保存并重载配置后，再次刷新页面，可以正常访问。
<img src="https://pic.yupi.icu/1/1754635653761-b71b7bf4-e140-49b0-8232-6e1a9e1b4172.png">
 
<h2 class="md-end-block md-heading">六、应用部署</h2>
这个项目比较特殊，除了前后端部署外，还需要为 AI 生成的应用提供部署地址。
由于前端是通过 Nginx 容器部署的，有些服务器上的文件路径是无法直接在容器内访问到的，除非利用容器的挂载能力。
前面也提到了，Nginx 的 <code>/www</code> 路径映射到了服务器本机目录，也就是说 Nginx 能访问到 <code>/opt/1panel/www</code> 路径下的文件，这就是一个突破口，后端只要把 AI 生成的应用也存放到这个路径下就可以了。
<img src="https://pic.yupi.icu/1/1754580348337-12e18156-9acd-4c06-a0bc-5567a3962594.png">
 
这里我们约定，后端需要确保在 <code>/www/sites/yu-ai-code-mother/tmp</code> 目录下生成临时文件。最简单的办法就是把 jar 包移动到这个 <code>/www/sites/yu-ai-code-mother</code> 目录下运行（或者通过配置文件修改后端写入文件的路径）。
直接复制 jar 包：
<img src="https://pic.yupi.icu/1/1754659935132-66144ed5-70fb-42a8-a2cc-170144728da1.png">
 
关闭之前已经启动的进程，然后执行命令重新启动 jar 包。
<img src="https://pic.yupi.icu/1/1754659979088-7b2b9136-ca8d-4879-9917-be39b019f06e.png">
 
修改前端的 Nginx 配置，配置请求 <code>/dist</code> 路径时到项目部署根目录去寻找网页文件：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"># 为生成的网站提供部署访问能力 location /dist/ {    # 生成的网站部署根目录    alias /www/sites/yu-ai-code-mother/tmp/code_deploy/;    try_files $uri $uri/ /dist/index.html =404; }</pre>
 
<h2 class="md-end-block md-heading">七、测试验证</h2>
最后，我们来对上线效果进行验证。
1）用户注册登录
<img src="https://pic.yupi.icu/1/1754645614949-e5155a14-94fd-4e8d-8738-b447c7a53718.png">
然后通过修改数据库的方式，将该用户的角色设置为管理员，从而使用更多功能。
 
2）进入主页，和 AI 对话来生成一个网站：
<img src="https://pic.yupi.icu/1/1754645761891-8e00f6bf-44fa-486e-8c98-1b2138c7f964.png">
 
3）进入对话页面，发现 AI 自动选择了生成模式，并且能够流式输出代码：
<img src="https://pic.yupi.icu/1/1754645824316-a38acff9-5df5-4eee-835f-7ec327bd0224.png">
 
4）网站生成完后，可以立刻看到生成的效果：
<img src="https://pic.yupi.icu/1/1754645949479-0287970c-c6fe-4d79-bf90-78083f8d4bc3.png">
 
还可以查看生成的应用详情，支持修改和删除自己的应用信息：
<img src="https://pic.yupi.icu/1/1754646080289-fac47174-a2f0-4189-ad1f-0c3e92ed6d34.png">
 
5）再来生成一个更复杂的网站，通过 AI 智能路由触发 Vue 工程项目生成模式。
可以实时看到工具调用的过程，并且在完成后自动构建，然后展示出网站的运行效果：
<img src="https://pic.yupi.icu/1/1754661184870-08aef0c7-1f80-41fe-bf5b-60d30c78f1a3.png">
 
6）可以进入编辑模式，可视化修改网站的内容：
<img src="https://pic.yupi.icu/1/1754661286170-d6293f09-d742-4b12-afe9-179c5ece85d8.png">
 
很快就修改完成了，效果如图：
<img src="https://pic.yupi.icu/1/1754661334585-27789621-a2c8-4646-968e-6731626e948d.png">
 
7）部署生成的应用：
<img src="https://pic.yupi.icu/1/1754661352556-294dde56-32c5-43f3-b81b-2835014345f0.png">
 
能够访问到部署的网站应用：
<img src="https://pic.yupi.icu/1/1754661412438-0f5e45e7-772e-4545-877a-c245d86144b8.png">
 
8）部署网站成功后，稍等一会儿回到主页，可以看到自动生成了应用的封面图：
<img src="https://pic.yupi.icu/1/1754670109811-5ba65a59-8bab-4a55-a413-a0468b0192d0.png">
 
9）管理员可以管理和精选应用：
<img src="https://pic.yupi.icu/1/1754663155261-80c787ff-08b9-48bf-8214-f78aa10530c3.png">过几分钟后（有缓存），主页就会展示出精选应用啦。至此，网站部署完成！
 
<h2 class="md-end-block md-heading">最后</h2>
我个人感觉对新手来说，1Panel 不如宝塔面板更友好，毕竟全容器操作，新手很容易在路径和依赖上踩一些坑。
至此，整个项目已经完成上线，希望大家能通过这个项目掌握企业级 AI 项目的开发、优化和上线方法，得到全方面编程能力和 AI 应用开发技巧的提升。
最后再次强调，本项目代码完全开源（暗示 star 嘿嘿）：https://github.com/liyupi/yu-ai-code-mother
完整教程 编程导航 可见，感兴趣的同学欢迎来跟我学习新项目~ 
 
<h2 class="md-end-block md-heading">更多编程学习资源</h2>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
Java前端程序员必做项目实战教程+毕设网站
</li>
<li class="md-list-item">
程序员免费编程学习交流社区（自学必备）
</li>
<li class="md-list-item">
程序员保姆级求职写简历指南（找工作必备）
</li>
<li class="md-list-item">
程序员免费面试刷题网站工具（找工作必备）
</li>
<li class="md-list-item">
最新Java零基础入门学习路线 + Java教程
</li>
<li class="md-list-item">
最新Python零基础入门学习路线 + Python教程
</li>
<li class="md-list-item">
最新前端零基础入门学习路线 + 前端教程
</li>
<li class="md-list-item">
最新数据结构和算法零基础入门学习路线 + 算法教程
</li>
<li class="md-list-item">
最新C++零基础入门学习路线、C++教程
</li>
<li class="md-list-item">
最新数据库零基础入门学习路线 + 数据库教程
</li>
<li class="md-list-item">
最新Redis零基础入门学习路线 + Redis教程
</li>
<li class="md-list-item">
最新计算机基础入门学习路线 + 计算机基础教程
</li>
<li class="md-list-item">
最新小程序入门学习路线 + 小程序开发教程
</li>
<li class="md-list-item">
最新SQL零基础入门学习路线 + SQL教程
</li>
<li class="md-list-item">
最新Linux零基础入门学习路线 + Linux教程
</li>
<li class="md-list-item">
最新Git/GitHub零基础入门学习路线 + Git教程
</li>
<li class="md-list-item">
最新操作系统零基础入门学习路线 + 操作系统教程
</li>
<li class="md-list-item">
最新计算机网络零基础入门学习路线 + 计算机网络教程
</li>
<li class="md-list-item">
最新设计模式零基础入门学习路线 + 设计模式教程
</li>
<li class="md-list-item md-focus-container">
最新软件工程零基础入门学习路线 + 软件工程教程
</li>
</ul> 
来源：https://www.cnblogs.com/yupi/p/19039219

頁: [1]

琼殿技术论坛's Archiver

爆肝2月，我的 AI 代码生成平台上线了！