banner
libxcnya.so

libxcnya.so

Nothing...
telegram
twitter
github
email
ホームアーカイブ

Mix-Spaceの構築：入門から実践まで

#MX-Space#搭建483
AI 翻訳
この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示
AI が生成した要約
Innei自主研发了一个全新的开放源代码博客项目《Mix-Space》，在这个项目中，你将扮演一个名为「Developer」的神秘角色，在自由的编码中邂逅各种不同性格和能力的码子们，一起击败强敌，找回失散的开源协议，并逐步揭开「Mix-Space」的真相。为了搭建这个项目，需要准备VPS/服务器、域名、智慧的大脑和灵巧的双手。安装环境包括Docker、Node.JS、Redis、Git、Git LFS和MongoDB。可以选择使用Docker或手动搭建后端，然后配置后端并初始化。前端搭建可以选择使用Kami或Shiro主题，可以通过Vercel一键部署到Vercel，也可以在本地搭建。

前言#

あなたの言う通りですが、『Mix-Space』は Innei が自主開発した全く新しいオープンソースブログプロジェクトです。このプロジェクトは「Github」と呼ばれる幻想の世界で行われ、ここでは神に選ばれた者が「Node.JS」を授けられ、キーボードの力を導きます。あなたは「Developer」という名の神秘的な役割を演じ、自由なコーディングの中で性格が異なり、能力が独特なコードたちと出会い、彼らと共に強敵を打ち倒し、失われたオープンソースライセンスを取り戻す —— 同時に、「Mix-Space」の真実を徐々に明らかにしていきます。

準備材料#

この記事のデモサーバーは 雨云 によって計算サービスが提供されています。

  • VPS / サーバー 1 台（この記事では雨云のアメリカ・ロサンゼルス 8c16g サーバーを使用し、Ubuntu 20.04 に宝塔パネルが事前にインストールされています）
  • ドメイン 1 つ
  • 賢い頭脳
  • 器用な手

インストール環境#

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 にデプロイをクリックします。
入ったら、まずは指示に従ってリポジトリをあなたのアカウントにフォークしてください。

11

12

次に、図に従って設定します。

13

待っていてください。

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

待っていてください。

23

完了後、pnpm prod:pm2 で起動します。

24

図のように起動が完了したら、好きな方法で 127.0.0.1:2323 をリバースプロキシし、SSL 証明書をあなたのドメインにバインドして フロントエンド API とします。
私は宝塔パネルを使用し、設定は図の通りです（SSL 証明書は事前に設定済み）。

25

その後、フロントエンドドメインにアクセスし、大成功です！

21

Shiro#

CLERK について#

Shiro テーマでは Clerk を使用する必要があるため、Clerk 公式サイトでアカウントを登録してください。
登録後、コンソールで Add application をクリックします。

26

名前は適当に書き、作成します。

27

完了後、下にスクロールしてこれらを見つけ、2 つの情報を保存してください。漏洩しないように注意してください。

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": "愛を込めてコーディングする独立した開発者。"
    },
    "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 というファイルがあります。主に私は 30 分間研究しましたが、実際に理解できなかったので、まずは穴を掘って、来年の幸運を祈ります。

Vercel#

一鍵で Vercel にデプロイをクリックします。

[!IMPORTANT]

上記のボタンを直接クリックしてデプロイすることはお勧めしません。そうしないと、後で更新できなくなります。手動で Innei/Shiro リポジトリを自分の Github アカウントにフォークし、その後 Vercel の New Project で行ってください。

34

前と同じようにリポジトリをフォークします。

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キー（多くは言わず、自分で見てください）
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

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。