后端部署#

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

安装docker#

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

检查卸载老版本docker

注：docker的旧版本不一定被称为docker，docker.io 或 docker-engine也有可能，所以我们卸载的命令为：
Terminal window
```
1
sudo apt-get remove docker docker-engine docker.io containerd runc
```
更新软件包
Terminal window
```
1
sudo apt update
2
sudo apt upgrade
```
安装docker依赖 Docker在Ubuntu上依赖一些软件包。执行以下命令来安装这些依赖:
Terminal window
```
1
sudo apt-get install ca-certificates curl gnupg lsb-release
```

添加Docker官方GPG密钥旧方法，已废弃：

1
# 旧方法，已废弃
2
curl -fsSL http://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -

apt-key 命令已被弃用，并且推荐使用新的方法管理 APT 密钥。具体来说，应该将 GPG 密钥放入 trusted.gpg.d 目录中，而不是使用 apt-key。

新的方法，以符合新规范的方式将 Docker 的 GPG 密钥添加到 APT 的密钥管理中

1
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo tee /etc/apt/trusted.gpg.d/docker.asc
2
···
3

4
5. 添加Docker软件源
5
 ```bash
6
 sudo add-apt-repository "deb [arch=amd64] http://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable"

安装Docker

1
sudo apt-get install docker-ce docker-ce-cli containerd.io

配置用户组（可选）默认情况下，只有root用户和docker组的用户才能运行Docker命令。我们可以将当前用户添加到docker组，以避免每次使用Docker时都需要使用sudo。命令如下：
Terminal window
```
1
sudo usermod -aG docker $USER
```
注：重新登录才能使更改生效。

配置后可以查看通过以下命令查看docker用户组成员：
Terminal window
```
1
getent group docker
```

安装工具

1
sudo apt-get -y install apt-transport-https ca-certificates curl software-properties-common

重启Docker
Terminal window
```
1
service docker restart
```

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

1
docker -v
2
docker compose version

拉取配置文件#

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

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

配置Core启动配置文件#

在官方文档中填入对应配置

PixPin_2025-06-09_19-33-10

填好后，复制配置，粘贴到教程指定的docker-compose.yml 里 environment 字段中

启动Core#

1
docker compose up -d

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

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

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

本地通过vpn拉取镜像：
Terminal window
```
1
docker compose up -d
```

查看镜像：

1
sudo docker compose images

这里输出如下：

1
CONTAINER           REPOSITORY          TAG                 IMAGE ID            SIZE
2
mongo               mongo               latest              15fb53a5160e        292MB
3
mx-server           innei/mx-server     latest              906326c82174        164MB
4
redis               redis               alpine              48501c5ad00d        24.3MB

将所需镜像打包为.tar文件：

1
sudo docker save -o mongo.tar mongo
2
sudo docker save -o mx-server.tar innei/mx-server
3
sudo docker save -o redis.tar redis

传到服务器，文件夹没有要求，我直接放到mx-space/core路径下了

加载镜像

1
sudo docker load -i mongo.tar
2
sudo docker load -i mx-server.tar
3
sudo docker load -i redis.tar

验证是否成功加载
Terminal window
```
1
sudo docker images
```
启动
Terminal window
```
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
docker ps -a
3
# 仅查看正在运行的容器
4
docker ps

退出终端

直接退出
Terminal window
```
1
exit
```
或者Ctrl+D也可以
保持容器运行但断开连接

如果不想终止容器内的进程，可以按以下组合键：
Terminal window
```
1
Ctrl + P, Ctrl + Q
```
强制终止连接（不推荐）

如果终端卡死或无响应，可以强制关闭终端窗口或使用：
Terminal window
```
1
kill -9 <终端进程ID>  # 极端情况下使用
```

配置反向代理#

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

安装宝塔面板#

更新系统软件包
Terminal window
```
1
sudo apt update && sudo apt upgrade -y
```

安装宝塔面板

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

安装完成后会输出信息，需要记录一下 PixPin_2025-06-10_20-10-56

1
 请选择以下其中一种方式解决不安全提醒
2
 1、下载证书，地址：https://dg2.bt.cn/ssl/baota_root.pfx，双击安装,密码【www.bt.cn】
3
 2、点击【高级】-【继续访问】或【接受风险并继续】访问
4
 教程：https://www.bt.cn/bbs/thread-117246-1-1.html
5
 mac用户请下载使用此证书：https://dg2.bt.cn/ssl/mac.crt
6

