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

14 天前
17

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 反向代理管理软件

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

    services:
  app:
    image: 'jc21/nginx-proxy-manager:latest'
    restart: unless-stopped
    ports:
      - '80:80'
      - '81:81'
      - '443:443'
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt

  2. 保存文件后执行以下命令启动服务：

    docker-compose up -d

# 或者
docker compose up -d

  3. 如果你是第一次使用，可以参考以下指南了解更多：

部署后端

  1. 拉取配置文件：

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

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

  2. 编辑 docker-compose.yml 文件中的 environment 字段，配置以下信息：

    • JWT 密钥（JWT_SECRET）：长度为 16 到 32 个字符的字符串，用于加密用户的 JWT。
    • 被允许的域名（ALLOWED_ORIGINS）：通常是前端的域名，多个域名用英文逗号分隔。
    • 是否开启加密（ENCRYPT_ENABLE）：如果需要加密，将 false 改为 true，并填写加密密钥。
    • 加密密钥（ENCRYPT_KEY）：长度必须为 64 位。

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

    services:
  app:
    container_name: mx-server
    image: innei/mx-server:latest
    environment:
      - TZ=Asia/Shanghai
      - NODE_ENV=production
      - DB_HOST=mongo
      - REDIS_HOST=redis
      - ALLOWED_ORIGINS=zinzin.top
      - JWT_SECRET=Yy14003252791400325279
    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
    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

  4. 启动后端服务：

    docker-compose up -d

# 或者
docker compose up -d

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

    core完成截图
    core完成截图

Nginx Proxy Manager 反向代理 Mx Space 后端

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

    nginx步骤-1
    nginx步骤-1
    nginx步骤-2
    nginx步骤-2

    注意：国内服务器可能因网络原因自动申请证书失败，需要多尝试几次，或上传证书。

  2. 成功后，访问 https://mx.zinzin.top/proxy/qaqdmin 进行初始化设置：

    初始化后端页面
    初始化后端页面

  3. 部署成功后的后台页面：

    后台管理页面
    后台管理页面

开始部署前端 Shiro

1. 设置主题配置

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

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

    json

    {
  "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": [
      "https://github.com/Innei/static/blob/master/images/F0q8mwwaIAEtird.jpeg?raw=true",
      "https://github.com/Innei/static/blob/master/images/IMG_2111.jpeg.webp.jpg?raw=true"
    ],
    "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": [
          "https://cdn.jsdelivr.net/gh/Innei/img-bed@master/20191211132347.png",
          "https://cdn.innei.ren/bed/2023/0424213144.png"
        ]
      },
      "bilibili": {
        "liveId": 1434499
      }
    }
  }
}
    配置主题信息
    配置主题信息

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

2. 使用 Docker Compose 部署 Shiro

  1. 创建并进入 shiro 目录：

    mkdir shiro
cd shiro

  2. 下载相关文件：

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

  3. 修改 .env 文件中的后台地址：

    vim .env # 修改你的 ENV变量
    env改为刚刚配置的后台接口
    env改为刚刚配置的后台接口

    保存后启动服务：

    docker compose up -d

# 或者
docker-compose up -d

  4. 后续更新镜像：

    docker compose pull

3. Nginx Proxy Manager 反向代理 Shiro

Shiro反向代理-1
Shiro反向代理-1
Shiro反向代理-2
Shiro反向代理-2

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

最终访问主站点

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

主站点
主站点

大功告成！！

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

  1. 社区分享
  2. yono佬国内服务器部署补充

补充

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

image-20250302191136537
image-20250302191136537

使用社交账号登录

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...