Mix Space のデプロイ

はじめに

1C1G 以上のサーバーを使ってください。1G のメモリだとフロントエンドのビルド中に問題が発生することがあります。

Ubuntu などのモダンな Linux ディストリビューションを推奨します。CentOS 7 などでは十分に新しいバージョンの Node.js をインストールできないため、デプロイに失敗します。

バックエンドのデプロイ

参考：https://mx-space.js.org/docs/docker

Docker のインストール

サーバーが中国国内にある場合は、Alibaba Cloud のミラー加速を利用するのがおすすめです。インストールコマンドは次のとおりです。

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

海外の場合は、公式スクリプトをそのまま使ってインストールできます。

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

Docker と Docker Compose がインストールできたら、次のコマンドでバージョンを確認できます。

docker -v
docker compose version

デプロイ

1. 設定ファイルを取得する

cd && mkdir -p $HOME/mx-space/core && cd $_ # 拉取 docker-compose.yml 文件
wget https://fastly.jsdelivr.net/gh/mx-space/core@master/docker-compose.yml

2. 環境変数を作成する

vi .env

3. 以下の内容を入力したら、ESC キーを押して :wq と入力し、保存して終了します。

4. バックエンドを起動する

   BASHコピー

   docker compose up -d
   

フロントエンドのデプロイ

参考：https://mx-space.js.org/themes/shiro

事前準備

1. バックエンドをデプロイして起動する
2. Clerk のアカウントを登録し、公開鍵と秘密鍵を取得する：参考
3. Node.js と pnpm をインストールする

デプロイ

1. リポジトリをクローンする（例：Shiro）

git clone https://github.com/Innei/Shiro $HOME/mx-space/Shiro && cd $HOME/mx-space/Shiro

2. 環境変数を作成する

vi .env

以下の内容を入力したら、ESC キーを押して :wq と入力し、保存して終了します。

NEXT_PUBLIC_API_URL=https://yourdomain/api/v2 
NEXT_PUBLIC_GATEWAY_URL=https://yourdomain
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXX
CLERK_SECRET_KEY=sk_test_XXXX

3. 依存関係をインストールして起動する

sudo pnpm i
sudo pnpm build
npx next start -p 2323

4. 上記でフロントエンドが正常に起動できれば、pm2 を使ってデプロイできます。

npm install -g pm2
pm2 start #
pm2 restart 0 #重新编译后用此命令重新部署，其中 0 为任务号

Nginx リバースプロキシ

1. ドメインをサーバーに向けます。

2. この記事 の手順で証明書を取得します。

3. リバースプロキシを設定します。

   BASHコピー

   vi /etc/nginx/nginx.conf
   

   以下のサンプルのドメイン名と証明書パスを自分のものに変更して、設定ファイルに追加してください。

更新

バックエンドの更新（Docker デプロイ）

core があるフォルダーに移動してから、

cd $HOME/mx-space/core
docker compose pull && docker compose up -d

フロントエンドの更新

cd $HOME/mx-space/Shiro
git pull
sudo pnpm i
sudo pnpm build
pm2 restart 0

トラブルシューティング

コメントユーザーの競合を解決する

参考：Clerk ログインと Mix Space バックエンドの連携

1. PEM を取得する：https://clerk.com/docs/backend-requests/handling/manual-jwt
2. id を取得する：Shiro で Clerk にログインした後、console からリクエストを取得します。

検索機能を追加する

参考：https://mx-space.js.org/usage/search

1. 登録：https://dashboard.algolia.com/users/sign_up
2. New Application -> Create Application -> Create Index と進みます。作成した Index は覚えておいてください。
3. API Keys から Application ID と Admin API Key を取得します。
4. 管理画面で Index、Application ID、Admin API Key を入力します。