超可愛い前後端分離ブログ Mix-space の構築

博文版は動画版の白話文の補足にのみ対応しています。詳細はドキュメントをご覧ください！

mx の変化が大きすぎるので、皆さんは参考程度にしてください。多くのことが変わりました。

https://github.com/mx-space/docs ドキュメントリポジトリからの抜粋、順序は若干異なりますが、私の動画方法が最適解です

ドキュメントアドレス https://mx-space.js.org

動画使用:

BGM:

Summer Madness-Roa

moonlight-Roa

Lights-Sappheiros

Embrace-Sappheiros

イントロダクション#

個人スペースの新しい代替方法

大佬 innei によって開発されたオープンソースの Mix-Space ブログで、前後端分離の形式を採用しています。

Mix-Space の前後端は分離されており、前後端をそれぞれ異なるサーバーにデプロイできますが、もちろんすべてを一台のサーバーにデプロイすることも可能です。

Mix-Space の Core はバックエンドサービスを提供し、Kami は著者が最も頻繁に更新するフロントエンドで、Mx-Yun は云游君 Hexo-Yun の移植版です。もちろん、kami は最も完全なサポートを提供し、Core のすべての機能を享受し、良好な動作効果やさまざまな可愛らしい小さなイースターエッグがあります！

今回は最も整備された Kami フロントエンドをデプロイします。

準備#

Mix-space を実行するには、サーバーを準備する必要があります。

一つの応用力のある頭脳
Linux カーネルバージョン > 4.18（最新の Ubuntu の使用を推奨）
実行メモリ > 1Gib
前後端の SSL 証明書
前後端アドレスの解析
宝塔パネル

オプション:

Docker イメージを持つ Ubuntu（または Tencent Cloud アプリケーションイメージ Docker）

宝塔パネルのソフトウェアストアの実行環境で PM2管理器 と Nginx をインストールし、最新の Node バージョンをインストールします。この章でインストールするのは v16.15.1 です。

少なくとも Node > 16.X が必要です。

Debian / Ubuntu の依存環境をインストール

sudo apt update && sudo apt install git curl vim wget git-lfs -y

依存環境のインストール#

sudo su
npm install -g pnpm pm2

# インストールが遅い場合は、以下のコマンドでミラーソースを切り替えます
npm config set registry http://mirrors.cloud.tencent.com/npm/

Docker のインストール#

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

# インストールが遅い場合は、以下のコマンドを推奨します
sudo curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

Docker-compose のインストール#

# docker-compose をダウンロード

wget https://github.com/docker/compose/releases/download/v2.6.0/docker-compose-linux-x86_64

#(バックアップ) wget https://download.fastgit.org/docker/compose/releases/download/v2.6.0/docker-compose-linux-x86_64

# 新しいフォルダを作成（必須ではありません）、必要に応じて

sudo mkdir -p /usr/local/lib/docker/cli-plugins/

# 指定された場所にコピー

sudo cp ./docker-compose-linux-x86_64  /usr/local/lib/docker/cli-plugins/docker-compose

# 実行権限を付与

sudo chmod +x /usr/local/lib/docker/cli-plugins/docker-compose

インストールが完了したか確認

docker compose version

正常にバージョン番号が出力されれば問題ありません。

Core のデプロイ#

cd

mkdir -p mx-space/server

cd mx-space/server

wget https://fastly.jsdelivr.net/gh/mx-space/core@master/docker-compose.yml

wget https://fastly.jsdelivr.net/gh/mx-space/core@master/.env.example -O .env

宝塔または vim でこの .env ファイルを編集します。ファイルの例は以下の通りです。

# この ENV ファイルの例は Docker Compose のみ用
# https://docs.docker.com/compose/environment-variables/#the-env-file を参照
JWT_SECRET=7294c34e0b28ad282333333          #ここに16文字以上32文字以下の文字列を入力します。例：hash の md5 値
ALLOWED_ORIGINS=miaoer.xyz,www.miaoer.xyz,v6.www.miaoer.xyz  #ここに許可されたドメイン名を入力します。通常は kami のドメインです。複数のドメインを許可する場合は、カンマで区切ります。

