1Panel面板快速部署Mix-Space

Mix Space 是一款簡潔而不簡單的個人博客系統，它夠快，夠現代。你可以利用它構建一個屬於自己的個人空間，記錄生活，分享知識。

Step.0 開端#

其實我在更換 Mix-Space 之前，是在用 Hexo 作為個人主力博客系統的。不過 Hexo 雖好，它輕量，快速，完全靜態，但它配置不統一和撰寫文章略麻煩的問題一直困擾著我。在斟酌以後我決定更換一套博客系統。
最開始的選擇是 VanBlog，它後端使用便捷，前端基本靜態，前後端分離的設計看起來很不錯，但我在實際上手使用後，卻發現存在各種影響我使用的小問題，比如：

評論系統使用內置 Waline，但其配置並不完善，而且內部 iFrame 反代其管理頁面也經常出一些莫名其妙的問題
友鏈和捐贈信息使用的變量表可編輯性較低
頁面略顯陳舊，且部分頁面（如友鏈）響應性一般

這可能和它正處於開發階段也多少有點關係，不過我還是決定再尋找適合我的博客系統。

然後我便看到了 Shiro（其實很早以前就看到過一點，但當時覺得用 Hexo 也行便沒深入研究），仔細研究下 Shiro 和其後端 Mix-Space 後發現似乎挺合我需求的。

而且我還可以把 Shiro 部署到 Vercel 或者 Netlify 這樣的 Serverless 平台，能保證一定速度的情況下還能減少伺服器壓力，這還是挺不錯的感覺？

Step.1 部署後端#

如標題所言，我使用的伺服器管理面板是 1Panel，這是一個開源且快速的伺服器管理面板，相比寶塔來說更符合我的使用習慣，作為開源也不大擔心植入監視或者後門問題，而且其容器化特性也使得伺服器應用運行更加安全。

在 1Panel 上，一般建議應用都使用 Docker 容器化部署，方便管理也方便安裝與卸載。

我使用了 Mix-Space 官方建議的 Docker Compose 部署方式，不過我在其上面做了點小小的修改來使得其更加符合我的需求。

我使用的 Docker Compose 文件如下，相對來說更加符合 1Panel 的使用，僅供參考。


version: '3.8'

services:
  app:
    container_name: Mx-Space
    image: innei/mx-server:5
    command: bash ./docker-run.sh
    environment:
      - TZ=Asia/Shanghai
      - NODE_ENV=production
      - ALLOWED_ORIGINS
      - JWT_SECRET
      - ENCRYPT_KEY
      - ENCRYPT_ENABLE

    volumes:
      - ./data/mx-space:/root/.mx-space
    ports:
      - '127.0.0.1:2333:2333'
    depends_on:
      - mongo
      - redis
    links:
      - mongo
      - redis
    networks:
      - 1panel-network
    restart: always
    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
    ports:
      - "127.0.0.1:27017:27017"
    networks:
      - 1panel-network
    restart: always

  redis:
    container_name: redis
    image: docker.dragonflydb.io/dragonflydb/dragonfly
    networks:
      - 1panel-network
    ulimits:
      memlock: -1
    ports:
      - "127.0.0.1:6379:6379"
    volumes:
      - ./data/redis:/data

networks:
  1panel-network:
    external: true

我相比 MIx-Space 官方 Compose 文件做出的修改如下：

Docker 網絡更換為 1Panel 的1panel-networkDocker 網絡，在做反代和與 1Panel 其他服務聯動上更加便捷一些
Core 後端地址由0.0.0.0:2333更換為127.0.0.1:2333，僅在伺服器內網廣播，更安全
Redis 數據庫服務替換為 DragonflyDB，這是一個兼容 Redis 的數據庫服務，其官方文檔稱讀寫效率是 Redis 的 20 倍，且並發能力更強，如果你不喜歡這個也可以對比 Mix-Space 官方文檔自行替換為標準 Redis 服務。

啟動服務#

啟動服務事情也簡單，我們不需要另行安裝 Docker 與 Docker Compose 服務，因為 1Panel 面板在安裝時已經預置了這些服務，我們僅需按照 Mix-Space 官方文檔中寫的新建目錄：

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

# 拉取我修改過的docker-compose.yml文件
wget https://fastly.jsdelivr.net/gh/yzsong06/File@main/Mix-Space/docker-compose.yml

`.env`文件#

# JWT 密鑰：需要填寫長度不小於 16 個字符，不大於 32 個字符的字符串，用於加密用戶的 JWT，務必保存好自己的密鑰，不要洩露給他人。
JWT_SECRET=
# 被允許的域名：需要填寫被允許的域名，通常是前端的域名，如果允許多個域名訪問，用英文逗號，分隔。
ALLOWED_ORIGINS=
# 是否開啟加密：如果你確定要開啟加密，將 false 改為 true，開啟加密後，你需要在下方填寫加密密鑰。
ENCRYPT_ENABLE=
# 加密密鑰：如果你不知道這是什麼，那麼不建議開啟此功能，具體內容可參考 https://mx-space.js.org/usage/security.html
ENCRYPT_KEY=
# 若開啟加密，則需注意密鑰長度必須為 64 位，不然會在初始化時報錯。注意這是不可逆的，務必保存自己的秘鑰。所以並不是非常推薦使用，除非你真的需要加密，

接下來打開我們放置docker-compose.yml的目錄（一般是伺服器的 /root/mx-space/core），並新建.env文件並把以上參數粘貼到其中，然後按需修改你所需要修改的值，注意直接在等號後面寫值即可，不需要空格。

然後回到終端輸入以下命令（請注意執行以下命令的時候你要在伺服器 root 目錄下，你也可以拆開執行以下命令）

cd mx-space/core && docker compose up -d

這樣會開始拉取並新建 Docker 容器，等待拉取新建完成後服務會自動啟動，這樣我們就完成了後端的啟動配置

Step.2 配置反代#

非強制配置，個人測試未配置反向代理程序依舊工作正常

在 1Panel 上配置反代跟寶塔差不多，畢竟有可視化的管理面板，還是比較方便的。

我們進入 1Panel 的網站中（需要先安裝 Openresty），然後新建網站，選擇反向代理，域名填寫你想要的後端域名，反代地址填寫127.0.0.1:2333，然後新建網站就會啟動反代服務了，此時我們還需要一點小小的配置來讓它更好的工作。

我們進入對應網站服務的配置中，找到配置文件，在配置文件裡按照 Mix-Space 官方文檔裡寫的添加反代配置，裡面應該是已經有 Server 頭了，所以我們添加以下內容：


    location /socket.io {
      proxy_pass http://127.0.0.1:2333/socket.io; 
      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; 
      proxy_set_header Upgrade $http_upgrade; 
      proxy_set_header Connection "upgrade"; 
      proxy_buffering off;
      proxy_http_version 1.1; 
      add_header Cache-Control no-cache; 
    }
   
   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; 
    }

完成後選擇保存並重載，然後在面板上配置好Https後訪問你的後端域名（{域名}/proxy/qaqdmin）即可看到管理面板。

Step.3 配置主題#

這裡不再詳述配置前端主題過程，具體可參考官方文檔