博文版仅针对视频版的白话文补充

节选至 https://github.com/mx-space/docs 文档仓库,顺序略有不同,按照我的视频方法最优解

文档地址 https://mx-docs.iucky.cn


视频地址:

哔哩哔哩

YouTube


视频使用:

BGM:

  • Summer Madness-Roa

  • moonlight-Roa

  • Lights-Sappheiros

  • Embrace-Sappheiros



  • 介绍

    没错, Mix-Space 采用的是前后端分离的形式,那什么是前后端分离呢?

    前后端分离,顾名思义,前后端将会遵循某种规范,后端的接口不变,请求方式不变,即前后端数据交换遵循的某种规范。

    准备

    在运行 Mix-space 时你需要准备一台服务器

    • 一个会举一反三的脑子
    • Linux 内核版本 > 4.18 (推荐使用最新版 Ubuntu)
    • 运行内存 > 1Gib
    • 前后端的 SSL 证书
    • 解析好前后端地址
    • 宝塔面板

    可选项:

    • 带 Docker 镜像的 Ubuntu (或腾讯云应用镜像 Docker)

    在宝塔面板-软件商店-运行环境里安装 PM2管理器Nginx ,安装最新 Node 版本本章安装的是 v16.15.1

    至少需要 Node > 16.X


    Debian / Ubuntu 安装依赖环境

    sudo apt update && sudo apt install git curl vim wget git-lfs -y

    安装依赖环境

    sudo su
    npm install -g pnpm pm2
    
    # 如果安装比较慢,可以使用以下命令切换镜像源
    npm config set registry http://mirrors.cloud.tencent.com/npm/

    安装Docker

    sudo curl -fsSL https://get.docker.com | bash -s docker
    
    # 如果安装比较慢,推荐使用以下命令
    sudo curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

    安装Docker-compose

    # 下载 docker-compose
    
    wget https://github.com/docker/compose/releases/download/v2.6.0/docker-compose-linux-x86_64
    
    #(备用) wget https://download.fastgit.org/docker/compose/releases/download/v2.6.0/docker-compose-linux-x86_64
    
    # 新建文件夹(非必须),可能需要
    
    sudo mkdir -p /usr/local/lib/docker/cli-plugins/
    
    # 复制到指定位置
    
    sudo cp ./docker-compose-linux-x86_64  /usr/local/lib/docker/cli-plugins/docker-compose
    
    # 赋予执行权限
    
    sudo chmod +x /usr/local/lib/docker/cli-plugins/docker-compose

    检查是否安装完成

    docker compose version

    正常输出版本号即可。

    部署Core

    cd
    
    mkdir -p mx-space/server
    
    cd mx-space/server
    
    wget https://fastly.jsdelivr.net/gh/mx-space/core@master/docker-compose.yml
    
    wget https://fastly.jsdelivr.net/gh/mx-space/core@master/.env.example -O .env

    用宝塔或者 vim 编辑这个 .env 文件,文件示例如下

    # THIS ENV FILE EXAMPLE ONLY FOR DOCKER COMPOSE
    # SEE https://docs.docker.com/compose/environment-variables/#the-env-file
    JWT_SECRET=7294c34e0b28ad282333333          #此处填写一个长度不小于16个字符,不大于32个字符的字符串,示例如:hash 的 md5 值
    ALLOWED_ORIGINS=miaoer.xyz,www.miaoer.xyz,v6.www.miaoer.xyz  #此处填写被允许的域名,通常是kami的域名,如果允许多个域名访问,用英文逗号,分隔

    Vim保存: Ecs 退出编辑,Shift + :(冒号) 输入wq
    :wq

    拉取镜像

    # 拉取最新镜像
    
    sudo docker compose pull
    
    # 启动容器
    
    sudo docker compose up -d

    反向代理

    进入宝塔面板—网站,设置后端网站地址这里使用 api.miaoer.xyz

    自己喜欢啥主机名就填啥,记得解析

    新建完成站点到设置-反向代理-添加反向代理

    代理名字这里方便管理就设置为 后端

    目标URL: http://127.0.0.1:2333 发送域名: &host

    保存后点击 配置文件 将下方配置文件文本复制复制进去,记得全选删掉以前的配置

    #PROXY-START/
    location /socket.io {
        proxy_http_version 1.1;
        proxy_buffering off;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass http://127.0.0.1:2333/socket.io;
    }
    
    
    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;
    
        #Set Nginx Cache
    
    
        set $static_fileJsNv8TWb 0;
        if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
        {
        	set $static_fileJsNv8TWb 1;
        	expires 12h;
            }
        if ( $static_fileJsNv8TWb = 0 )
        {
        add_header Cache-Control no-cache;
        }
    }
    
    #PROXY-END/

    配置SSL证书

    这里使用腾讯云免费提供的,下载时选择 Nginx 将 SSL 证书下载下来,打开压缩包将后缀 .key.pem 密钥和证书文件的文本复制到

    站点设置-SSL-其他证书中,视频因为隐私问题进行打码处理

    .pem 文件最后一行是空行记得删除

    保存这里可以选择开启强制 HTTPS 建议开启

    初始化

    访问后端地址 https://server.test.cn/proxy/qaqdmin 进行初始化

    站点设置 中设置好站点标题和站点描述

    关键字自选

    前端地址需要手动改为你想要的地址,我这里设置 https://www.miaoer.xyz

    API 地址默认是正确的,如: https://api.miaoer.xyz/api/v2

    后台地址也是正确的,这里不推荐更改

    网关也是默认正确的


    到了 主人信息 这里推荐全部填写完

    需要注意一下邮箱是指收取友链和评论通知的地址,后面在后端面板设定好邮箱提醒

    密码这里是后端面板的密码,确认一下密码

    个人首页这里设置自己的前端地址我这里设置 https://www.miaoer.xyz

    头像这里设置自己的头像地址,你可以通过后端后续上传你的头像,推荐自己搭建 CDN 图床,或者使用现成的,我这里选择了自建

    个人介绍看个人喜好进行填写

    部署前端

    cd
    cd mx-space
    
    git clone https://github.com/mx-space/kami.git --depth=1
    
    # 网络不好的情况,请使用下面的命令。
    
    git clone https://hub.fastgit.xyz/mx-space/kami.git --depth=1

    更换分支到稳定版本

    cd kami && git fetch --tags && git checkout $(git rev-list --tags --max-count=1)

    修改env

    用宝塔或者 vim 编辑这个 .env 文件,文件示例如下

    # API 地址
    NEXT_PUBLIC_API_URL=https://api.miaoer.xyz/api/v2
    # GATEWAY 地址
    NEXT_PUBLIC_GATEWAY_URL=https://api.miaoer.xyz
    #前端使用的配置项名字
    NEXT_PUBLIC_SNIPPET_NAME=kami
    # 如果使用 CDN, 修改产物前缀
    ASSETPREFIX=

    Vim保存: Ecs 退出编辑,Shift + :(冒号) 输入wq
    :wq

    安装依赖

    pnpm i

    构建

    pnpm build

    启动前端

    pm2 start

    添加站点


    进入宝塔面板—网站,设置前端网站地址这里使用 www.miaoer.xyz

    自己喜欢啥主机名就填啥,记得解析

    新建完成站点到设置-反向代理-添加反向代理

    代理名字这里方便管理就设置为 前端

    目标URL: http://127.0.0.1:2323 发送域名: &host

    保存后点击 配置文件 将下方配置文件文本复制复制进去,记得全选删掉以前的配置

    配置SSL证书

    和前面后端非常类似,希望你能举一反三

    测试前端


    配置完前端的配置,可以先进行访问,我这里回滚了正常的后端所以我这里有文章

    默认是没有任何文章的如果没有问题可以尝试在后端写一篇文章并发布进行测试

    设置

    在后端面板 设定-系统中有

    • 网站设置
    • SEO优化
    • 后台附加设置
    • 文本设定
    • 邮件通知设置
    • 评论设置
    • Bark 通知设定
    • 友链设定
    • 备份
    • 百度推送设定
    • Algolia Search
    • 终端设定

    这里就不一一讲解了有兴趣可以预览一下
    文档中关于这部分-后台设置 的内容

    还有就是配置与云函数,碍于篇幅这里也是不进行讲解的具体可以查看 文档中关于这部分-云函数

    升级与备份

    1.魔改升级-前端

    mx-space/kami 文件夹改为任意你喜欢的我这里修改为 kami.d

    然后拉取 kami 前端仓库,更新到稳定版本

    cd
    cd mx-space
    
    git clone https://github.com/mx-space/kami.git --depth=1
    
    cd kami && git fetch --tags && git checkout $(git rev-list --tags --max-count=1)

    然后将之前配置时修改过的文件,如在 mx-space/kami.d

    中的 .envpublic 文件夹复制到 mx-space/kami

    我这里还修改了友链的页面文件这里也进行替换

    替换完成;安装依赖、构建、启动前端

    pnpm i
    
    pnpm build
    
    pm2 start
    
    # 老鸟选项: pnpm i && pnpm build && pm2 start

    2.强制同步-前端

    直接在 mx-space/kami 文件夹下执行 git pull origin master

    安装依赖、构建、启动前端

    pnpm i
    
    pnpm build
    
    pm2 start
    
    # 老鸟选项: pnpm i && pnpm build && pm2 start

    该方法适合于对 Kami 源代码没有做改动的懒人用户

    后端升级

    因为 Mix-space 后端是使用 Docker-compose 的,升级十分方便

    cd
    cd mx-space/server

    进入 server 文件夹执行

    docker compose pull && docker compose up -d

    备份与回滚

    在后端中 其他-备份 中点击立即备份,即备份到绝对目录:
    /root/mx-space/server/data/mx-space/backup/20xx-xx-xx_xx:xx:xx/backup-20xx-xx-xx_xx:xx:xx.zip

    默认情况下备份会明天备份一次,如果你没修改的话,详见后端面板 设定-系统-备份

    回滚的话,在后端中 其他-备份 中点击立即备份,将之前下载在电脑里的 backup.zip 上传到刚刚生成的备份目录里进行重命名替换

    ⚠️ 该操作涉及修改数据库,请多备份几个工作日的 backup,数据无价请谨慎操作!

    替换完成会提示 数据库有变动,将在 x 秒后重载页面

    重载先检查文章评论等有没有丢失


    欢迎留言,打赏一键三联视频!