banner
libxcnya.so

libxcnya.so

Nothing...
telegram
twitter
github
email
主页归档

Mix-Space 搭建从入门到入土

#MX-Space#搭建452
AI 生成的摘要
Innei自主研发了一个全新的开放源代码博客项目Mix-Space，项目发生在一个被称作「Github」的幻想世界。你将扮演一位名为「Developer」的神秘角色，在自由的Coding中邂逅性格各异、能力独特的码子们，一起击败强敌，找回失散的开源协议，逐步发掘「Mix-Space」的真相。准备材料包括VPS/服务器、域名、智慧的大脑和灵巧的双手。安装环境包括Docker、Node.JS、Redis、Git、Git LFS和MongoDB。后端搭建可以使用Docker或手动搭建，然后配置后端。前端搭建可以使用Kami或Shiro主题，也可以本地搭建。

前言#

你说的对，但是《Mix-Space》是由 Innei 自主研发的一款全新开放源代码博客项目。项目发生在一个被称作「Github」的幻想世界，在这里，被神选中的人将被授予「Node.JS」，导引键盘之力。你将扮演一位名为「Developer」的神秘角色，在自由的 Coding 中邂逅性格各异、能力独特的码子们，和他们一起击败强敌，找回失散的开源协议 —— 同时，逐步发掘「Mix-Space」的真相。

准备材料#

本文演示服务器由 雨云 提供计算服务

  • VPS / 服务器一台（本文采用雨云 美国洛杉矶 8c16g 服务器，使用 Ubuntu 20.04 已提前安装好宝塔面板）
  • 域名一个
  • 智慧的大脑
  • 灵巧的双手

安装环境#

Docker#

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

Node.JS#

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

Redis#

apt install redis

Git#

apt install git

Git LFS#

[!NOTE]

如果你不用 Kami 主题的话可以不用装这个

curl -s https://packagecloud.io/install/repositories/github/git-lfs/script.deb.sh | sudo bash
sudo apt-get install git-lfs

MongoDB#

请参考 MongoDB 官网
安装完成后需要手动启动

systemctl enable mongod
systemctl start mongod

后端搭建#

请先将您的域名解析到你的服务器（文中用 mxapi.xcnya.cn 作为 后端 API 示例）

4

Docker（推荐）#

从仓库获取 docker-compose.yml

mkdir /opt/mx-space
mkdir /opt/mx-space/core
cd /opt/mx-space/core
wget https://raw.githubusercontent.com/mx-space/core/master/docker-compose.yml

然后在同目录下创建一个 .env 文件
写入以下内容

# 随便写，要求 16≥ 字符串 ≥32
JWT_SECRET=
# 允许的域名，指的是你的前端域名，用","分开
ALLOWED_ORIGINS=

1

我的配置如图，保存并退出后使用以下命令启动容器

docker compose up -d

2

等待完成

3

如图启动完成后，使用你喜欢的方式反代 127.0.0.1:2333 并配置好 SSL 证书绑定到你的域名作为 后端 API
我这里用宝塔面板，配置如图（已提前配置好 SSL 证书）

5

完成后访问你的后端 API 域名测试，出现如图代表正常

6

手动搭建#

从仓库拉取 core

mkdir /opt/mx-space
cd /opt/mx-space
git clone https://github.com/mx-space/core.git
cd core

安装

npm install -g pnpm pm2
pnpm i

7

做和放宽，稍安勿躁，好东西马上就要来了

8

然后输入以下命令进行构建

pnpm build
pnpm bundle

9

然后在 apps/core/ 中创建一个 ecosystem.config.js（如果有就删掉）
将以下内容粘贴进去，并注意配置 env{} 中的环境变量

const { cpus } = require('os')
const { execSync } = require('child_process')
const nodePath = execSync(`npm root --quiet -g`, { encoding: 'utf-8' }).split(
  '\n',
)[0]
const cpuLen = cpus().length
module.exports = {
  apps: [
    {
      name: 'mx-server',
      script: 'out/index.js',
      autorestart: true,
      exec_mode: 'cluster',
      watch: false,
      instances: cpuLen,
      max_memory_restart: '520M',
      args: '',
      env: {
        MX_ENCRYPT_KEY: 'mx-space',
        PORT: '2333',  // 启动端口
        ALLOWED_ORIGINS: 'mx.xcnya.cn,mxspace.xcnya.cn',  // 允许的域名，指的是你的前端域名，用","分开
        JWT_SECRET: 'hPf6Rb8KfE6jOgY3cDuM6H6t'  // 随便写，要求 16 ≥ 字符串 ≥ 32
      },
    },
  ],
}

然后使用 pm2 start ecosystem.config.js 启动后端

10

如图启动完成后，使用你喜欢的方式反代 127.0.0.1:2333 并配置好 SSL 证书绑定到你的域名作为 后端 API
我这里用宝塔面板，配置如图（已提前配置好 SSL 证书）

5

完成后访问你的后端 API 域名测试，出现如图代表正常

6

配置后端#

