Mx Space部署记录

后端部署

mx-space官方文档:引言 - Mix Space 文档

我这里使用了docker部署的方式,详细步骤参考官方文档啊,大概流程如下:

安装docker

这个直接参考官方文档里的教程即可,我这里的比较复杂。

  1. 检查卸载老版本docker

    注:docker的旧版本不一定被称为docker,docker.io 或 docker-engine也有可能,所以我们卸载的命令为:

    1
    
    sudo apt-get remove docker docker-engine docker.io containerd runc
  2. 更新软件包

    1
    2
    
    sudo apt update
    sudo apt upgrade
  3. 安装docker依赖 Docker在Ubuntu上依赖一些软件包。执行以下命令来安装这些依赖:

    1
    
    sudo apt-get install ca-certificates curl gnupg lsb-release
  4. 添加Docker官方GPG密钥

    1
    
    curl -fsSL http://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
  5. 添加Docker软件源

    1
    
    sudo add-apt-repository "deb [arch=amd64] http://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable"
  6. 安装Docker

    1
    
    sudo apt-get install docker-ce docker-ce-cli containerd.io
  7. 配置用户组(可选) 默认情况下,只有root用户和docker组的用户才能运行Docker命令。我们可以将当前用户添加到docker组,以避免每次使用Docker时都需要使用sudo。命令如下:

    1
    
    sudo usermod -aG docker $USER

    注:重新登录才能使更改生效。

    配置后可以查看通过以下命令查看docker用户组成员:

    1
    
    getent group docker
  8. 安装工具

    1
    
    sudo apt-get -y install apt-transport-https ca-certificates curl software-properties-common
  9. 重启Docker

    1
    
    service docker restart

如果您成功安装了 Docker 和 Docker-Compose,可以通过以下命令查看版本:

1
2
docker -v
docker compose version

拉取配置文件

1
2
3
4
cd && mkdir -p mx-space/core && cd $_

# 拉取 docker-compose.yml 文件
wget https://fastly.jsdelivr.net/gh/mx-space/core@master/docker-compose.yml

配置Core启动配置文件

在官方文档中填入对应配置 PixPin_2025-06-09_19-33-10

填好后,复制配置,粘贴到教程指定的docker-compose.ymlenvironment 字段中

启动Core

1
docker compose up -d

建议先确认一下docker hub的账号是否登录,或者可以直接退出再重登一下:

1
2
docker logout # 退出登录
docker login -u <用户名> # 登录

我这里服务器开vpn也没法拉取镜像,所以选择本地拉取镜像并保存为.tar文件,然后传输到服务器中

  1. 本地通过vpn拉取镜像:

    1
    
    docker compose up -d
  2. 查看镜像:

    1
    
    sudo docker compose images

    这里输出如下:

    1
    2
    3
    4
    
    CONTAINER           REPOSITORY          TAG                 IMAGE ID            SIZE
    mongo               mongo               latest              15fb53a5160e        292MB
    mx-server           innei/mx-server     latest              906326c82174        164MB
    redis               redis               alpine              48501c5ad00d        24.3MB
  3. 将所需镜像打包为.tar文件:

    1
    2
    3
    
    sudo docker save -o mongo.tar mongo
    sudo docker save -o mx-server.tar innei/mx-server
    sudo docker save -o redis.tar redis
  4. 传到服务器,文件夹没有要求,我直接放到mx-space/core路径下了

  5. 加载镜像

    1
    2
    3
    
    sudo docker load -i mongo.tar
    sudo docker load -i mx-server.tar
    sudo docker load -i redis.tar
  6. 验证是否成功加载

    1
    
    sudo docker images
  7. 启动

    1
    
    sudo docker compose up -d

启动后可以在浏览器中访问服务器IP+2333端口来测试后端是否正常运行:

1
http://<服务器IP>:2333

如果正常运行会显示如下界面:

PixPin_2025-06-09_19-41-35

docker相关指令

exec进入容器

Docker 原生支持直接进入容器:

1
docker exec -it <容器ID或名称> /bin/bash

例如:docker exec -it mx-server bash

ps查看容器

1
2
3
4
# 查看所有容器(包括运行中和已停止的)
docker ps -a
# 仅查看正在运行的容器
docker ps

退出终端

  1. 直接退出

    1
    
    exit

    或者Ctrl+D也可以

  2. 保持容器运行但断开连接

    如果不想终止容器内的进程,可以按以下组合键:

    1
    
    Ctrl + P, Ctrl + Q
  3. 强制终止连接(不推荐)

    如果终端卡死或无响应,可以强制关闭终端窗口或使用:

    1
    
    kill -9 <终端进程ID>  # 极端情况下使用

配置反向代理

这里使用宝塔面板配置反向代理

