前言#
在前文提到了由於 Vercel 的某些原因而不得不將前端改為本地部署，此貼簡單記錄一下部署過程。
https://www.xiaohanwu.com/notes/25
Note
1. 本貼僅適用於 2C4G 及以上配置伺服器參考使用。
2. 在參考本教程前請確保您的後端站點已經成功部署並訪問。
一、環境配置#
不建議使用 windows 進行前端構建，因腳本問題若強行構建可能會產生某些未知的錯誤。（|| 別問，問就是踩過坑 ||）
1. 刷新系統快取以及安裝一些必要的軟體包
apt update && apt install git curl vim wget git-lfs -y
2. 安裝 NVM
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh
3. 運行source ~/.profile命令將環境變數重新加載到當前會話中
source ~/.profile
4. 安裝 Node.JS 20.12.2
# 安裝
nvm install 20.12.2
# 檢查版本
node -v
5. 安裝 pnpm，pm2
npm install -g pnpm pm2
6. 安裝 Sharp
npm i -g sharp
pnpm add sharp
# 配置sharp環境變數
export NEXT_SHARP_PATH=/root/node_modules/sharp
配置.env 文件#
複製 .env.example 為 .env 並編輯 .env 文件
cd /opt/mx-space/Shiro
mv .env.template .env
vim .env
.env 文件內容示例
# 後端API地址
NEXT_PUBLIC_API_URL=https://api.example.com/api/v2
# 後端網關地址
NEXT_PUBLIC_GATEWAY_URL=https://api.example.com
# TMDB信息獲取
TMDB_API_KEY=
# GitHub token，用來獲取前端版本哈希
GH_TOKEN=
開始構建#
注意：在構建前需要確保你的後端站點已經可以成功訪問。
pnpm i && pnpm build
在構建過程中可能會有其他意想不到的報錯，但一般都是以下原因，請逐一排查。
-
++ 網路錯誤 ++（一般是專案中的字體檔案下載出錯）
-
++ 程式碼衝突 ++（若你的部落格有自定義內容，可能會有程式碼錯誤）
-
++ 伺服器記憶體不夠 ++（字面意思）
構建完成後在 shiroi 目錄會產生.next資料夾，這便是構建後的產物。
本地運行#
如果沒有報錯的話就是構建完成了。
==（構建完成的時候你一定會知道是不是構建完成了）==
廢話ಠ_ಠ
當構建完成後直接前台啟動
pnpm prod:pm2
瀏覽器輸入伺服器 IP + 端口號 2323 即可瀏覽站點啦
更新#
如果你的前端站點有更新的話，直接 git 拉取最新檔案後重新使用pnpm i && pnpm build進行構建，然後使用pnpm prod:pm2運行即可。
P.S. 如何停止站點
pm2 kill
參考文獻#
以下都是群裡很牛，很厲害的大佬。
Arthals' ink：mx-space + Shiro：如紙一般純淨的新部落格
華歲雲小屋：Mix-Space 部署最新前端 Shiro
此文由 Mix Space 同步更新至 xLog
原始鏈接為 https://www.xiaohanwu.com/posts/life/20241202