前言#
在前文提到了由于 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