大家好，我是程式設計師魚皮。9月，我處於極度爆肝狀態，成功完結了最新帶大家做的專案 面試刷題平臺 。
當我們做完一個專案後，一定要記得把專案上線，這樣才算是完成了學習的 “閉環”，寫到簡歷上也才有競爭力。
我不僅將這個專案的程式碼開源給大家，還專門錄製了一期
程式碼開源：https://github.com/liyupi/mianshiya-next
上線影片教程：https://www.bilibili.com/video/BV1mixreSE6t/
下面也透過文字給大家分享一些部署專案的關鍵操作，希望大家能夠掌握快速上線專案的方法。
包括：
-
伺服器初始化
-
部署規劃
-
安裝依賴
-
後端部署
-
前端部署
-
測試驗證
一、伺服器初始化
首先購買一臺伺服器，各大雲服務商的新使用者都有優惠。推薦輕量應用伺服器，提供了很多開箱即用的模板，幫我們預裝了環境和軟體，省時省力。
魚皮這裡選擇一臺預裝了寶塔 Linux 應用的輕量應用伺服器，配置為 2 核 2 G，部署咱們的專案（核心功能版）足夠了。但一定要注意，作業系統如果是 CentOS，必須 >= 8，否則無法支援本專案的前端部署！一般選擇最新版本就好了，如下圖：
購買好伺服器後，進入伺服器詳情頁，在防火牆標籤頁中放通 8888 寶塔皮膚埠，否則無法在自己的電腦上訪問寶塔。
進入應用管理標籤頁，登入寶塔。首次登入時，需要先登入伺服器，透過輸入命令的方式獲取寶塔預設賬號密碼，如圖：
點選登入後，進入到 web 終端，複製指令碼並執行，會得到初始賬號密碼和皮膚地址：
訪問寶塔皮膚，首次進入寶塔時，會提示我們安裝環境，這裡推薦安裝 LNMP（包含 Nginx 伺服器），適合部署前後端分離的專案：
二、部署規劃
在正式操作前後端部署前，我們要先進行一個規劃，比如要部署哪些專案和服務、需要哪些依賴、佔用哪些埠等。
為了方便，本專案前端和後端均使用寶塔皮膚進行部署，可以很方便地管理伺服器。
涉及到具體的部署方式，前端要遵循 Next.js 服務端渲染的部署模式，基於 Node.js 執行；後端可以直接執行 jar 包。
前端：透過 Nginx 進行轉發，訪問地址為 http://{域名}。由於是 Node 服務，實際執行在 3000 埠。
後端：透過 Nginx 進行轉發，訪問地址為 http://{域名}/api。實際執行在 8101 埠。
為什麼要用 Nginx 轉發呢？
這樣可以讓前端和後端訪問域名一致，保證不會出現跨域問題。
做好規劃後，我們需要在騰訊雲控制檯的防火牆中開通需要外網訪問的服務埠：
三、安裝依賴
1、Node 環境
進入寶塔皮膚 - 網站 - Node 專案，會提示安裝 Node 版本管理器，點選安裝：
然後就可以用它來安裝 Node.js 版本了，首先要更新版本列表，然後選擇 > 18.18.x 的穩定版本，此處魚皮選擇 v20.17.0 安裝：
2、資料庫
寶塔皮膚已經自動安裝 MySQL 資料庫，我們可以直接使用。
先為後端專案新增一個資料庫。資料庫名稱和我們專案需要的資料庫名稱保持一致（此處為 mianshiya），注意使用者名稱、密碼和訪問許可權：
在 IDEA 中開啟後端專案，透過資料庫皮膚在本地檢查連線是否正常：
執行指令碼，初始化庫表並匯入初始示例資料，然後記得驗證資料庫表是否建立成功。
3、Redis
在寶塔皮膚的軟體商店中，搜尋並安裝 Redis，版本選擇預設的即可：
安裝完成後，需要配置 Redis，開啟遠端訪問並配置密碼，否則我們自己的電腦是無法連線 Redis 的：
修改配置後，一定要過載配置。最後，在 IDEA 資料庫皮膚中驗證本地能否連線遠端 Redis：
4、Java 環境
要部署 Java 專案，必須安裝 JDK。在寶塔皮膚中，可以透過下圖的方式快速安裝指定版本的 JDK。
建議多安裝幾個版本，比如 JDK 8、11、17，需要用哪個版本的時候可以隨時切換。
接下來，我們分別進行後端和前端部署。注意，由於前端 Next.js 服務端渲染專案部署時會呼叫後端介面，所以必須先部署後端。
四、後端部署
1、修改配置和程式碼
修改 application-prod 生產環境配置，包括資料庫、Redis 等，替換為上述安裝依賴時指定的配置（如使用者名稱、密碼）。
2、打包部署
在 IDEA 中開啟後端專案，忽略測試並打包：
打包成功，得到 jar 包檔案，需要上傳 jar 包到伺服器：
然後新增 Java 專案，注意埠要和生產環境的配置保持一致，並且專案執行命令中，要指定生產環境的配置！
啟動成功後，能夠看到狀態和埠占用如圖：
但是，我們現在還無法透過瀏覽器訪問介面文件，這是因為我們的伺服器防火牆沒有放開 8101 埠。這裡我們故意不放開，因為在之前的部署規劃中，後端需要透過 Nginx 進行轉發，從而解決跨域問題。
3、Nginx 轉發
新建一個站點（Nginx），域名填寫當前伺服器 IP 或者自己的域名，根目錄隨意填寫即可。
如果訪問的是後端介面（地址有 /api 字首），則 Nginx 將請求轉發到後端服務，修改 Nginx 配置如圖：
修改完後，就可以透過 80 埠（可以省略）訪問到介面了。
五、前端部署
1、修改配置
線上的前端需要請求線上的後端介面，所以需要修改 request.ts 檔案中的請求地址為線上：
// 建立 Axios 例項
// 區分開發和生產環境
const DEV_BASE_URL = "http://localhost:8101";
const PROD_BASE_URL = "http://1.117.71.203";
const myAxios = axios.create({
baseURL: PROD_BASE_URL,
timeout: 10000,
withCredentials: true,
});
2、打包部署
1）修改 Next.js 配置檔案 next.config.mjs，使用 standalone 模式部署，這樣上傳到伺服器的時候可以不用上傳 node_modules 目錄。
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "standalone",
};
export default nextConfig;
2）執行 package.json 檔案中定義的 build 命令，執行打包構建。
構建時，可能會遇到一些型別錯誤，這類錯誤不影響執行，但是會在 Next.js 打包時被檢測，可以根據實際情況修改。或者直接在打包時忽略 TypeScript 錯誤。修改 next.config.mjs 配置檔案即可：
/** @type {import('next').NextConfig} */
const nextConfig = {
typescript: {
// !! WARN !!
// Dangerously allow production builds to successfully complete even if
// your project has type errors.
// !! WARN !!
ignoreBuildErrors: true,
},
};
export default nextConfig;
打包成功後，看到下圖資訊，能夠很直觀地看到哪些頁面用到了靜態渲染和服務端渲染：
然後在 .next 目錄下會生成 standalone 目錄，該目錄就是可以獨立部署的前端包。但是必須按照如下模式組織目錄，一定不能有錯！
-
將專案根目錄下的 public 目錄移動到 .next/standalone 內
-
將 .next/static 目錄移動到 .next/standalone/.next 內
組織好的目錄結構如下：
把 standalone 目錄下的所有檔案上傳到伺服器上（可以新建一個 mianshiya-frontend 目錄）：
上傳到伺服器後，新增 Node 專案。注意修改啟動選項（start 或者自定義命令 node server.js）和專案埠（3000）：
3、Nginx 轉發
修改 Nginx 配置，訪問前端資源時，反向代理到 Node.js 服務，配置程式碼和後端反向代理類似：
location / {
proxy_pass http://127.0.0.1:3000;
proxy_set_header Host $proxy_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_buffering off;
proxy_set_header Connection "";
}
一定要註釋掉下列配置！讓靜態資源能夠正確被反向代理。否則訪問頁面時，靜態資源的載入可能會出錯：
六、測試驗證
最後，我們來對上線效果進行驗證。
訪問主頁、題庫大全頁、題目大全頁，都能正常訪問：
訪問題庫詳情頁，正常顯示：
登入管理員賬號，可以正常訪問和使用管理能力：
最後
至此，整個專案已經完成上線，希望大家能透過這個專案掌握企業級專案的開發、最佳化和上線方法，得到全方面程式設計技能和程式設計師素養的提升。如果上線過程中遇到錯誤，也別慌張，看前後端的日誌進行排查即可，影片教程中也給大家舉了個排查問題的例子，建議觀看。
程式碼開源：https://github.com/liyupi/mianshiya-next
上線影片教程：https://www.bilibili.com/video/BV1mixreSE6t/