7
========================面板账户登录信息==========================
8

9
 【云服务器】请在安全组放行 22622 端口
10
 外网ipv4面板地址: https://120.26.143.148:8888/cbba2002
11
 内网面板地址:     https://172.26.165.49:8888/cbba2002
12
 username: 169017267@qq.com
13
 password: General@0609
14

15
 浏览器访问以下链接，添加宝塔客服
16
 https://www.bt.cn/new/wechat_customer
17
==================================================================

登录面板后就可以将面板地址、账号、密码等修改掉了

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

配置反向代理#

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

1
# 彻底卸载原有 Nginx（谨慎操作！）
2
sudo apt purge nginx nginx-common nginx-core -y
3
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
#PROXY-START/
2
location /socket.io {
3
    proxy_http_version 1.1;
4
    proxy_buffering off;
5
    proxy_set_header Upgrade $http_upgrade;
6
    proxy_set_header Connection "Upgrade";
7
    proxy_pass http://127.0.0.1:2333/socket.io;
8
}
9

10

11
location /
12
{
13
    proxy_pass http://127.0.0.1:2333/;
14
    proxy_set_header Host $host;
15
    proxy_set_header X-Real-IP $remote_addr;
16
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
17
    proxy_set_header REMOTE-HOST $remote_addr;
18

19
    add_header X-Cache $upstream_cache_status;
20

21
    #Set Nginx Cache
22

23

24
    set $static_fileJsNv8TWb 0;
25
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
26
    {
27
        set $static_fileJsNv8TWb 1;
28
        expires 12h;
29
        }
30
    if ( $static_fileJsNv8TWb = 0 )
31
    {
32
    add_header Cache-Control no-cache;
33
    }
34
}
35

36
#PROXY-END/

该配置是按照官方文档的双域名配置的，具体参考拓展内容 - Mix Space 文档的双域名部分

测试能否访问后端#

上面反向代理是按照双域名（前端和后端有自己单独的域名）配置的，则后台地址就是<后端域名>/proxy/qaqdmin（也可以临时用<服务器IP>:2333/proxy/qaqdmin来访问后台）

域名解析#

在域名提供商那里配置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

1panel配置反向代理#

新的服务器安装的是1panel，所以整理了一下1panel的配置过程

首先默认已经安装了OpenResty

PixPin_2025-08-12_18-12-58

「网站」>「创建网站」>「反向代理」>「填写域名」，创建成功后，点击新建的域名右侧「操作」>「配置」>「配置文件」，打开该域名的配置文件，需要在原配置文件的基础上添加以下内容：

1
    location /socket.io {
2
        proxy_pass http://127.0.0.1:2333/socket.io;
3
        proxy_set_header Host $host;
4
        proxy_set_header X-Real-IP $remote_addr;
5
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
6
        proxy_set_header REMOTE-HOST $remote_addr;
7
        proxy_set_header Upgrade $http_upgrade;
8
        proxy_set_header Connection "upgrade";
9
        proxy_buffering off;
10
        proxy_http_version 1.1;
11
        add_header Cache-Control no-cache;
12
    }
13

14
   location / {
15
        proxy_pass http://127.0.0.1:2333;
16
        proxy_set_header Host $host;
17
        proxy_set_header X-Real-IP $remote_addr;
18
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
19
        proxy_set_header REMOTE-HOST $remote_addr;
20
        add_header X-Cache $upstream_cache_status;
21
    }

这个在宝塔面板中添加是没有问题的，但是在1panel中添加后发现了一个问题，报错大概内容是这样的（非直接复制，上下文顺序可能有问题，仅供参考）：

location / in /www/sites/mx_cbba_top/proxy/root.conf:1 nginx: [emerg] 服务内部错误：stderr.2025/08/1217:46:23[emerg]379#379 configuration file /usr/local/openresty/nginx/conf/nginx.conf test failedduplicate location ”/ in /www/sites/mx_ cbba_ top/proxy/root.conf:1 nginx:

说明我在 Nginx 配置中添加了 location / 反向代理规则，但是和/www/sites/mx_ cbba_ top/proxy/root.conf中的 location / 冲突了

大概有两个解决思路：

删掉root.conf中冲突的 location / 部分内容
将root.conf中冲突的 location / 部分内容合并到主配置文件中，然后注释掉include行

我选择将冲突部分合并到主配置文件中，不修改原本的root.conf

root.conf中内容主要是 location / 这部分，我直接写进这个文件的 location / 部分了，合并后内容如下：

