前言

在前文提到了由于Vercel的某些原因而不得不将前端改为本地部署，此贴简单记录一下部署过程。

抛弃Vercel

经过深思熟虑，我决定弃用Vercel，主要是因为速度问题。在半年前就有这个想法，因为Vercel不支持OG协议，导致文章在社交平台上无法生成缩略图。11月中发现首页头像不显示，虽然一部分责任在GFW，但还是决定采用Shiroi本地部署，并将在博客中记录部署过程。因数据迁移，访问可能不稳定。

一、环境配置

不建议使用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

在构建过程中可能会有其他意想不到的报错，但一般都是以下原因，请逐一排查。

1. 网络错误（一般是项目中的字体文件下载出错）

2. 代码冲突（若你的博客有自定义内容，可能会有代码错误）

3. 服务器内存不够（字面意思）

构建完成后在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