Deploying Mx Space + Shiro with Nginx Proxy Manager Reverse Proxy#

Introduction#

Mix Space is a simple yet powerful personal blog system — fast, modern, and clean. You can use it to build your own personal space, record your life, and share knowledge.

Mix Space Official Docs

This tutorial uses Nginx Proxy Manager to reverse-proxy both frontend and backend.

Frontend domain: zinzin.top
Backend domain: mx.zinzin.top

Prerequisites#

You’ll need the following:

A server (Linux kernel version > 4.18, RAM > 1GiB; this tutorial uses Debian 11)
A domain name mapped to your server’s IP
Docker installed

Install Nginx Proxy Manager#

Create a docker-compose.yml file in any directory:

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

Save the file and start the service:

1
docker-compose up -d
2

3
# Or
4
docker compose up -d

If you’re a first-time user, refer to these guides:
- A recommended nginx management tool: Nginx Proxy Manager
- Official guide

Deploy the Backend#

Pull the configuration file:

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

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

Edit the environment fields in docker-compose.yml:
- JWT_SECRET: A string of 16 to 32 characters used to encrypt user JWTs.
- ALLOWED_ORIGINS: Usually the frontend domain; separate multiple domains with commas.
- ENCRYPT_ENABLE: Change false to true if encryption is needed, and fill in the encryption key.
- ENCRYPT_KEY: Must be 64 characters long.

Here’s an example configuration — set the JWT secret and allowed domains according to your own setup:

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

Start the backend service:

1
docker-compose up -d
2

3
# Or
4
docker compose up -d

Once done, you’ll see a screen like this:

core setup complete

Reverse Proxy the Mx Space Backend with Nginx Proxy Manager#

Open the Nginx Proxy Manager admin panel and follow these steps:

nginx step 1

nginx step 2

Note: On servers in mainland China, automatic certificate issuance may fail due to network issues. Try a few times, or upload a certificate manually.
After it succeeds, visit https://mx.zinzin.top/proxy/qaqdmin for initial setup:

initial backend setup page
The admin panel after successful deployment:

backend admin panel

Deploy the Shiro Frontend#

1. Configure the Theme#

In the admin panel, go to “Extras – Config & Cloud Functions” and fill in the following:

Name: shiro
Reference: theme
Data type: JSON
Data: See the JSON config below.

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": "About",
13
        "links": [
14
          {
15
            "name": "About this site",
16
            "href": "/about-site"
17
          },
18
          {
19
            "name": "About me",
20
            "href": "/about"
21
          },
22
          {
23
            "name": "About this project",
24
            "href": "https://github.com/innei/Shiro",
25
            "external": true
26
          }
27
        ]
28
      },
29
      {
30
        "name": "More",
31
        "links": [
32
          {
33
            "name": "Timeline",
34
            "href": "/timeline"
35
          },
36
          {
37
            "name": "Friends",
38
            "href": "/friends"
39
          },
40
          {
41
            "name": "Monitor",
42
            "href": "https://status.innei.in/status/main",
43
            "external": true
44
          }
45
        ]
46
      },
47
      {
48
        "name": "Contact",
49
        "links": [
50
          {
51
            "name": "Leave a message",
52
            "href": "/message"
53
          },
54
          {
55
            "name": "Send email",
56
            "href": "mailto:[email protected]",
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
}

Tip: For detailed configuration, refer to the official docs: Config Options.

2. Deploy Shiro with Docker Compose#

Create and enter the shiro directory:
Terminal window
```
1
mkdir shiro
2
cd shiro
```

Download the required files:

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

Update the backend URL in the .env file:
Terminal window
```
1
vim .env # Edit your ENV variables
```
set the backend URL in env

After saving, start the service:
Terminal window
```
1
docker compose up -d
2

3
# Or
4
docker-compose up -d
```
To update the image later:
Terminal window
```
1
docker compose pull
```

3. Reverse Proxy Shiro with Nginx Proxy Manager#

Follow the prompts to configure the reverse proxy. If all services run on the same machine, you can use internal IP addresses directly.

Access the Main Site#

Once everything is deployed, visit https://zinzin.top to see the main site:

Done!!

If you run into other issues during deployment, check the community:

Community

Additional notes for mainland China servers

Notes#

If automatic certificate issuance keeps failing with network errors on a mainland China server, you can manually apply for a certificate from your domain registrar and upload it to Nginx Proxy Manager.

Music