1
server {
2
    listen 80 ;
3
    listen [::]:80 ;
4
    listen 443 ssl ;
5
    listen [::]:443 ssl ;
6
    server_name mxserver.cbba.top;
7
    index index.php index.html index.htm default.php default.htm default.html;
8

9
    # 全局代理头设置
10
    proxy_set_header Host $host;
11
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
12
    proxy_set_header X-Forwarded-Host $server_name;
13
    proxy_set_header X-Real-IP $remote_addr;
14
    proxy_http_version 1.1;
15
    proxy_set_header Upgrade $http_upgrade;
16
    proxy_set_header Connection "upgrade";
17

18
    # 日志
19
    access_log /www/sites/mxserver_cbba_top/log/access.log main;
20
    error_log /www/sites/mxserver_cbba_top/log/error.log;
21

22
    # 静态文件
23
    location ^~ /.well-known {
24
        allow all;
25
        root /usr/share/nginx/html;
26
    }
27

28
    # HTTP强制跳转HTTPS
29
    if ($scheme = http) {
30
        return 301 https://$host$request_uri;
31
    }
32

33
    # SSL配置
34
    ssl_certificate /www/sites/mxserver_cbba_top/ssl/fullchain.pem;
35
    ssl_certificate_key /www/sites/mxserver_cbba_top/ssl/privkey.pem;
36
    ssl_protocols TLSv1.3 TLSv1.2 TLSv1.1 TLSv1;
37
    ssl_ciphers ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:!aNULL:!eNULL:!EXPORT:!DSS:!DES:!RC4:!3DES:!MD5:!PSK:!KRB5:!SRP:!CAMELLIA:!SEED;
38
    ssl_prefer_server_ciphers off;
39
    ssl_session_cache shared:SSL:10m;
40
    ssl_session_timeout 10m;
41
    error_page 497 https://$host$request_uri;
42
    proxy_set_header X-Forwarded-Proto https;
43
    add_header Strict-Transport-Security "max-age=31536000";
44
    http2 on;
45

46
    # WebSocket支持（Socket.IO）
47
    location /socket.io {
48
        proxy_pass http://127.0.0.1:2333/socket.io;
49
        proxy_set_header Host $host;
50
        proxy_set_header X-Real-IP $remote_addr;
51
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
52
        proxy_set_header REMOTE-HOST $remote_addr;
53
        proxy_set_header Upgrade $http_upgrade;
54
        proxy_set_header Connection "upgrade";
55
        proxy_buffering off;
56
        proxy_http_version 1.1;
57
        add_header Cache-Control no-cache;
58
    }
59

60
    # 默认反向代理
61
    location / {
62
        proxy_pass http://127.0.0.1:2333;
63
        proxy_set_header Host $host;
64
        proxy_set_header X-Real-IP $remote_addr;
65
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
66
        proxy_set_header REMOTE-HOST $remote_addr;
67
        add_header X-Cache $upstream_cache_status;
68

69
        # 从root.conf补充的配置
70
        proxy_set_header Upgrade $http_upgrade;
71
        proxy_set_header Connection $http_connection;
72
        proxy_set_header X-Forwarded-Proto $scheme;
73
        proxy_set_header X-Forwarded-Port $server_port;
74
        proxy_http_version 1.1;
75
        add_header Cache-Control no-cache;
76
        proxy_ssl_server_name off;
77
        proxy_ssl_name $proxy_host;
78
    }
79

80
    # 其它代理配置（暂时禁用，与当前配置文件的location /冲突，选择将root.conf中的内容写到当前文件中）
81
    # include /www/sites/mxserver_cbba_top/proxy/*.conf;
82
}

保存并重载Nginx后，可以通过<域名>/proxy/qaqdmin访问后端页面

⚠️注意：该配置是按照官方文档的双域名配置的，具体参考拓展内容 - Mix Space 文档的双域名部分

PixPin_2025-08-12_19-26-37

前端部署#

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

前提要求#

你已安装 Mix Space 后端并且已启动
（选择 Vercel 部署）已注册 Vercel 和 GitHub 账号

设置主题配置#

进入 Mix Space 后台，后台链接如下：

1
服务器IP:2333/proxy/qaqdmin

填写站点配置

PixPin_2025-06-10_18-57-19

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

名称：shiro
引用：theme
数据类型：JSON
数据：（点击下方的按钮复制）

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

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

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

