爆肝2月，我的 AI 代碼生成平臺上線了！

這篇文章是一個保姆級的項目前后端部署上線教程。

大家好，我是程序員魚皮。經過近 2 個月的奮斗，我帶大家開發的新項目《AI 零代碼應用生成平臺》進入尾聲。

這是一套以 AI 開發實戰 + 后端架構設計 為核心的項目教程，基于 Spring Boot 3 + LangChain4j + LangGraph4j + Vue 3 開發的 對標大廠 的企業級 AI 代碼生成平臺，帶大家掌握新時代程序員必知必會的 AI 智能體開發、AI 工作流等前沿技術，大幅提升求職競爭力！

我帶大家開發了多種模式的應用生成、可視化修改、AI 圖片搜集、持久化對話記憶、一鍵部署等功能：

我已經錄制了幾十個小時的視頻教程，而且光是文字教程就 15w 字，妥妥一本書的量！可想而知我最近掉了多少頭發。。。

這篇文章是一個保姆級的項目前后端部署上線教程，來跟著魚皮一步一步把這個項目上線吧！

推薦觀看視頻版：https://bilibili.com/video/BV1Kwb6zLEee

大綱

服務器初始化
部署規劃
安裝依賴
后端部署
前端部署
應用部署
測試驗證
擴展知識

一、服務器初始化

首先購買一臺服務器，推薦選擇輕量應用服務器，提供了很多開箱即用的模板，幫我們預裝了環境和軟件，省時省力。

魚皮這里選擇一臺預裝了 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、端口規劃

等下我們會依次安裝依賴，端口占用情況如下：

組件	端口	作用
Nginx	80	Web服務器，處理 HTTP 請求和反向代理
數據庫	3306	數據存儲，管理應用的持久化數據
Redis	6379	緩存服務，提供高性能的內存數據存儲

需要在服務器控制臺的防火墻中開通需要外網訪問的服務端口，比如 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 需要用到壓縮和解壓縮命令，因此需要先進入終端安裝這些命令：

sudo apt install zip unzip -y

然后執行命令來安裝 SDKMAN：

curl -s "https://get.sdkman.io" | bash

安裝后，查看可用的 Java 版本，本項目一定要選擇 JDK 21！

sdk list java

接下來安裝 JDK 21 并設置為默認版本：

# 安裝
sdk install java 21.0.8-amzn
# 設置為默認版本
sdk default java 21.0.8-amzn

5、Node.js 環境

本項目的業務中，生成 Vue 工程項目時需要打包構建、AI 工作流生成架構圖時也需要用到 Mermaid CLI 等，這些都依賴 Node.js 環境和 NPM 包管理工具。

直接去 Node.js 官網安裝，選擇 Linux 系統，會看到一堆命令，作用是安裝 nvm 這樣一個 Node.js 管理器：

復制命令到終端執行：

6、Chrome 瀏覽器

由于本項目包含 Selenium 網頁截圖功能，需要安裝一個瀏覽器，首推 Chrome。

執行下列命令即可安裝：

curl -fsSL https://dl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/google-chrome.gpg && echo"deb [arch=amd64 signed-by=/usr/share/keyrings/google-chrome.gpg] 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

還要安裝中文字體，否則網頁無法顯示中文（這里我讓 AI 幫我隨便選了，也可以安裝別的）：

sudo apt install -y fonts-wqy-zenhei fonts-noto-cjk && sudo fc-cache -fv

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 塊，否則可能打包時會遇到報錯。

<excludes>
   <exclude>
       <groupId>org.projectlombok</groupId>
       <artifactId>lombok</artifactId>
       <version>1.18.38</version>
   </exclude>
</excludes>

在 IDEA 中打開后端項目，忽略測試并打包：

打包成功，得到 jar 包文件：

建議先在本地終端輸入命令以 prod 模式運行 jar 包，看看項目能否正常啟動：

java -jar yu-ai-code-mother-0.0.1-SNAPSHOT.jar --spring.active.profiles=prod

發現項目可以正常運行、各個功能也都正常，再進行后續操作：

3、部署到服務器

將打好的 jar 包通過面板上傳到服務器的指定目錄下，我這里是 /project/yu-ai-code-mother-backend：

接下來進入 jar 包所在目錄 /project/yu-ai-code-mother-backend 的終端，先在前臺運行 jar 包：

java -jar yu-ai-code-mother-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod

查看輸出信息，確定項目啟動成功：

然后在后臺運行 jar 包，這樣終端關閉后項目依然會運行：

nohup java -jar yu-ai-code-mother-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod > app.log 2>&1 &

可以在 jar 包相同目錄下看到日志文件：

4、Nginx 配置

后端轉發配置

我們的預期是：如果訪問的是后端接口（地址有 /api 前綴），則 Nginx 將請求轉發到后端服務。

先創建一個網站（相當于新建 Nginx 站點），選擇 反向代理 類型，域名填寫當前服務器 IP 或者自己的域名，代號最好用項目名稱：

創建好網站后，編輯反向代理的配置：

修改反向代理的前端請求路徑為 /api，修改后的配置如圖：

SSE 配置

我們為了防止 AI 生成的 SSE 請求超時，需要修改反向代理配置。

由于 Nginx 是通過容器部署，需要找到容器內 /www 對應掛載的服務器目錄：

找到實際的反向代理配置文件，加上一行配置：

proxy_read_timeout 900s; # 讀取超時延長，避免長連接被中斷

現在就能夠直接通過 80 端口（可省略）正常訪問后端接口文檔：

輸入密碼后就看到接口文檔了：

五、前端部署

前端部署可以參考 Vite 官方文檔，分為編寫生產環境配置、打包構建、部署和 Nginx 配置這 4 個步驟。

1、編寫生產環境配置

新建 .env.production 文件，直接使用相對路徑，這樣前端域名、請求域名和生成網站的部署域名都保持一致，解決跨域和同源問題。

VITE_DEPLOY_DOMAIN=/dist
?
VITE_API_BASE_URL=/api

2、打包構建

直接執行前端項目 package.json 文件中的 build 命令：

構建成功后，可以看到 dist 目錄：

構建失敗怎么辦？

常見的構建失敗原因是類型校驗錯誤，這是由于腳手架內置的 build 命令會執行類型檢查，如果項目代碼中有任何類型不規范的地方，都會導致打包失敗！

雖然可以自己一個個修復類型，但是太影響效率了，得不償失，所以引入一個 不執行類型檢查 的構建命令。

在 package.json 文件中定義 pure-build 命令：

{
 "scripts": {
   "dev": "vite",
   "pure-build": "vite build",
   "build": "run-p type-check \"build-only {@}\" --",
}
}

然后執行 pure-build 命令，執行打包構建即可。

注意，如果 Node.js 版本較低，也可能會構建失敗，這時可以到官網安裝更新的版本，最好 >= 20 版本。

3、部署到服務器

一般來說，用戶無法直接訪問服務器上的文件，需要使用 Nginx 提供靜態文件的訪問能力。

把 dist 目錄內的所有文件上傳到服務器上，為了方便，直接上傳到之前配置的網站的 root 目錄下：

如圖：

但是，如果訪問服務器，你會發現還是默認網站。也就是說，默認并沒有從 1Panel 的網站目錄加載網站！需要我們手動修改 Nginx 配置。

4、Nginx 配置

查看 Nginx 配置文件，果然缺少 root 網站根目錄配置：

加上一行配置就好：

# 主前端網站根目錄
root /www/sites/yu-ai-code-mother/index;

然后輸入服務器 IP（或者你配置的域名）就能訪問了：

但是經過驗證，目前訪問除了主頁外的其他頁面（比如 /user/login），如果刷新頁面，就會出現 404 錯誤。

這個問題是由于 Vue 是單頁面應用（前端路由），打包后的文件只有 index.html，服務器上不存在對應的頁面文件（比如 /user/login.html），所以需要在 Nginx 配置訪問規則。如果找不到某個頁面文件，就加載主頁 index.html 文件。

修改 Nginx 配置，補充下列代碼：

# 處理主網站的路徑訪問，防止單頁面應用 404
location / {
   try_files $uri $uri/ /index.html =404;
}

保存并重載配置后，再次刷新頁面，可以正常訪問。

六、應用部署

這個項目比較特殊，除了前后端部署外，還需要為 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 路徑時到項目部署根目錄去尋找網頁文件：

# 為生成的網站提供部署訪問能力
location /dist/ {
   # 生成的網站部署根目錄
   alias /www/sites/yu-ai-code-mother/tmp/code_deploy/;
   try_files $uri $uri/ /dist/index.html =404;
}