Vim 保存: Ecs 退出編集、Shift + :(コロン) 入力 wq
つまり :wq

イメージをプル#

# 最新のイメージをプル

sudo docker compose pull

# コンテナを起動

sudo docker compose up -d

リバースプロキシ#

宝塔パネルに入り — ウェブサイト、バックエンドウェブサイトアドレスを設定します。ここでは api.miaoer.xyz を使用します。

好きなホスト名を入力し、解析を忘れないでください。

新しいサイトを作成し、設定 - リバースプロキシ - リバースプロキシを追加します。

プロキシ名は管理が容易になるように バックエンド と設定します。

ターゲット URL: http://127.0.0.1:2333 送信ドメイン: $host

保存後、設定ファイル をクリックし、下の設定ファイルのテキストをコピーして、以前の設定を全て削除してください。

#PROXY-START/
location /socket.io {
    proxy_http_version 1.1;
    proxy_buffering off;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass http://127.0.0.1:2333/socket.io;
}


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;

    #Nginx キャッシュを設定


    set $static_fileJsNv8TWb 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
    	set $static_fileJsNv8TWb 1;
    	expires 12h;
        }
    if ( $static_fileJsNv8TWb = 0 )
    {
    add_header Cache-Control no-cache;
    }
}

#PROXY-END/

SSL 証明書の設定#

ここでは Tencent Cloud が無料で提供するものを使用します。ダウンロード時に Nginx を選択し、SSL 証明書をダウンロードします。圧縮ファイルを開き、.key と .pem の拇印と証明書ファイルのテキストを

サイト設定 - SSL - その他の証明書にコピーします。動画はプライバシーの問題でモザイク処理されています。

.pem ファイルの最後の行は空行なので削除してください。

保存時に強制 HTTPS を有効にすることをお勧めします。

初期化#

バックエンドアドレス https://server.test.cn/proxy/qaqdmin にアクセスして初期化を行います。

動画では示されていませんが、新しい mx の更新後には API アドレスと Gateway アドレスを入力する必要があります。

デモのため、ここでは以下のように入力します；

API アドレス: https://api.miaoer.xyz/api/v2

Gateway アドレス: https://api.miaoer.xyz

永続化を有効にします。

サイト設定 でサイトタイトルとサイト説明を設定します。

キーワードは自由に選択してください。

フロントエンドアドレスは手動で変更する必要があります。ここでは https://www.miaoer.xyz に設定します。

API アドレスはデフォルトで正しいです。例: https://api.miaoer.xyz/api/v2

バックエンドアドレスも正しいです。ここでは変更をお勧めしません。

ゲートウェイもデフォルトで正しいです。

オーナー情報 では、すべてを記入することをお勧めします。

メールアドレスは友達リンクとコメント通知を受け取るためのアドレスを指します。後でバックエンドパネルでメール通知を設定します。

パスワードはバックエンドパネルのパスワードです。パスワードを確認してください。

個人ホームページには自分のフロントエンドアドレスを設定します。ここでは https://www.miaoer.xyz に設定します。

アバターには自分のアバターアドレスを設定します。バックエンドから後でアバターをアップロードできます。CDN 画像ホスティングを自分で構築することをお勧めします。既存のものを使用することもできます。ここでは自分で構築したものを選びました。

個人紹介は個人の好みに応じて記入してください。

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

cd
cd mx-space

git clone https://github.com/mx-space/kami.git --depth=1

# ネットワークが悪い場合は、以下のコマンドを使用してください。

git clone https://hub.fastgit.xyz/mx-space/kami.git --depth=1

安定版にブランチを切り替えます。

cd kami && git fetch --tags && git checkout $(git rev-list --tags --max-count=1)

env を修正します。

宝塔または vim でこの .env ファイルを編集します。ファイルの例は以下の通りです。

