banner
libxcnya.so

libxcnya.so

Nothing...
telegram
twitter
github
email
首頁封存

Mix-Space 建置從入門到入土

#MX-Space#搭建452
AI 翻譯
這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文
AI 生成的摘要
"Innei自主研發的全新開放源碼博客項目《Mix-Space》發生在Github幻想世界，需要準備VPS、域名、智慧的大腦和靈巧的雙手。安裝環境包括Docker、Node.JS、Redis、Git、Git LFS和MongoDB。後端搭建可使用Docker或手動搭建，然後配置後端API域名。前端搭建可使用Kami或Shiro主題，並在Vercel上部署。本地搭建需要將域名解析到伺服器，克隆仓库，安裝相應軟件，然後配置前端域名。"

前言#

你說的對，但是《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

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。