前言：

各位应该对Mix-Space + Shiro感到不陌生吧（说实话我是不太陌生了）

那么你们的小洛猫子，在编译这个玩意儿的时候属于是把坑都给踩干净了

那么今天，一篇文章教你如何编译这个博客系统！

---

一、准备工作

你需要：一个服务器、一个Vercel账户、一台电脑，因为我们以后还要改配置。

如果你没有服务器又想看哪里的服务器好，推荐你去桔风云哦亲（橘汁打钱）

好的准备工作到此为止

---

二、后端部署

后端部署之前，你需要先看这个： 免得你直接部署错了，部署了v14版本结果试了好久才发现不对（笑） v10版本的编排我这里给一个：

services:
  app:
    container_name: mx-server
    image: innei/mx-server:10.5.3
    environment:
      - TZ=Asia/Shanghai
      - NODE_ENV=production
      - DB_HOST=mongo
      - REDIS_HOST=redis
      - ALLOWED_ORIGINS=localhost #localhost就行了
      - JWT_SECRET=自己改一下免得出问题
    volumes:
      - ./data/mx-space:/root/.mx-space
    ports:
      - '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:7
    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

（当然你想手动编译我也不是想阻止你） 把这份Da~mn的docker compose yaml文件上传到服务器，就比如这种方法：

mkdir mx-space/core
cd mx-space/core
docker compose up -d #先确保您安装了Docker和Compose

然后接下来等部署成功，反向代理127.0.0.1:2333，并访问<你的网站>/api/v2/ping，看见回复为data:pong即可。

---

三、前端部署

好的也是来到了前端部署，那么首先我们需要先注意这个JettBrain的坑，那就是pnpm install生成的pnpm-lock过于古老，以至于会直接报错

ERR_PNPM_OUTDATED_LOCKFILE  Cannot install with "frozen-lockfile" because pnpm-lock.yaml is not up to date with <ROOT>/package.json

所以呢，为了解决这个问题，我们需要先fork仓库，然后git clone下来，手动的pnpm更新一次，接下来就不会这样了

坑

就在我以为更新一下就OK的时候，突然出现了报错：

15:50:25.469 @shiro/web:build: ┆             ^-- 'highlight' is not recognized as a valid pseudo-element. Did you mean ':highlight' (pseudo-class) or is this a typo?

也就是@haklex/rich-kit出现了::highlight问题，这里给出两种处理方式：

坑的解决方法

一、直接打patch，也是Innei老大推荐的方法

这不是正确的解法（指下面的强制要求使用webpack） 。你可以添加tailwindcss在devDependency字符串里，千万不能也不要使用webpack在生产模式。 Innei 在 https://github.com/Innei/Shiro/pull/651 时候的回复

在电脑本地运行

pnpm patch @haklex/rich-editor

然后应该会输出一大片类似这样的：

❯ pnpm patch @haklex/rich-editor
✔ Choose which version to patch · 0.0.105
✔ Apply this patch to all versions? (y/N) · true
Patch: You can now edit the package at:

  /mnt/data/1p5/Shiro/node_modules/.pnpm_patches/@haklex/rich-editor@0.0.105

To commit your changes, run:

  pnpm patch-commit '/mnt/data/1p5/Shiro/node_modules/.pnpm_patches/@haklex/rich-editor@0.0.105'

打开这个文件夹（如我这里输出内写的/mnt/data/1p5/Shiro/nodemodules/.pnpmpatches/@haklex/rich-editor@0.0.105）然后接着打开目录下的dist/rich-editor.css。

将所有::highlight去掉，改成::selection，然后把后面的括号去掉。

（哦对了，这坨代码还带了反编译，所以是没有回车的哦）

如果不去掉括号，就会像我这样 接下来，保存更改，在控制台内输入：

 pnpm patch-commit '/mnt/data/1p5/Shiro/node_modules/.pnpm_patches/@haklex/rich-editor@0.0.105'

然后接下来git三件套（指add&commit&push）我就不多说了

随后你就可以前往Vercel进行部署了（按照官网说的做就行）

当然，你也可以Fork我改过的仓库

二、webpack，用在生产环境简直就是活受罪

打开apps/web/package.json，然后找到build脚本

修改前：

"build": "tsc --noEmit && cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=4096 next build",

修改后：

"build": "tsc --noEmit && cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=4096 next build --webpack",

提交并推送，就完了 ---

尾结

虽说部署这个东西浪费了不少时间，但实际自己写出来还是很有成就感（划掉）的，尤其是老师甚至还让最后一个版本编译出来提示是Shiroi（不是）

那么这篇博文到此就结束了，感谢您的查看，希望我的博文可以帮到您（如果可以的话，帮我宣传一下吧）~