# API アドレス
NEXT_PUBLIC_API_URL=https://api.miaoer.xyz/api/v2
# GATEWAY アドレス
NEXT_PUBLIC_GATEWAY_URL=https://api.miaoer.xyz
# フロントエンドで使用する設定項目名
NEXT_PUBLIC_SNIPPET_NAME=kami
# CDN を使用する場合、生成物のプレフィックスを変更
ASSETPREFIX=

Vim 保存: Ecs 退出編集、Shift + :(コロン) 入力 wq
つまり :wq

依存関係をインストールします。

pnpm i

ビルドします。

pnpm build

フロントエンドを起動します。

pm2 start

サイトを追加します。

宝塔パネルに入り — ウェブサイト、フロントエンドウェブサイトアドレスを設定します。ここでは www.miaoer.xyz を使用します。

好きなホスト名を入力し、解析を忘れないでください。

新しいサイトを作成し、設定 - リバースプロキシ - リバースプロキシを追加します。

プロキシ名は管理が容易になるように フロントエンド と設定します。

ターゲット URL: http://127.0.0.1:2323 送信ドメイン: $host

保存後、設定ファイル をクリックし、下の設定ファイルのテキストをコピーして、以前の設定を全て削除してください。

Kami v3.15.1 バージョン以降、以前の動画の設定とは異なるため、以下のリバースプロキシ設定を使用してください。

#PROXY-START/

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;

    #Nginx キャッシュを設定


    set $static_fileSw1Jy3nG 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
    	set $static_fileSw1Jy3nG 1;
    	expires 12h;
    }
    if ( $static_fileSw1Jy3nG = 0 )
    {
    add_header Cache-Control no-cache;
    }
}
#PROXY-END/

SSL 証明書の設定

前のバックエンドと非常に似ていますので、応用できることを願っています。

クラウド関数とテスト#

このセクションの動画の意味は、ここまでデプロイすることです。他の部分はドキュメントに従って Mix-space を完成させてください！

したがって、ここでは一部の参考デモのみを行い、具体的には初めての使用説明 | Mix Space をご覧ください。

バックエンドに入り、その他・設定とクラウド関数に移動します。

新しい項目を作成します:

名前：kami
引用：theme
データタイプ：YAML / JSON
公開：はい

以下の内容を参照し、右側のボックスにコピーして、自分の状況に応じて修正します。以下は YAML 形式の例で、例に基づいて修正できます。

中には大量の jsd リンクがありますので、自分で処理してください。

設定例#

name: kami

