Mx Space + Shiro + Nginx Proxy Manager 反向代理部署#

前言#

Mix Space 是一款简洁而不简单的个人博客系统，它够快，够现代。你可以利用它构建一个属于自己的个人空间，记录生活，分享知识。

Mix Space 官方文档

本教程采用 Nginx Proxy Manager 反向代理前后端。

前端域名：zinzin.top
后端域名：mx.zinzin.top

准备工作#

你需要准备以下内容：

一台服务器（Linux 内核版本 > 4.18，运行内存 > 1GiB，教程以 Debian 11 为例）
已经映射到服务器 IP 地址的域名
Docker 环境

安装 Nginx Proxy Manager 反向代理管理软件#

在任意目录下创建 docker-compose.yml 文件，内容如下：

1
services:
2
  app:
3
    image: 'jc21/nginx-proxy-manager:latest'
4
    restart: unless-stopped
5
    ports:
6
      - '80:80'
7
      - '81:81'
8
      - '443:443'
9
    volumes:
10
      - ./data:/data
11
      - ./letsencrypt:/etc/letsencrypt

保存文件后执行以下命令启动服务：
Terminal window
```
1
docker-compose up -d
2

3
# 或者
4
docker compose up -d
```
如果你是第一次使用，可以参考以下指南了解更多：
- 推荐一个nginx管理工具 Nginx Proxy Manager
- 官方指南

部署后端#

拉取配置文件：

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

编辑 docker-compose.yml 文件中的 environment 字段，配置以下信息：
- JWT 密钥（JWT_SECRET）：长度为 16 到 32 个字符的字符串，用于加密用户的 JWT。
- 被允许的域名（ALLOWED_ORIGINS）：通常是前端的域名，多个域名用英文逗号分隔。
- 是否开启加密（ENCRYPT_ENABLE）：如果需要加密，将 false 改为 true，并填写加密密钥。
- 加密密钥（ENCRYPT_KEY）：长度必须为 64 位。

以下是一个示例配置，设置了 jwt 密钥和允许域名需根据自己的域名和密钥进行修改：

1
services:
2
  app:
3
    container_name: mx-server
4
    image: innei/mx-server:latest
5
    environment:
6
      - TZ=Asia/Shanghai
7
      - NODE_ENV=production
8
      - DB_HOST=mongo
9
      - REDIS_HOST=redis
10
      - ALLOWED_ORIGINS=zinzin.top
11
      - JWT_SECRET=Yy14003252791400325279
12
    volumes:
13
      - ./data/mx-space:/root/.mx-space
14
    ports:
15
      - '2333:2333'
16
    depends_on:
17
      - mongo
18
      - redis
19
    networks:
20
      - mx-space
21
    restart: unless-stopped
22
    healthcheck:
23
      test: ['CMD', 'curl', '-f', 'http://127.0.0.1:2333/api/v2/ping']
24
      interval: 1m30s
25
      timeout: 30s
26
      retries: 5
27
      start_period: 30s
28

29
  mongo:
30
    container_name: mongo
31
    image: mongo
32
    volumes:
33
      - ./data/db:/data/db
34
    networks:
35
      - mx-space
36
    restart: unless-stopped
37

38
  redis:
39
    image: redis:alpine
40
    container_name: redis
41
    volumes:
42
      - ./data/redis:/data
43
    healthcheck:
44
      test: ['CMD-SHELL', 'redis-cli ping | grep PONG']
45
      start_period: 20s
46
      interval: 30s
47
      retries: 5
48
      timeout: 3s
49
    networks:
50
      - mx-space
51
    restart: unless-stopped
52

53
networks:
54
  mx-space:
55
    driver: bridge

启动后端服务：

1
docker-compose up -d
2

3
# 或者
4
docker compose up -d

完成后，你会看到如下截图：

core完成截图

Nginx Proxy Manager 反向代理 Mx Space 后端#

打开 Nginx Proxy Manager 的管理页面，按照以下步骤设置：

nginx步骤-1

nginx步骤-2

注意：国内服务器可能因网络原因自动申请证书失败，需要多尝试几次，或上传证书。
成功后，访问 https://mx.zinzin.top/proxy/qaqdmin 进行初始化设置：

初始化后端页面
部署成功后的后台页面：

后台管理页面

开始部署前端 Shiro#

1. 设置主题配置#

进入后台，点击”附加功能-配置与云函数”，填入以下内容：

名称：shiro
引用：theme
数据类型：JSON
数据：见下方 JSON 配置。

json

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
      "https://github.com/Innei/static/blob/master/images/F0q8mwwaIAEtird.jpeg?raw=true",
96
      "https://github.com/Innei/static/blob/master/images/IMG_2111.jpeg.webp.jpg?raw=true"
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
          "https://cdn.jsdelivr.net/gh/Innei/img-bed@master/20191211132347.png",
157
          "https://cdn.innei.ren/bed/2023/0424213144.png"
158
        ]
159
      },
160
      "bilibili": {
161
        "liveId": 1434499
162
      }
163
    }
164
  }
165
}

提示：详细配置说明请参考官方文档：配置项。

2. 使用 Docker Compose 部署 Shiro#

创建并进入 shiro 目录：
Terminal window
```
1
mkdir shiro
2
cd shiro
```

下载相关文件：

1
wget https://raw.githubusercontent.com/Innei/Shiro/main/docker-compose.yml
2
wget https://raw.githubusercontent.com/Innei/Shiro/main/.env.template
3
mv .env.template .env

修改 .env 文件中的后台地址：
Terminal window
```
1
vim .env # 修改你的 ENV变量
```
env改为刚刚配置的后台接口

保存后启动服务：
Terminal window
```
1
docker compose up -d
2

3
# 或者
4
docker-compose up -d
```
后续更新镜像：
Terminal window
```
1
docker compose pull
```

3. Nginx Proxy Manager 反向代理 Shiro#

按照提示配置反向代理即可，如果服务都运行在同一台机器可以直接写内网 ip 地址。

最终访问主站点#

完成所有部署后，访问 https://zinzin.top 即可看到主站点：

大功告成！！

如果部署中还遇到其他问题可以参考社区：

社区分享

yono佬国内服务器部署补充

补充#

如国内服务器使用 Nginx Proxy Manager 自动申请一直网络错误失败，可在国内对应域名厂商手动申请证书后，根据证书后缀上传至 Nginx Proxy Manager 即可。

音乐

音乐