后端搭建完成后需要进行初始化配置

[!IMPORTANT]

自 core 5.0 版本以来，原 /qaqdmin 被变更到了 /proxy/qaqdmin

访问 https://你的后端域名/proxy/qaqdmin
然后会出现如图

17

[!NOTE]

如果没有出现初始化界面，请尝试访问 https://你的后端域名/proxy/qaqdmin#init

跟着一步步配置就好了

18

19

20

前端搭建#

Kami#

[!IMPORTANT]

Kami 已停止维护，为了更好的使用体验，请跳过本节并使用下一节中的 Shiro 主题作为替代

Vercel#

点击 一键部署到 Vercel
点进去之后先按照提示将仓库 fork 到你的个人账号

11

12

然后按图配置

13

坐和放宽.ing

14

然后就好了

15

这时你用 Vercel 分配给你的域名是用不了的，所以你得绑个自己的域名

16

然后访问前端域名，大功告成！

21

本地搭建#

请先将您的域名解析到你的服务器（文中用 mx.xcnya.cn 作为 前端域名 示例）

克隆仓库

cd /opt/mx-space
git clone https://github.com/mx-space/kami.git
cd kami

安装

npm install -g pnpm pm2
git lfs fetch --all
git lfs pull
pnpm i

然后在同目录创建一个 .env 文件，写入以下内容

# API 地址
NEXT_PUBLIC_API_URL=https://你的后端域名/api/v2
# GATEWAY 地址
NEXT_PUBLIC_GATEWAY_URL=https://你的后端域名
#前端使用的配置项名字
NEXT_PUBLIC_SNIPPET_NAME=kami
# 如果使用 CDN, 修改产物前缀；一般留空
ASSETPREFIX=

然后输入 pnpm build 开始构建

22

坐和放宽.ing

23

完成后使用 pnpm prod:pm2 启动

24

如图启动完成后，使用你喜欢的方式反代 127.0.0.1:2323 并配置好 SSL 证书绑定到你的域名作为 前端 API
我这里用宝塔面板，配置如图（已提前配置好 SSL 证书）

25

然后访问前端域名，大功告成！

21

Shiro#

关于 CLERK#

在 Shiro 主题中需要用到 Clerk，所以需要去 Clerk 官网注册一个账号
注册完之后控制台点击 Add application

26

名字随便写，然后创建

27

完成之后下滑找到这些，把这两个东西保存好，请勿泄露

28

配置后端#

Shiro 前端构建之前需要先在后端进行一些设置
访问你的后台，找到 附加功能 → 配置云函数，点击上面的 "+" 号

30

然后名称填写 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:[email protected]",
            "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
      }
    }
  }
}

31

然后点右上角的保存

Docker（？#

Shiro 文档里是没写 Docker 用法的，但是仓库里确实有 docker-compose.yml 这个文件，主要是我研究了半个小时属实没整明白，先挖个坑来年有幸再填吧

Vercel#

点击 一键部署到 Vercel

[!IMPORTANT]

不建议直接点击上方按钮进行部署，不然后续没办法更新，请手动 fork Innei/Shiro 仓库到自己的 Github 账号底下然后在 Vercel New Project

34

跟前面一样的 fork 仓库

35

填上环境变量信息然后点部署等会就好了 *  *

36

一样的绑上自己的域名，就宣布大功告成了！

33

手动搭建#

克隆仓库

cd /opt/mx-space
git clone https://github.com/Innei/Shiro.git
cd Shiro

然后在同目录下创建一个 .env 文件，填入以下内容

# 你的API地址
NEXT_PUBLIC_API_URL=
# 你的API域名
NEXT_PUBLIC_GATEWAY_URL=
# CLERK 公钥
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
# CLERK 私钥
CLERK_SECRET_KEY=
# OpenAI Key（不多说了，自己看着整吧）
OPENAI_API_KEY=

输入以下命令构建

npm install -g pnpm pm2
pnpm i
pnpm build

32

如图完事之后我们可以输入 pm2 start ecosystem.config.js 来启动 Shiro

或者安装为系统服务启动

输入 vim /etc/systemd/system/mx-shiro.service
然后输入以下内容

[Unit]
Description=MX-Space Shiro Theme Daemon
After=network.target

[Install]
WantedBy=multi-user.target

[Service]
Type=simple
WorkingDirectory=/opt/mx-space/Shiro
ExecStart=npx next start -p 2323
Restart=always

然后使用以下命令启动

systemctl enable mx-shiro
systemctl start mx-shiro

启动完成后，使用你喜欢的方式反代 127.0.0.1:2323 并配置好 SSL 证书绑定到你的域名作为 前端域名（也就是博客域名
我这里用宝塔面板，配置如图（已提前配置好 SSL 证书）

25

然后访问前端域名，大功告成！

33

后记#

如果你跟我一样遇到了类似的问题

44

请看这篇文章

此文由 Mix Space 同步更新至 xLog
原始链接为 https://blog.nekorua.com/posts/build/68.html

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。