site:
  favicon: https://fastly.jsdelivr.net/gh/mx-space/kami@master/public/favicon.svg
  # 開屏図とロゴ svg タグ、注意 XSS
  logo_svg: <svg height="200px" viewbox="0 0 200 200" version="1.1" shape-rendering="geometricPrecision"><g stroke="none" strokewidth="1" fill="none" fillrule="evenodd"><g id="forest" fill="currentColor" fillrule="nonzero"><path d="M116.799219,176.953125 C112.484375,176.953125 108.986719,180.450781 108.986719,184.765625 L108.986719,192.1875 C108.986719,196.502344 112.484375,200 116.799219,200 C121.114062,200 124.611719,196.502344 124.611719,192.1875 L124.611719,184.765625 C124.611719,180.450781 121.114063,176.953125 116.799219,176.953125 Z" id="Path"></path><path d="M121.456641,150.248047 C121.298828,150.158203 108.089453,142.472656 101.778125,128.767188 C106.058594,127.733594 109.462109,126.055078 112.442578,124.584766 C115.008203,123.319531 116.671094,120.749609 116.787109,117.891406 C116.903125,115.033203 115.441797,112.336328 112.986719,110.867578 C108.091406,107.937891 96.6117187,99.3179688 91.234375,88.9808594 C94.3324219,88.1222656 97.3414062,86.940625 100.255469,85.734375 C102.819922,84.6730469 104.628906,82.3304688 105.007422,79.5808594 C105.385938,76.83125 104.276953,74.0875 102.094531,72.3722656 C82.3632812,56.8691406 70.0417969,20.1820313 69.9210937,19.8171875 C68.8640625,16.6136719 65.8710938,14.4558594 62.5019531,14.4558594 C62.4839844,14.4558594 62.465625,14.4558594 62.4472656,14.4558594 C59.05625,14.4792969 56.0664063,16.690625 55.0484375,19.925 C54.934375,20.2878906 43.3839844,56.3890625 22.3355469,71.8246094 C20.075,73.4824219 18.8757813,76.2242188 19.1933594,79.0097656 C19.5109375,81.7949219 21.2964844,84.196875 23.8722656,85.303125 C26.1265625,86.2714844 29.5851563,87.7554688 34.3464844,89.0640625 C29.0214844,98.8472656 17.2527344,107.819922 12.2683594,110.952734 C9.7640625,112.517969 8.35625,115.360938 8.63007813,118.301563 C8.90390625,121.242188 10.8117188,123.776953 13.5617188,124.852734 C13.9058594,124.9875 14.2785156,125.1375 14.6828125,125.3 C16.8089844,126.154297 19.7445313,127.332031 23.6902344,128.501953 C17.2066406,141.350391 3.68632813,150.395703 3.53671875,150.494141 C1.09140625,152.094922 -0.25625,154.926563 0.044140625,157.833594 C0.34453125,160.740625 2.2421875,163.237109 4.96328125,164.303906 C5.76640625,164.61875 23.6132813,171.474609 55.471875,172.521875 L55.471875,192.1875 C55.471875,196.502344 58.9695313,200 63.284375,200 C67.5992187,200 71.096875,196.502344 71.096875,192.1875 L71.096875,172.544531 C103.353125,171.572656 119.956641,164.517578 120.696484,164.196094 C123.407422,163.016797 125.221094,160.408984 125.382422,157.457031 C125.542578,154.504688 124.023438,151.714844 121.456641,150.248047 Z M63.6742188,157.03125 C46.6414063,157.03125 33.3425781,155.194922 24.325,153.367578 C29.7734375,147.926953 35.75625,140.533203 39.3648438,131.730859 C44.5152344,132.389453 50.4929688,132.8125 57.4242188,132.8125 C61.7390625,132.8125 65.2367188,129.314844 65.2367188,125 C65.2367188,120.685156 61.7390625,117.1875 57.4242188,117.1875 C46.7472656,117.1875 38.8265625,116.116406 32.8878906,114.769531 C33.4640625,114.256641 34.0460937,113.726953 34.63125,113.180859 C42.2988281,106.020703 47.5574219,98.8085938 50.3394531,91.6605469 C51.3,91.7195313 52.2839844,91.7652344 53.2945313,91.7941406 C57.6179688,91.9210938 61.2035156,88.5207031 61.3269531,84.2082031 C61.45,79.8949219 58.0535156,76.2988281 53.740625,76.1757813 C49.2144531,76.0464844 45.3546875,75.5386719 42.0863281,74.8628906 C51.1160156,64.9648438 57.9273437,52.8929688 62.5585937,43.0527344 C67.1378906,52.8117188 73.746875,64.7949219 82.1886719,74.6710938 C81.9644531,74.6675781 81.74375,74.6566406 81.5277344,74.6382813 C79.1414062,74.4355469 76.7910156,75.3363281 75.1546875,77.0871094 C73.5183594,78.8375 72.7753906,81.2421875 73.1398437,83.6105469 C75.0921875,96.3007813 83.7679687,106.876563 91.5785156,114.065234 C89.2605469,114.0125 87.06875,114.98125 85.5433594,116.714844 C83.9519531,118.523438 83.2839844,120.964844 83.7328125,123.33125 C86.2589844,136.650391 93.8433594,146.823047 100.754297,153.641797 C92.2726562,155.367188 79.8890625,157.03125 63.6742188,157.03125 Z" id="Shape"></path><path d="M199.920703,162.187891 C199.623438,160.078516 198.473047,158.178125 196.74375,156.933203 C196.677734,156.885547 190.046094,152.078516 183.367188,144.459375 C178.680469,139.112891 175.16875,133.808203 172.869141,128.615234 C177.176953,127.299219 180.334766,125.896484 182.855078,124.776563 C183.779688,124.365625 184.578125,124.011328 185.239063,123.752344 C187.985938,122.677344 189.889453,120.144141 190.166016,117.207422 C190.442578,114.270703 189.037891,111.426172 186.539844,109.857031 C180.508203,106.06875 165.928516,94.9003906 160.170313,82.8882813 C165.975,81.6109375 170.135938,80.0996094 173.450781,78.6757813 C176.026953,77.5691406 177.8125,75.1675781 178.130078,72.3824219 C178.447656,69.596875 177.248438,66.8550781 174.987891,65.1972656 C150.69375,47.3816406 137.426172,5.89023438 137.296484,5.47773438 C136.282422,2.23945312 133.294141,0.02578125 129.900781,0 C129.880469,0 129.860938,0 129.840625,0 C126.471875,0 123.479297,2.1609375 122.422266,5.36484375 C122.345703,5.59726563 114.594141,28.8386719 101.137891,48.2902344 C98.6832031,51.8386719 99.5699219,56.7050781 103.118359,59.1597656 C106.666016,61.6144531 111.532813,60.7277344 113.987891,57.1796875 C120.606641,47.6113281 125.908984,37.3730469 129.771094,28.9074219 C135.158203,40.7210938 143.499219,55.9507812 154.835547,68.0292969 C148.182031,69.3046875 138.466406,70.365625 124.221094,70.365625 C119.90625,70.365625 116.408594,73.8632812 116.408594,78.178125 C116.408594,82.4929687 119.90625,85.990625 124.221094,85.990625 C131.989844,85.990625 138.586719,85.7003906 144.237891,85.2101562 C147.194141,93.6328125 153.265625,102.16875 162.363672,110.664453 C163.722266,111.933203 165.067578,113.123437 166.365234,114.225781 C160.423047,115.830469 152.078516,117.127344 139.455469,117.127344 C135.140625,117.127344 131.642969,120.625 131.642969,124.939844 C131.642969,129.254687 135.140625,132.752344 139.455469,132.752344 C146.397656,132.752344 152.275391,132.379297 157.298828,131.778516 C160.196094,139.490625 164.986719,147.194531 171.617578,154.758984 C173.749219,157.191406 175.869141,159.373437 177.836328,161.269531 C171.480469,162.880469 160.966797,164.453125 144.142969,164.453125 C139.828125,164.453125 136.330469,167.950781 136.330469,172.265625 L136.330469,192.1875 C136.330469,196.502344 139.828125,200 144.142969,200 C148.457813,200 151.955469,196.502344 151.955469,192.1875 L151.955469,179.966016 C166.112109,179.546484 177.524219,177.948828 185.952344,175.201562 C193.906641,172.608203 197.119922,169.648438 198.327734,168.114453 C199.645703,166.441016 200.217969,164.297266 199.920703,162.187891 Z" id="Path"></path></g></g></svg>
  # ランダム画像
  figure:
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/qsNmnC2zHB5FW41.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/GwJzq4SYtClRcZh.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/6nOYcygRGXvpsFd.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/Qr2ykmsEFpJn4BC.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/KiOuTlCzge7JHh3.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/sM2XCJTW8BdUe5i.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/18KQYP9fNGbrzJu.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/rdjZo6Sg2JReyiA.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/X2MVRDe1tyJil3O.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/EDoKvz5p7BXZ46U.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/EGk4qUvcXDygV2z.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/5QdwFC82gT3XPSZ.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/KPyTCARHBzpxJ46.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/7TOEIPwGrZB1qFb.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/Ihj5QAZgVMqr9fJ.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/KZ6jv8C92Vpwcih.jpg
  # 背景画像
  background:
    src:
      # 明るい背景
      light: https://fastly.jsdelivr.net/gh/mx-space/docs-images@master/assets/background.png
      # 暗い背景
      dark: https://fastly.jsdelivr.net/gh/mx-space/docs-images@master/assets/background-night.png
    position: top center fixed
  # サイトのヘッダーを定義
  header:
    menu:
      - title: ソース
        path: /
        type: Home
        icon: faDotCircle
        subMenu: []
      - title: 文
        path: /posts
        type: Post
        subMenu: []
        icon: faGlasses
      - title: 記
        type: Note
        path: /notes
        icon: faFeatherAlt
      - title: 言
        path: /says
        icon: faComments
      - title: 覧
        icon: faHistory
        path: /timeline
        subMenu:
          - title: 生活
            icon: faFeatherAlt
            path: /timeline?type=note
          - title: 博文
            icon: faBookOpen
            path: /timeline?type=post
          - title: 回想
            icon: faCircle
            path: /timeline?memory=1
      - title: 友
        icon: faUserFriends
        path: /friends
      - title: 訴
        icon: faComment
        path: /recently
      - title: 余
        icon: faCircleNotch
        path: /favorite/music
        subMenu:
          - title: 音楽を聴く
            icon: faMusic
            type: Music
            path: /favorite/music
      - title: ""
        icon: faSubway
        path: "https://travellings.link"
  # アバター下のソーシャルIDを定義
  social:
    - url: "https://github.com/Innei"
      title: GitHub
      icon: faGithub
      color: var(--black)
    - url: "https://jq.qq.com/?_wv=1027&k=5t9N0mw"
      title: QQ
      icon: faQq
      color: "#12b7f5"
    - url: "https://twitter.com/__oQuery"
      title: twitter
      icon: faTwitter
      color: "#02A4ED"
  # サイトのフッターを定義
  footer:
    background:
      src:
        dark: |-
        light: https://fastly.jsdelivr.net/gh/mx-space/docs-images@master/assets/footer.png
      position: top/cover
    # デフォルトの戻り先アドレス
    home_page: https://innei.ren
    # フッターの座右の銘
    motto:
      content: Stay hungry. Stay foolish.
      author: Steve Jobs
    # ICP 登録
    icp:
      enable: false
      label: "浙ICP备 20028356 号"
      link: http://beian.miit.gov.cn/
    # カスタムフッターのテキストとリンク
    navigation:
      - name: About
        path: "/about"
      - name: 留言
        path: "/message"
      - name: 友链
        path: "/friends"
      - name: RSS 订阅
        path: "/feed"
        newtab: true
      - name: 站点地图
        path: "/sitemap"
        newtab: true
      - name: 开往
        path: https://travellings.link/
        newtab: true
  # カスタムスクリプト、スタイル、JS（外部リンクのインポートをサポートし、script タグは不要）
  custom:
    # カスタムスクリプト
    script: |-
      console.log('Hello')
    # カスタムスタイル
    style: |-
      .foo {
        color: red
      }
    # 外部 JS のインポート、script タグは不要
    js:
      - https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js
    # 外部 CSS のインポート
    css:
      - https://fastly.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css
