部署Mix-Space博客框架

Note
本篇文章介绍的是 Mix-Space 博客框架的后端及 API 服务的搭建使用，部署前端主题请看另一篇文章
本篇文章和官网的部署操作大体相同，不一样的地方是加入了部分配图和部分需要详细说明的地方以及一些常见问题的解决

Mix Space 是一个小型个人空间站点程序。不同于传统的博客程序，采用前后端分离设计，适合那些喜欢写不同风格或类型的写作爱好者

你所需要的

一台 Linux 服务器（内核版本需>=4.19）/Mac
聪明的脑子
现代化的搜索能力或能够熟练使用现代化的客服
建议有一个域名

使用 Docker 部署 Mix-Space

如果你的服务器未安装过 docker，你需要先安装 docker。如果安装过了可以跳过

安装 Docker

如果你的服务器在国内，推荐使用阿里云的安装脚本（快）

curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

官方的安装脚本

curl -fsSL https://get.docker.com | bash -s docker

安装完成后，你可以使用一下命令查看是否安装成功

docker -v
docker compose version

拉取配置文件

先随便找个地方放 mix-space 的 core 核心文件

cd && mkdir -p mx-space/core && cd $_
wget https://fastly.jsdelivr.net/gh/mx-space/core@master/docker-compose.yml

使用编辑器如 vim 打开配置文件docker-compose.yml，并按照如下配置配置environment字段

vim ./docker-compose.yml

修改environment中的ALLOWED_ORIGINS和JWT_SECRET两个字段即可，其他的用处不大

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=localhost,这里填允许的域名
      - JWT_SECRET=这里填写JWT密钥
    volumes:
    #其他的配置...

JWT 密钥：需要填写长度不小于 16 个字符，不大于 32 个字符的字符串，用于加密用户的 JWT，务必保存好自己的密钥，不要泄露给他人
被允许的域名：需要填写被允许的域名，通常是前端的域名，如果允许多个域名访问，用英文逗号，分隔

启动核心

如果你的服务器在国内，无法拉取镜像或拉取速度过慢可自行使用代理或在 docker-compose.yml 里的 image 前添加镜像域名，比如 docker.1panel.top/innei/mx-server:latest

docker compose up

如果你的终端输出类似以下内容，则说明启动成功了

mx-server | √[P1] Server listen on: http://127.0.0.1:2333
mx-server | √[P1] Admin Local Dashboard: http://127.0.0.1:2333/proxy/qaqdmin

或者你也可以选择后台运行

docker compose up -d

至此，后端安装完成，但是目前你只能通过本地http://127.0.0.1:2333/proxy/qaqdmin访问后台，所以我们还需要配置网页反向代理以及开放防火墙端口，这里以 Nginx 为例，其他的软件类似

通过 Nginx 配置反向代理

首先，安装 Nginx，已安装可以跳过

sudo apt update
sudo apt install -y nginx
sudo systemctl enable --now nginx

这里使用默认的 nginx 储存目录：

nigix根目录：/etc/nginx/
nigix站点配置文件目录：/etc/nginx/sites-available/
nigix启用链接目录：/etc/nginx/sites-enabled/

文章使用的配置：

后端端口：127.0.0.1:2333
域名：mixserver.crystelf.top

先解析一个A类记录到你的服务器ip

然后创建网页配置文件及反向代理

# 创建配置文件
sudo nano /etc/nginx/sites-available/mixserver.crystelf.top
# 建立软链接
sudo ln -s /etc/nginx/sites-available/mixserver.crystelf.top /etc/nginx/sites-enabled/
# 重载nginx
sudo nginx -t && sudo systemctl reload nginx

配置文件可以像下面这样填写，记得自己修改

server {
    listen 80;
    server_name mixserver.crystelf.top;
    root /var/www/mixserver.crystelf.top;
    index index.php index.html index.htm default.php default.html default.htm;

    # 防止访问敏感文件
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md|package.json|package-lock.json|\.env) {
        return 404;
    }

    # Let's Encrypt 验证目录
    location /.well-known/ {
        allow all;
    }

    # 禁止验证目录运行脚本
    if ($uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$") {
        return 403;
    }

    # 缓存图片、多媒体
    location ~* \.(gif|jpg|jpeg|png|bmp|swf)$ {
        expires 30d;
        access_log off;
        error_log off;
    }

    # 缓存 CSS 和 JS
    location ~* \.(js|css)?$ {
        expires 12h;
        access_log off;
        error_log off;
    }

    # 反向代理部分
    location ^~ / {
        proxy_pass http://127.0.0.1:2333;
        proxy_set_header Host 127.0.0.1;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Host $http_host;
        proxy_set_header X-Forwarded-Port $server_port;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header REMOTE-PORT $remote_port;
        proxy_set_header Upgrade $http_upgrade;
        proxy_http_version 1.1;
        proxy_set_header Connection "upgrade";

        add_header X-Cache $upstream_cache_status;

        set $static_fileFD66NKOA 0;
        if ($uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$") {
            set $static_fileFD66NKOA 1;
            expires 1m;
        }
        if ($static_fileFD66NKOA = 0) {
            add_header Cache-Control no-cache;
        }
    }

    access_log /var/log/nginx/mixserver.crystelf.top.access.log;
    error_log /var/log/nginx/mixserver.crystelf.top.error.log;
}

接着用Let's Encrypt结合Certbot申请并自动续期证书

# 安装
sudo apt update
sudo apt install certbot python3-certbot-nginx -y
# 申请&自动续期
sudo certbot --nginx -d mixserver.crystelf.top

一定要检查是否有proxy_set_header Connection "upgrade"这一行，如果没有的话会导致启动时浏览器无法与后端建立 ws 连接

最后，访问https://www.example.com/proxy/qaqdmin就可以进入后台了

初始化

头像请填入能够打开且不跳转到下载的图片 url 如这张

社交平台录入时

GitHub 请填 GitHub 用户名
网易云音乐填网址访问个人页面后面的数字 id
bilibili 也要填数字 id
注意下面两个值

然后打开设定 - 系统，写入网页地址如下

结语

走到这一步，Mix-Server 的后端算是部署完成了，个人感觉这个框架很简洁而支持的功能、自定义很多，是个非常棒的博客框架👍