Mix-Space部署最新前端Shiro

Shiro，一个极简主义的个人网站，如纸的纯净和雪的清新。

innei 大佬与
Shiro ： Shiro - 全新风格，再次起航

Shiro/Shiroi 为 Mix-Space 前端主题，其中，Shiroi 为闭源版本，通过赞助 Innei Innei获取。
开源闭源在部分功能上有所区别，可在官方文档看到部分闭源版本功能。

Shiro 及相关项目

Vercel 部署

Shiro Vercel 部署请参阅官方文档

https://mx-space.js.org/themes/shiro

云服务器 / 本地部署

系统 / 环境要求

Linux， 内核版本 > 4.19 (推荐 Debian11 / 12) 教程以 Debian11 / 12 为例

服务器内存需 2~4Gib，构建完成运行只需 512Mib 甚至更低 （内存小 or 可用内存不足的可在本地构建或者配置 2~4G 的 Swap）：博主服务器为 2H-2G，故配置了 4G Swap。

使用 NVM 安装 Node.js v20.12.2，以及 PNPM / PM2 /sharp

Screen 实现后台保活（可选）

采用 1Panel+OpenResty（可选）

必要的准备

域名：本篇所采用～～双二级域名模式，即前端 www.vlo.cc，后端api.vlo.cc~~

前后端域名所需 SSL 证书：需要全站 HTTPS （前端访问 API 问题，可以尝试后端配置文件 ALLOWED_ORIGINS 加上 localhost,127.0.0.1

壹・NodeJS 等相关环境

刷新系统包缓存与安装常用 / 必备软件包

Copy
apt update && apt install git curl vim wget git-lfs -y```

1、安装NVM

```bash
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash

2、运行 source ~/.profile 命令将环境变量重新加载到当前会话中。

Copy
source ~/.profile

3、列出 Node.JS 的可用版本。

Copy
nvm ls-remote

4、确定版本后，运行 nvm install version 命令下载并安装它。例如，安装 Node.JS 20.12.2 ，
强烈推荐 V20.12.2 版本

Copy
# 安装
nvm install 20.12.2
# 检查版本
node -v

5、安装 pnpm pm2

Copy
npm install -g pnpm pm2

6、安装 sharp

Copy
npm i -g sharp
pnpm add sharp
# 配置sharp环境变量
# export NEXT_SHARP_PATH=/root/node_modules/sharp

贰・Shiro 的配置与构建

一・Core 后端云函数配置

具体可参考官方文档：
** 后端设置主题配置 **

进入 Mix Space 后台，进入「配置与云函数」页面，点击右上角的新增按钮，在编辑页面中，填入以下设置：

名称：shiro

引用：theme

数据类型：JSON

数据：右侧复制以下示例，更改为自己的信息

Copy
{
"footer": {
"otherInfo": {
"date": "2022-{{now}}",
"icp": {
"text": "豫 ICP 备 2022029096号-2",
"link": "https://beian.miit.gov.cn"
}
},
"linkSections": [
{
"name": "😊关于",
"links": [
{
"name": "关于我",
"href": "/about"
},
{
"name": "关于此项目",
"href": "https://github.com/innei/Shiro",
"external": true
}
]
},
{
"name": "🧐更多",
"links": [
{
"name": "时间线",
"href": "/timeline"
},
{
"name": "友链",
"href": "/friends"
},
{
"name": "监控",
"href": "https://halo.vlo.cc",
"external": true
}
]
},
{
"name": "🤗联系",
"links": [
{
"name": "写留言",
"href": "/message"
},
{
"name": "发邮件",
"href": "mailto:i@vlo.cc",
"external": true
},
{
"name": "GitHub",
"href": "https://github.com/jiuyue52",
"external": true
}
]
}
]
},
"config": {
"color": {
"light": [
"#33A6B8",
"#FF6666",
"#26A69A",
"#fb7287",
"#69a6cc",
"#F11A7B",
"#78C1F3",
"#FF6666",
"#7ACDF6"
],
"dark": [
"#F596AA",
"#A0A7D4",
"#ff7b7b",
"#99D8CF",
"#838BC6",
"#FFE5AD",
"#9BE8D8",
"#A1CCD1",
"#EAAEBA"
]
},
"custom": {
"css": [],
"styles": [],
"js": [],
"scripts": []
},
"site": {
"favicon": "https://halo.vlo.cc/upload/pic/J99Y.svg",
"faviconDark": "https://halo.vlo.cc/upload/pic/J99Y.svg"
},
"hero": {
"title": {
"template": [
{
"type": "h1",
"text": "Hi, I'm ",
"class": "font-light text-4xl"
},
{
"type": "h1",
"text": "JiuYue",
"class": "font-medium mx-2 text-4xl"
},
{
"type": "h1",
"text": "👋。",
"class": "font-light text-4xl"
},
{
"type": "br"
},
{
"type": "h1",
"text": "语言是思想的直接的现实",
"class": "font-light text-4xl"
},
{
"type": "code",
"text": "<Developer />",
"class": "font-medium mx-2 text-3xl rounded p-1 bg-gray-200 dark:bg-gray-800/0 hover:dark:bg-gray-800/100 bg-opacity-0 hover:bg-opacity-100 transition-background duration-200"
},
{
"type": "span",
"class": "inline-block w-[1px] h-8 -bottom-2 relative bg-gray-800/80 dark:bg-gray-200/80 opacity-0 group-hover:opacity-100 transition-opacity duration-200 group-hover:animation-blink"
}
]
},
"description": "内心湛然，则无往而不乐。"
},
"module": {
"activity": {
"enable": true,
"endpoint": "/fn/ps/update"
},
"donate": {
"enable": true,
"link": "https://afdian.net/@huasui",
"qrcode": [
"https://halo.vlo.cc/upload/pic/wxdashang.png",
"https://halo.vlo.cc/upload/pic/wxdashang.png"
]
},
"bilibili": {
"liveId": 23359061
}
}
}
}