1
{
2
  "footer": {
3
    "otherInfo": {
4
      "date": "2020-{{now}}",
5
      "icp": {
6
        "text": "萌 ICP 备 20236136 号",
7
        "link": "https://icp.gov.moe/?keyword=20236136"
8
      }
9
    },
10
    "linkSections": [
11
      {
12
        "name": "关于",
13
        "links": [
14
          {
15
            "name": "关于本站",
16
            "href": "/about-site"
17
          },
18
          {
19
            "name": "关于我",
20
            "href": "/about"
21
          },
22
          {
23
            "name": "关于此项目",
24
            "href": "https://github.com/innei/Shiro",
25
            "external": true
26
          }
27
        ]
28
      },
29
      {
30
        "name": "更多",
31
        "links": [
32
          {
33
            "name": "时间线",
34
            "href": "/timeline"
35
          },
36
          {
37
            "name": "友链",
38
            "href": "/friends"
39
          },
40
          {
41
            "name": "监控",
42
            "href": "https://status.innei.in/status/main",
43
            "external": true
44
          }
45
        ]
46
      },
47
      {
48
        "name": "联系",
49
        "links": [
50
          {
51
            "name": "写留言",
52
            "href": "/message"
53
          },
54
          {
55
            "name": "发邮件",
56
            "href": "mailto:i@innei.ren",
57
            "external": true
58
          },
59
          {
60
            "name": "GitHub",
61
            "href": "https://github.com/innei",
62
            "external": true
63
          }
64
        ]
65
      }
66
    ]
67
  },
68
  "config": {
69
    "color": {
70
      "light": [
71
        "#33A6B8",
72
        "#FF6666",
73
        "#26A69A",
74
        "#fb7287",
75
        "#69a6cc",
76
        "#F11A7B",
77
        "#78C1F3",
78
        "#FF6666",
79
        "#7ACDF6"
80
      ],
81
      "dark": [
82
        "#F596AA",
83
        "#A0A7D4",
84
        "#ff7b7b",
85
        "#99D8CF",
86
        "#838BC6",
87
        "#FFE5AD",
88
        "#9BE8D8",
89
        "#A1CCD1",
90
        "#EAAEBA"
91
      ]
92
    },
93

94
    "bg": [
95
      "/static/images/F0q8mwwaIAEtird.jpeg",
96
      "/static/images/IMG_2111.jpeg.webp.jpg"
97
    ],
98
    "custom": {
99
      "css": [],
100
      "styles": [],
101
      "js": [],
102
      "scripts": []
103
    },
104
    "site": {
105
      "favicon": "/innei.svg",
106
      "faviconDark": "/innei-dark.svg"
107
    },
108
    "hero": {
109
      "title": {
110
        "template": [
111
          {
112
            "type": "h1",
113
            "text": "Hi, I'm ",
114
            "class": "font-light text-4xl"
115
          },
116
          {
117
            "type": "h1",
118
            "text": "Innei",
119
            "class": "font-medium mx-2 text-4xl"
120
          },
121
          {
122
            "type": "h1",
123
            "text": "👋。",
124
            "class": "font-light text-4xl"
125
          },
126
          {
127
            "type": "br"
128
          },
129
          {
130
            "type": "h1",
131
            "text": "A NodeJS Full Stack ",
132
            "class": "font-light text-4xl"
133
          },
134
          {
135
            "type": "code",
136
            "text": "<Developer />",
137
            "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"
138
          },
139
          {
140
            "type": "span",
141
            "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"
142
          }
143
        ]
144
      },
145
      "description": "An independent developer coding with love."
146
    },
147
    "module": {
148
      "activity": {
149
        "enable": true,
150
        "endpoint": "/fn/ps/update"
151
      },
152
      "donate": {
153
        "enable": true,
154
        "link": "https://afdian.net/@Innei",
155
        "qrcode": [
156
          "/static/images/20191211132347.png",
157
          "/static/images/0424213144.png"
158
        ]
159
      },
160
      "bilibili": {
161
        "liveId": 1434499
162
      }
163
    }
164
  }
165
}

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

准备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
cd ~/mx-space
2
git clone https://github.com/Innei/Shiro.git
3
cd Shiro

然后

1
vim .env

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

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

然后输入：

1
pnpm i
2
pnpm build

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

PixPin_2025-06-11_14-33-08

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

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

然后输入以下内容

1
[Unit]
2
Description=MX-Space Shiro Theme Daemon
3
After=network.target
4

5
[Install]
6
WantedBy=multi-user.target
7

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

使用以下命令启动

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