# 機能を定義、例えばプレイリスト、追番
function:
  player:
    # デフォルトのプレイリスト
    # 网易云 のみサポート
    id:
      - 563534789
      - 1447327083
      - 1450252250
  # 分析、Google OR Baidu OR umami
  analyze:
    enable: false
    ga: ""
    baidu: ""
    umami: ""
  # 寄付
  donate:
    enable: false
    link: https://afdian.net/@Innei
  # デバッグツールを無効にするか（訪問者）
  ban_devtool:
    enable: false

フロントエンドのテスト#

フロントエンドのクラウド関数設定が完了したので、今すぐアクセスできます。入力 https://www.miaoer.xyz

私は正常なバックエンドにロールバックしたので、ここには記事があります。デフォルトでは何も記事はありません。問題がなければ、バックエンドで記事を書いて公開してテストしてみてください。

設定#

バックエンドパネルの設定 - システムには

サイト設定
SEO 最適化
バックエンド追加設定
テキスト設定
メール通知設定
コメント設定
Bark 通知設定
友链設定
バックアップ
百度推送設定
Algolia Search
ターミナル設定

ここでは一つ一つ説明しません。

初めての使用説明 | Mix Space のドキュメントを参照してください。

また、設定とクラウド関数については、ここでは説明しません。具体的にはドキュメントのクラウド関数の内容を確認してください。

