本地部署Mx-Space和Shiroi主题

壹・为什么选择Shiro

我从24年6月开始部署属于自己的博客，Typecho在轻量化和易部署方面成为我第一个博客系统，但是久而久之发现：Typecho在编辑器和内容自定义方面严重依靠插件市场，存储方面局限本地（其他存储位置又依靠插件，导致迁移和内容管理很麻烦），这对非单纯文本的博客来说很纠结。

媒体库管理我也开发了对应插件：

https://github.com/TGU-HansJack/MediaLibrary-Typecho-Plugin-Pro

文章订阅我也做了插件：

https://github.com/TGU-HansJack/Typecho-Subscribe-Plugin

但是，Shiro的后端系统Mx-Space提供了编辑器、文件管理、邮箱订阅，并且各类开发者均为大佬，并不需要担心部署问题（相比较PHP可能对新手不友好）。

Shiro相关项目

https://github.com/mx-space/core

https://github.com/Innei/Shiro

贰・本地部署过程

前提需要：

本部署为单域名、服务器可能要4G内存、1Panel+OpenResty、后端 Docker 部署
为了部署试用全部情况，我尽量写通用点教程

1、相关环境

更新并安装必要包工具

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

安装NVM

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

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

source ~/.profile

安装 Node.JS

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

安装 pnpm pm2

npm install -g pnpm pm2

安装sharp（非必要）

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

2、后端 Core 部署

使用命令行拉取文件

#回到根目录并创建mx-space/core的文件夹，并跳转至core文件夹下
cd && mkdir -p mx-space/core && cd $_ 
# 拉取 docker-compose.yml 文件
wget https://fastly.jsdelivr.net/gh/mx-space/core@master/docker-compose.yml

修改 docker-compose.yml 内的部分内容
域名、JWT密钥、加密的相关配置（默认false）

services:
  app:
    container_name: mx-server
    image: innei/mx-server:latest
    environment:
      - TZ=Asia/Shanghai
      - NODE_ENV=production
      - DB_HOST=mongo
      - REDIS_HOST=redis
      #填写自己博客的域名，多个用，相连，这里可以额外加上本机地址允许他们自己访问自己
      - ALLOWED_ORIGINS=你的域名,localhost:*,127.0.0.1:* 
      #填写你自己生成的JWT密钥，16≤密钥长度≤32 个字符（务必保存好自己的密钥不要泄露）
      - JWT_SECRET=xxxxx 
      #是否开启加密的相关配置，这边默认为false与空即可，如需加密可以参考官方配置文档
      - ENCRYPT_ENABLE=false
      - ENCRYPT_KEY=
    volumes:
      - ./data/mx-space:/root/.mx-space
    ports:
      #-'2333:2333' 修改了docker的端口映射，不开放端口
      - '127.0.0.1:2333:2333' 
    depends_on:
      - mongo
      - redis
    networks:
      - mx-space
    restart: unless-stopped
    healthcheck:
      test: ['CMD', 'curl', '-f', 'http://127.0.0.1:2333/api/v2/ping']
      interval: 1m30s
      timeout: 30s
      retries: 5
      start_period: 30s

  mongo:
    container_name: mongo
    image: mongo
    volumes:
      - ./data/db:/data/db
    networks:
      - mx-space
    restart: unless-stopped

  redis:
    image: redis:alpine
    container_name: redis
    volumes:
      - ./data/redis:/data
    healthcheck:
      test: ['CMD-SHELL', 'redis-cli ping | grep PONG']
      start_period: 20s
      interval: 30s
      retries: 5
      timeout: 3s
    networks:
      - mx-space
    restart: unless-stopped

networks:
  mx-space:
    driver: bridge

启动 Core

docker compose pull && docker compose up -d

反向代理（单域名）1panel选择静态网站后修改location部分就行了，其他面板也类似

# 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; 
}
# Shiro 地址
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; 
}

访问https://你的域名/proxy/qaqdmin配置前、后端和api

Shiro的配置与构建

参考官方文档：后端设置主题配置

拉取 Shiroi

未完待续。。。

pnpm i
pnpm build

pm2 start ecosystem.config.js

pm2 restart ecosystem.config.cjs --update-env

误判根目录，/root 目录下有 yarn.lock

rm /root/yarn.lock

遇到的问题

本地构建出现：

src/app/[locale]/thinking/item.tsx:305:33 - error TS2304: Cannot find name 'markdownScopedBlockquoteClassName'.

305         className={clsx('mt-4', markdownScopedBlockquoteClassName)}
                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error in src/app/[locale]/thinking/item.tsx:305

 ELIFECYCLE  Command failed with exit code 2.
root@DS4460:~/mx-space/Shiroi#

解决方法：
将src/app/[locale]/thinking/item.tsx文件里面的：

const markdownScopedBlockquoteClassName =
  '[&_blockquote]:relative [&_blockquote]:my-2 [&_blockquote]:border-l-2 [&_blockquote]:border-accent/60 [&_blockquote]:pl-3 [&_blockquote]:text-zinc-600 dark:[&_blockquote]:text-zinc-300'

提到文件顶层（模块作用域）,放在 import ... 后、export const ThinkingItem ... 前

参考文献

感谢大佬的教程，让我很快部署成功，本文几乎全是这些大佬的命令及其思路，本文仅用于后续查错使用，下面列出参考的大佬文章：