二・拉取 Shiro/Shiroi

Copy
cd /opt/mx-space
# 个人习惯在/opt/mx-space目录下部署Mx-Space与前端Shiro/Kami
# 所以此处./mx-space为mx后端/前端项目文件夹
git clone https://github.com/Innei/Shiro.git
# shiroi的仓库自己赞助获取即可

三・配置 .env

复制 .env.example 为 .env 并编辑 .env 文件

Copy
cd /opt/mx-space/Shiro
mv .env.template .env
vim .env

.env 示例

Copy
# 后端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=

四・开始构建 Shiro/Shiroi 项目

Copy
cd /opt/mx-space/Shiro
pnpm i && pnpm build

::: warning
若服务器所在区域无法访问 NPM 官方源，可能导致依赖安装失败而出现如下报错

解决：构建前手动修改项目 .npmrc 配置文件

Copy
cd /opt/mx-space/Shiro
vim .npmrc
# 1 ↑修改registry为taobao源(https://registry.npmmirror.com)或其他国内镜像源
# nrm use taobao
# 2 ↑若安装有nrm (npm 的镜像源管理工具）也可使用nrm
pnpm i && pnpm build
# 最后重新安装依赖、构建

:::
构建时间较慢长，需耐心等待...

::: gallery

:::

叁・Shiro 启动！

1、直接前台启动，在 Shiro 根目录直接运行
pnpm prod:pm2，可使用 nohup 或其他使其后台运行

2、使用 Screen 实现后台保活 (推荐)

Copy
apt install screen -y
# Debian/Ubuntu安装Screen
screen -R shiro
# 新建shiro会话
cd /opt/mx-space/Shiro
npx next start -p 2323
# pnpm prod:pm2
# 启动shiroi

启动完成后 按 Ctrl +A+D即可退出并挂起 shiro 对话，完成 Shiro 后台运行。

** 注意：** 两种启动方式重启 servers 后都需重新启动下 Shiro

Screen 食用教程：https://www.mintimate.cn/2021/09/02/howToUseScreen/
很不错的教程

肆・反代与更新

一・反向代理

以 1Panel+OpenResty 为例

新建静态网站

配置 SSL 证书开启 HTTPS

在add_header Strict-Transport-Security "max-age=31536000"; 下方或者最后一个}的上方另起一行 CV 反代配置

双域名前端反代示例

Copy
## 反向代理开始
location ~* \.(gif|png|jpg|css|js|woff|woff2|svg|webp)$ {
proxy_pass http://127.0.0.1:2323;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
expires 30d;
}
location ~* \/(feed|sitemap|atom.xml) {
proxy_pass http://127.0.0.1:2333/$1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
add_header X-Cache $upstream_cache_status;
add_header Cache-Control max-age=60;
}
location / {
proxy_pass http://127.0.0.1:2323;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
add_header X-Cache $upstream_cache_status;
add_header Cache-Control no-cache;
proxy_intercept_errors on;
}
## 反向代理结束