アップグレードとバックアップ#

1. 魔改アップグレード - フロントエンド#

mx-space/kami フォルダの名前を任意の名前に変更します。ここでは kami.d に変更します。

その後、kami フロントエンドリポジトリをプルして安定版に更新します。

cd
cd mx-space

git clone https://github.com/mx-space/kami.git --depth=1

cd kami && git fetch --tags && git checkout $(git rev-list --tags --max-count=1)

その後、更新前に変更した設定ファイル（mx-space/kami.d の .env と public フォルダ）を mx-space/kami にコピーします。

もし友链ページのソースコードが更新されている場合は、更新前のファイルを上書きするとビルドエラーが発生する可能性があります。

置き換えが完了したら、依存関係をインストールし、ビルドし、フロントエンドを起動します。

pnpm i

pnpm build

pm2 start

# 万全を期す: pnpm i && pnpm build && pm2 start

2. 強制同期 - フロントエンド#

直接 mx-space/kami フォルダ内で git pull origin master を実行します。

依存関係をインストールし、ビルドし、フロントエンドを起動します。

pnpm i

pnpm build

pm2 start

# ベテランオプション: pnpm i && pnpm build && pm2 start

この方法は、Kami のソースコードに変更を加えていない怠け者のユーザーに適しています。

バックエンドのアップグレード#