安装宝塔面板

  1. 更新系统软件包

    1
    
    sudo apt update && sudo apt upgrade -y
  2. 安装宝塔面板

    1
    
    if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_panel.sh;else wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh;fi;bash install_panel.sh ed8484bec
  3. 安装完成后会输出信息,需要记录一下 PixPin_2025-06-10_20-10-56

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    
     请选择以下其中一种方式解决不安全提醒
     1、下载证书,地址:https://dg2.bt.cn/ssl/baota_root.pfx,双击安装,密码【www.bt.cn】
     2、点击【高级】-【继续访问】或【接受风险并继续】访问
     教程:https://www.bt.cn/bbs/thread-117246-1-1.html
     mac用户请下载使用此证书:https://dg2.bt.cn/ssl/mac.crt
    
    ========================面板账户登录信息==========================
    
     【云服务器】请在安全组放行 22622 端口
     外网ipv4面板地址: https://120.26.143.148:8888/cbba2002
     内网面板地址:     https://172.26.165.49:8888/cbba2002
     username: 169017267@qq.com
     password: General@0609
    
     浏览器访问以下链接,添加宝塔客服
     https://www.bt.cn/new/wechat_customer
    ==================================================================
  4. 登录面板后就可以将面板地址、账号、密码等修改掉了

    我这里出现了一个小问题,面板设置中修改面板端口后无法访问,在命令行中使用bt命令(8)再次修改为8888才能正常使用

配置反向代理

我这里已经安装过Nginx了,但是宝塔面板中显示未安装Nginx,我搜了一下,论坛中说宝塔面板不推荐在已有环境的上进行安装使用,且无法接入管理自行安装的环境服务。所以只能手动将nginx卸载掉,重新用宝塔安装一个了

1
2
3
# 彻底卸载原有 Nginx(谨慎操作!)
sudo apt purge nginx nginx-common nginx-core -y
sudo rm -rf /etc/nginx /var/log/nginx

然后在宝塔面板中重新安装nginx

进入「宝塔面板」>「网站」>「设置后端网站地址」,设置为060010.xyz

主机名随意填,记得解析

新建完站点后,「站点」>「设置」>「反向代理」>「添加反向代理」

代理名字这里方便管理就设置为 后端

目标URL: http://127.0.0.1:2333 发送域名: $host

PixPin_2025-06-10_21-15-34

保存后点击 配置文件 将下方配置文件文本复制复制进去,记得全选删掉以前的配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#PROXY-START/
location /socket.io {
    proxy_http_version 1.1;
    proxy_buffering off;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass http://127.0.0.1:2333/socket.io;
}


location /
{
    proxy_pass http://127.0.0.1:2333/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    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;

    #Set Nginx Cache


    set $static_fileJsNv8TWb 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
        set $static_fileJsNv8TWb 1;
        expires 12h;
        }
    if ( $static_fileJsNv8TWb = 0 )
    {
    add_header Cache-Control no-cache;
    }
}

#PROXY-END/

域名解析

在域名提供商那里配置DNS解析 PixPin_2025-06-10_21-33-14

我这里配置了两个:

  • 记录类型:A,解析名称:@,内容:<服务器IP地址>。这个就是060010.xyz
  • 记录类型:A,解析名称:www,内容:<服务器IP地址>。这个就是www.060010.xyz

设置好域名解析后,我们在浏览器中访问这两个链接,页面会是空白或者提示"您的请求在Web服务器 中没有找到对应的站点",这是因为我们还没有设置服务器绑定 PixPin_2025-06-10_21-37-20

配置SSL证书

这里申请了Let’s Encrypt的免费证书,需要手动配置TXT解析来验证

PixPin_2025-06-10_22-01-42

以060010.xyz的解析为例,这里给出以下内容:

PixPin_2025-06-10_22-03-14

  • 解析域名:060010.xyz
  • 文件路径:/www/wwwroot/060010.xyz.well-known/acme-challenge/LvnEq8aat……
  • 文件内容:LvnEq8aata……

只需要到域名提供商那里配置对应的TXT解析即可,这个就是填加一条解析,解析类型选TXT,名称填_acme-challenge.060010.xyz,内容填上面的文件内容,然后保存

PixPin_2025-06-10_22-06-09

PixPin_2025-06-10_22-08-44

前端部署

我这里部署的是Shiro主题,官方文档如下:部署 - Mix Space 文档

前提要求

  • 你已安装 Mix Space 后端并且已启动
  • (选择 Vercel 部署)已注册 VercelGitHub 账号

设置主题配置

进入 Mix Space 后台,后台链接如下:

1
服务器IP:2333/proxy/qaqdmin

填写站点配置

PixPin_2025-06-10_18-57-19

进入「配置与云函数」页面,点击右上角的新增按钮,在编辑页面中,填入以下设置:

  • 名称:shiro
  • 引用:theme
  • 数据类型:JSON
  • 数据:(点击下方的按钮复制)

请注意,这份配置你需要自行修改成符合你的需求的配置。直接使用下面的配置可能会导致你的博客无法按照你的预期运行。

下面的配置可能不全,更多配置项的信息请移步 配置项 了解。

