Mix-Space部署最新前端Shiro

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

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

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

Shiro 及相关项目#

mx-space/core

😎 The next generation of RESTful API service and more feature for Mix Space, powered by @nestjs.

TypeScript416116

Innei/Shiro

📜 A minimalist personal website embodying the purity of paper and freshness of snow.

TypeScript3800819

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 等相关环境#

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

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 命令将环境变量重新加载到当前会话中。

 source ~/.profile

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

nvm ls-remote

4、确定版本后，运行 nvm install version 命令下载并安装它。例如，安装 Node.JS 20.12.2 ，
强烈推荐 V20.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

贰・Shiro 的配置与构建#

一・Core 后端云函数配置#

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

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

名称：shiro
引用：theme
数据类型：JSON
数据：右侧复制以下示例，更改为自己的信息

{
 "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#

   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 文件

  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=

四・开始构建 Shiro/Shiroi 项目#

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

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

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

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
pnpmi&&pnpmbuild.png
build done.png
:::

叁・Shiro 启动！#

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

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

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 反代配置

双域名前端反代示例

## 反向代理开始 
    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;
    }
    ## 反向代理结束

单域名前端反代示例

## 反向代理开始，直接复制官方文档的
    ## 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 更新#

# 进入工作目录
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 浏览器开隐私模式测试是否正常。

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