Ubuntu + 宝塔面板安装 Mix Space(Docker 部署) + Shiro

20 天前(已编辑)
/ ,
39

Ubuntu + 宝塔面板安装 Mix Space(Docker 部署) + Shiro

壹・准备工作

一台安装好宝塔面板的服务器

系统要求

  • Linux / macOS
  • Linux 内核版本 >= 4.19
  • Memory >= 1G

1.1 安装 Docker

使用官方脚本安装：

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

使用以下命令查看 Docker 与 Docker-Compose 版本

docker -v
 
docker compose version

示例：

-2024-12-06-234210.png
-2024-12-06-234210.png

贰・开始安装Mix Space后端

官方文档

2.1 拉取配置文件

# 根目录下创建 mx-space/core 文件夹并进入
cd && mkdir -p mx-space/core && cd $_
 
# 拉取 docker-compose.yml 文件
wget https://fastly.jsdelivr.net/gh/mx-space/core@master/docker-compose.yml

2.2 修改docker-compose.yml配置文件

使用vim 或 nano 打开 mx-space/core 下的 docker-compose.yml 文件

# Vim 进入后按I开始编辑，修改完成后按ESC键输入 :wq 保存并退出
vim ~/mx-space/core/docker-compose.yml

编辑 environment 字段的内容，没有就加上

  • JWT 密钥(JWT_SECRET)：需要填写长度不小于 16 个字符，不大于 32 个字符的字符串，用于加密用户的 JWT，务必保存好自己的密钥，不要泄露给他人。
  • 被允许的域名(JWT_SECRET)：需要填写被允许的域名，通常是前端的域名，如果允许多个域名访问，用英文逗号，分隔。
  • 是否开启加密(ENCRYPT_ENABLE)：如果你确定要开启加密，将 false 改为 true，开启加密后，你需要在下方填写加密密钥。
  • 加密密钥(ENCRYPT_KEY)：如果你不知道这是什么，那么不建议开启此功能，具体内容可参考 https://mx-space.js.org/usage/security.html

示例(注意yml的语法，该缩进的地方得缩进)：

environment:
  - TZ=Asia/Shanghai
  - NODE_ENV=production
  - DB_HOST=mongo
  - REDIS_HOST=redis
  - JWT_SECRET= 16 个字符
  - ALLOWED_ORIGINS=blog.meow.ink,meow.ink
  - ENCRYPT_ENABLE=false
  - ENCRYPT_KEY=

2.3 Core，启动！

终端输入：

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

这可能需要一点时间，请耐心等待。

2.4 完成

如果你完全按照我的方法，那一般都能成功，如果没有，请查看 官方文档 或从 壹 ・准备工作 重新操作

叁・配置反代

注意：一定要先配置SSL证书

检查Mix Space 后端是否正常运行

打开宝塔控制面板，点击左边栏 Docker 选项，接着点击容器 找到名为mx-server的容器，找到状态一栏，

如果为运行中，开始3.1操作

-2024-12-07-000714.png
-2024-12-07-000714.png

如果为已停止点击启动，如果无法启动，请重新安装一遍

-2024-12-07-000907.png
-2024-12-07-000907.png

3.1 双域名配置

建议使用双域名，但这也看个人喜好，若想使用单域名，查看 官方文档

3.1.1 后端配置

打开宝塔控制面板，点击左边栏 网站 选项，点击添加站点，添加两个，以我为例(server.meow.ink 和 blog.meow.ink):

  • 后端域名：server.meow.ink
  • 前端域名：blog.meow.ink
    -2024-12-07-001457.png
    -2024-12-07-001457.png

进入站点配置，反向代理，添加如图所示内容（代理名称随便填）

-2024-12-07-001831.png
-2024-12-07-001831.png

点击配置文件，Ctrl + A 全选，删除，更改为以下内容

## 反向代理开始
## WebSocket
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; 
}
## Others
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; 
}
## 反向代理结束
-2024-12-07-002224.png
-2024-12-07-002224.png

这样，后端就配置完成了

3.1.2 前端配置

跟后端差不多，注意目标URL的端口

-2024-12-07-002444.png
-2024-12-07-002444.png

这里放出前端反代配置

server{
    location ~* \.(gif|png|jpg|css|js|woff|woff2)$ {
      proxy_pass http://127.0.0.1:2323;
      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;
      expires 30d;
    }
    location ~* \/(feed|sitemap|atom.xml) {
      proxy_pass http://127.0.0.1:2333/$1;
      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;
      add_header Cache-Control max-age=60;
    }
    location / {
      proxy_pass http://127.0.0.1:2323;
      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;
      add_header Cache-Control no-cache;
      proxy_intercept_errors on;
    }
}
-2024-12-07-002839.png
-2024-12-07-002839.png

3.1.3 反代配置完成！

开始安装前端吧（￣︶￣）↗

肆・安装Mix Space前端

这里以Shiro主题为例，官方文档

4.1 设置主题配置

进入 Mix Space 后台，进入配置与云函数 页面，点击右上角的新增按钮，在编辑页面中，填入以下设置(内容自行更改)：

  • 名称：shiro
  • 引用：theme
  • 数据类型：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
    }
  }
}
}

示例：

-2024-12-07-003318.png
-2024-12-07-003318.png

点击右上绿色按钮保存

4.2 正式安装前端

进入Shiro主题官方Github仓库 https://github.com/Innei/Shiro

在Releases中下载 release.zip 文件

-2024-12-07-003727.png
-2024-12-07-003727.png

ssh登入服务器，终端输入

mkdir shiro
  
cd ~/shiro

将release.zip 文件上传到此目录，并解压，得到node_modules 和 Shiro 两个文件夹，终端输入

cd ~/shiro/Shiro
  
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

vim .env

在 .env 文件中填入以下内容(示例)

NEXT_PUBLIC_API_URL=https://后端域名/api/v2
NEXT_PUBLIC_GATEWAY_URL=https://后端域名
  
TMDB_API_KEY=
GH_TOKEN=

例：

  • 后端域名：server.meow.ink
  • 前端域名：blog.meow.ink

之后，终端输入安装pm2, pnpm

sudo apt install npm
  
npm install pm2@latest -g
  
npm install -g @pnpm/exe@latest-10

接着，给前端添加守护进程，新建 ecosystem.config.js 文件

vim ~/shiro/Shiro/ecosystem.config.js

填入以下内容

// ecosystem.config.js
  module.exports = {
      apps: [
          {
              name: 'Shiro',
              script: 'npx next start -p 2323',
              instances: 1,
              autorestart: true,
              watch: false,
              max_memory_restart: '180M',
              env: {
                  NODE_ENV: 'production',
              },
          },
      ],
  };

最后，终端输入

cd ~/shiro/Shiro
  
pnpm build && pnpm prod:pm2

至此，安装流程就结束了，浏览器打开 https://后端域名/proxy/qaqdmin 开始进行基础配置

4.2 附 使用Docker Compose

我并未成功，你可以试试，可能是我的问题

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

vim .env # 修改你的 ENV 变量
docker compose up -d

docker compose pull # 后续更新镜像

安装之后，可在宝塔面板管理

-2024-12-07-010845.png
-2024-12-07-010845.png

伍・开始使用

进入mix space后台，点击设定 ——系统 ——网站设置 填入你自己的信息

-2024-12-07-010235.png
-2024-12-07-010235.png

使用社交账号登录

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