此外,配置也可写成 yaml 格式,此时数据类型应选择 YAML

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
{
  "footer": {
    "otherInfo": {
      "date": "2020-{{now}}",
      "icp": {
        "text": "萌 ICP 备 20236136 号",
        "link": "https://icp.gov.moe/?keyword=20236136"
      }
    },
    "linkSections": [
      {
        "name": "关于",
        "links": [
          {
            "name": "关于本站",
            "href": "/about-site"
          },
          {
            "name": "关于我",
            "href": "/about"
          },
          {
            "name": "关于此项目",
            "href": "https://github.com/innei/Shiro",
            "external": true
          }
        ]
      },
      {
        "name": "更多",
        "links": [
          {
            "name": "时间线",
            "href": "/timeline"
          },
          {
            "name": "友链",
            "href": "/friends"
          },
          {
            "name": "监控",
            "href": "https://status.innei.in/status/main",
            "external": true
          }
        ]
      },
      {
        "name": "联系",
        "links": [
          {
            "name": "写留言",
            "href": "/message"
          },
          {
            "name": "发邮件",
            "href": "mailto:i@innei.ren",
            "external": true
          },
          {
            "name": "GitHub",
            "href": "https://github.com/innei",
            "external": true
          }
        ]
      }
    ]
  },
  "config": {
    "color": {
      "light": [
        "#33A6B8",
        "#FF6666",
        "#26A69A",
        "#fb7287",
        "#69a6cc",
        "#F11A7B",
        "#78C1F3",
        "#FF6666",
        "#7ACDF6"
      ],
      "dark": [
        "#F596AA",
        "#A0A7D4",
        "#ff7b7b",
        "#99D8CF",
        "#838BC6",
        "#FFE5AD",
        "#9BE8D8",
        "#A1CCD1",
        "#EAAEBA"
      ]
    },
 
    "bg": [
      "/static/images/F0q8mwwaIAEtird.jpeg",
      "/static/images/IMG_2111.jpeg.webp.jpg"
    ],
    "custom": {
      "css": [],
      "styles": [],
      "js": [],
      "scripts": []
    },
    "site": {
      "favicon": "/innei.svg",
      "faviconDark": "/innei-dark.svg"
    },
    "hero": {
      "title": {
        "template": [
          {
            "type": "h1",
            "text": "Hi, I'm ",
            "class": "font-light text-4xl"
          },
          {
            "type": "h1",
            "text": "Innei",
            "class": "font-medium mx-2 text-4xl"
          },
          {
            "type": "h1",
            "text": "👋。",
            "class": "font-light text-4xl"
          },
          {
            "type": "br"
          },
          {
            "type": "h1",
            "text": "A NodeJS Full Stack ",
            "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": "An independent developer coding with love."
    },
    "module": {
      "activity": {
        "enable": true,
        "endpoint": "/fn/ps/update"
      },
      "donate": {
        "enable": true,
        "link": "https://afdian.net/@Innei",
        "qrcode": [
          "/static/images/20191211132347.png",
          "/static/images/0424213144.png"
        ]
      },
      "bilibili": {
        "liveId": 1434499
      }
    }
  }
}

点击按钮保存配置,随后继续进行下面的步骤。

准备Clerk账号

此部分参考教程:Mix Space博客系统搭建 - 哔哩哔哩

在 Shiro 主题中需要用到 Clerk,所以需要去 Clerk 官网(https://clerk.com)注册一个账号 注册完之后保存好控制台中的信息

PixPin_2025-06-11_13-57-39

安装npm

1
sudo apt install npm

安装pnpm

1
npm install -g pnpm

部署

Vercel构建

进入https://github.com/innei/Shiro

Fork这个仓库到自己账号下

进入Vercel-New Project,选择刚才Fork的仓库

等待构建

本地

在终端输入

1
2
3
cd ~/mx-space
git clone https://github.com/Innei/Shiro.git
cd Shiro

然后

1
vim .env

将之前保存的这些内容输入到.env文件里,api地址和域名是启动后端时填的,CLERK公钥和私钥在上面准备Clerk账号时保存了,注释删掉

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
# 你的API地址
NEXT_PUBLIC_API_URL=
# 你的API域名
NEXT_PUBLIC_GATEWAY_URL=
# CLERK 公钥
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
# CLERK 私钥
CLERK_SECRET_KEY=
# OpenAI Key(不多说了,自己看着整吧)
OPENAI_API_KEY=

然后输入:

1
2
pnpm i
pnpm build

结束后终端里输出的内容如下

PixPin_2025-06-11_14-33-08

我们把它作为系统服务启动

1
vim /etc/systemd/system/mx-shiro.service

然后输入以下内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
[Unit]
Description=MX-Space Shiro Theme Daemon
After=network.target

[Install]
WantedBy=multi-user.target

[Service]
Type=simple
WorkingDirectory=/opt/mx-space/Shiro
ExecStart=npx next start -p 2323
Restart=always

使用以下命令启动

1
2
systemctl enable mx-shiro
systemctl start mx-shiro
0%