Mix-space バックエンドは Docker-compose を使用しているため、アップグレードが非常に便利です。

cd
cd mx-space/server

サーバーフォルダに入り、以下を実行します。

docker compose pull && docker compose up -d

バックアップとロールバック#

バックアップ#

バックエンドのその他 - バックアップで今すぐバックアップをクリックすると、絶対パスにバックアップされます:

/root/mx-space/server/data/mx-space/backup/20xx-xx-xx_xx:xx:xx/backup-20xx-xx-xx_xx:xx:xx.zip

変更していない場合は、バックエンドパネルの設定 - システム - バックアップを参照してください。

ロールバック#

バックエンドのその他 - バックアップで今すぐバックアップをクリックし、以前のコンピュータにある backup.zip を生成されたバックアップディレクトリにアップロードして名前を変更します。

tip
例：生成されたバックアップが backup-2022-09-01_23:33:33.zip の場合、ロールバックしたいバックアップパッケージ backup-2022-01-14_05:14:19.zip を生成されたバックアップと同じ名前に変更します。
mv /root/mx-space/server/data/mx-space/backup/2022-01-14_05:14:19/backup-2022-01-14_05:14:19.zip backup-2022-09-01_23:33:33.zip

⚠️ この操作はデータベースの変更を伴いますので、数日分のバックアップを多めに取っておいてください。データは貴重ですので、慎重に操作してください！

一般的に、ロールバックは analyze データページの IP & PV データが失われるだけです。

置き換えが完了すると、データベースに変更があることが通知され、x 秒後にページが再読み込みされます。

再読み込みする前に、記事やコメントが失われていないか確認してください。

ここで動画版と同期するため、ブログはここまでの更新となります。他の詳細は Docs をご覧ください。

コメントや寄付をお待ちしております。動画のいいねもお忘れなく。このブログは継続的に更新されています！

この記事は Mix Space によって xLog に同期更新されました。
元のリンクは https://www.miaoer.net/posts/blog/mx-install