单域名前端反代示例

Copy
## 反向代理开始，直接复制官方文档的
## WebSocket 地址
location /socket.io {
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_buffering off;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://127.0.0.1:2333/socket.io;
}
## API 地址
location /api/v2 {
proxy_pass http://127.0.0.1:2333/api/v2;
}
## 简读 render 地址
location /render {
proxy_pass http://127.0.0.1:2333/render;
}
## 前端地址
location / {
proxy_pass http://127.0.0.1:2323;
}
## 后台地址
location /proxy {
proxy_pass http://127.0.0.1:2333/proxy;
}
location /qaqdmin {
proxy_pass http://127.0.0.1:2333/proxy/qaqdmin;
}
## RSS 地址
location ~* \/(feed|sitemap|atom.xml) {
proxy_pass http://127.0.0.1:2333/$1;
}
## 反向代理结束

二・Shiro 更新

Copy
# 进入工作目录
cd /opt/mx-space/Shiro
# 更新
git pull
# git push
screen -R shiroi -X quit
# nrm use taobao (根据服务器 位置 / 网络 情况选择是否换源)
# 安装依赖、构建
pnpm i && pnpm build
# 使用screen实现后台启动
screen -R shiroi
npx next start -p 2323

上面更新方法没试过，试过了，很棒！是参考Arthals大佬的文章 偷来的

国内服务器拉不到 git 的话我就只能用笨方法更新：本地拉取 git 在上传服务器，然后从上文的 贰・Shiro 的配置与构建中二到四 流程再走一遍🤣（🥹

三・Markdown 扩展语法

请阅读 https://shiro.innei.in/#/markdown

伍・踩坑

一・字体拉取失败

Shiro 构建时会拉取字体文件，
若服务器无法 Ping 通 fonts.googleapis.com/fonts.gstatic.com，
可能会出现如下报错，最终构建失败

大概是服务器解析到的 IP 不太行.....

解决：更改 hosts 文件，为 fonts.googleapis.com/fonts.gstatic.com 指定一个服务器可以 Ping 通的 IP

可以用 itdog 查下字体域名的 ip，然后服务器尝试 ping 一下，哪个 ping 的通就改哪个

二・OAuth2 相关问题

回调报错 redirect_uri

第一种方法：切换单域名

以下问题已有新的解决方法

如果你是跟我一样最开始使用了双域名，那么配置 OAuth2 时会出现如下报错，目前只能切换为单域名了，因为 OAuth 所接入的 Github/Google, 都只能同一域名下（二级也只能是同一个二级）
切换方法：

前端域名重新配置反代，上面给出了示例配置

进入后台设置 - 网站设置：把API,GW,后台地址改为前端同 二级 / 顶级域名，如原 API 地址：api.vlo.cc/api/v2，改为：www.vlo.cc/api/v2

第二种方法：复制 Core/Shiro 部署两篇文章内新的双域名反代配置

FAQ：

新的配置文件有什么更改呢？

我在原前后端反代配置示例文件的每个 location 中都添加了如下配置（貌似后端添加就行，我为了保险前后端全部添加了）。

做完这些仍然redirect_uri怎么办？

大概率是缓存问题，清除缓存 OR 浏览器开隐私模式测试是否正常。

Copy
location / {
...
proxy_set_header X-Forwarded-Proto $scheme;
...
}

后端不认主

如果你的后端 core 版本在 7.0.3-7.0.6, 或 7.0.6 之后的某版本开始配置 OAuth 的， 一直无法成功（猜测原因可能是某个版本有 BUG,Core 升级无法解决，回退版本可解）

包括不限于：后端不认主人，前后端主人无法登录，redirect_url 错误等，

可以尝试 Core 退回7.0.2-alpha.0版本：配置 oauth 并验证设为主人账户，前后端使用 OAuth 进行登录测试（仍然有redirect_url的 问题可能有缓存作怪，可以尝试新环境测试），测试没问题后直接升级latest版本

参考文章

感谢官方以及社区大佬们的贡献！

Arthals + Shiro：如纸一般纯净的新博客

官方文档

Yukina

此文由 Mix Space 同步更新至 xLog
原始链接为 https://www.vlo.cc/posts/jc/shiro