ゼロからはじめる：1PanelでMix Spaceバックエンドをデプロイ

Note
これは「Mix Space + Yohaku デプロイシリーズ」の最初の記事で、バックエンド（Core）のインストールに焦点を当てます。フロントエンドテーマ Yohaku のデプロイについては、続く第二回をご覧ください。

Mix Space は、フロントエンドとバックエンドが分離されたモダンな個人ブログシステムです。バックエンドの Core は、RESTful API、定期タスク、バックアップ、サーバーレス関数などの一連のサービスを提供し、システム全体を静かに支える心臓部です。フロントエンドテーマはそこから独立しており、自由に組み合わせることができます。

この記事では、1Panel パネルを使って、Mix Space のバックエンドを自分のサーバーで動かす方法を紹介します。手間をかけずに、一歩ずつ進めていきましょう。

ステップ1 · 1Panel パネルのインストール

1Panel は、モダンなオープンソースの Linux サーバー管理パネルで、すっきりとしたインターフェースと直感的な操作が特徴です。これがあれば、この後のコンテナ管理、ファイルアップロード、リバースプロキシ設定が格段にスムーズになります。

インストール前のちょっとした確認

チェック項目	要件
OS	主要な Linux ディストリビューション（Debian / Ubuntu / CentOS など）
サーバーアーキテクチャ	`x86_64`、`aarch64`、`armv7l` 等すべてサポート
利用可能なメモリ	1 GB 以上を推奨
ネットワーク環境	インターネットに正常にアクセスできること
ブラウザ	Chrome、Firefox、Edge などの最新ブラウザ

一行のコマンドでインストール完了

SSH でサーバーにログインし、以下を実行します：

BASH

bash -c "$(curl -sSL https://resource.fit2cloud.com/1panel/package/v2/quick_start.sh)"

コマンドラインの指示に従って操作し、インストールが完了するまで気長にお待ちください。成功すると、コンソールに次のようなアクセス情報が表示されます：

LOG

パネルアドレス：http://あなたのサーバーIP:ポート/セキュリティエントリ

クラウドサーバーユーザーは注意：セキュリティグループで該当ポートを開放するのを忘れずに。さもないとブラウザからパネルにアクセスできません。

セキュリティエントリを忘れた場合は、再度サーバーに SSH 接続して以下のコマンドを実行してください。entrance フィールドの値がエントリパスです：

BASH

1pctl user-info

Docker のインストールに失敗した場合は、先に以下のコマンドを単独で実行して修正してください：

BASH

bash <(curl -sSL https://linuxmirrors.cn/docker.sh)

ステップ2 · 1Panel で Mix Space をインストール

2.1 アプリケーションパッケージのダウンロード

以下のリポジトリから mxspace.zip ファイルをダウンロードしてご用意ください：

yohaku-docker-build1

Shell

2.2 アプリケーションパッケージのアップロード

1Panel パネルにログインし、左側メニューから ホスト → ファイル に進み、次のパスに移動します：

/opt/1panel/resource/apps/local

「アップロード」をクリックし、先ほどダウンロードした mxspace.zip ファイルを選択します。

2.3 解凍、パスに注意！

アップロードが完了したら、mxspace.zip をクリックして解凍を選択します。

この手順は必ず注意してください！

解凍時に、手動でターゲットパスを以下のように完全な形に補完する必要があります：

/opt/1panel/resource/apps/local/mxspace

パスを間違えるとファイルが誤ったディレクトリに散らばってしまい、アプリストアがこのローカルアプリを認識できなくなります。

2.4 ローカルアプリの同期

1Panel の アプリストア に移動し、右上の ローカルアプリを同期 ボタンをクリックします。しばらくしてから検索ボックスに mxspace と入力すると、先ほど追加したアプリが表示されます。

インストール をクリックして、設定ページに進みます。

2.5 インストール設定項目の入力

インストールページには、3つの読み取り専用の説明と5つの設定項目があります。上から順に入力していきます。

Note
ページ上部には、グレーの「📌」マークの付いた3つの注意書きがあります。それぞれ JWT シークレットの要件、ドメイン名の形式、暗号化機能の注意点が説明されていますが、参考情報であり、変更の必要はありません。読み飛ばしてください。

🔑 JWT シークレット (JWT Secret)

これはバックエンドサービスのコアとなるセキュリティ認証情報で、長さは16文字以上、32文字以下でなければなりません。ランダムに生成された強力なパスワードを使用することをお勧めします。ターミナルで次のコマンドを実行できます：

BASH

openssl rand -base64 24

生成された結果をここに入力し、大切に保管してください。このブログシステムの鍵のようなもので、紛失するとリセットが必要になり面倒です。

🌐 許可されるオリジン (Allowed Origins)

バックエンド API へのアクセスを許可するフロントエンドのドメインを入力します。複数のドメインは英語のカンマで区切ります。形式の例：

localhost:*,あなたのテーマのフロントエンドドメイン

Yohaku フロントエンドをデプロイする際、ここには Yohaku が配置されるドメインを入力します。まだ決まっていない場合は、一旦 localhost:* と入力しておき、後でインストール済みアプリの設定ページで変更できます。

🔒 暗号化を有効にする (Enable Encryption)

ドロップダウンから選択します。デフォルトは無効（推奨） です。

暗号化機能は不可逆です。有効にした後で鍵を紛失すると、データを復元できなくなります。特別な要件がなければ、無効のままにしておくことを推奨します。

🗝️ 暗号化キー (Encryption Key)

前の項目で「有効」を選択した場合のみ入力が必要です。キーは64桁の小文字英字と数字で、以下のコマンドで生成できます：

BASH

openssl rand -hex 32

暗号化を無効にした場合は、ここは空欄のままで構いません。

🔢 HTTP ポート

デフォルトは 2333 で、通常は変更不要です。ポートが競合する場合は、他の利用可能なポートに変更してください。

Note
ポートの外部公開を直接有効にすることは推奨しません。次のステップでリバースプロキシ経由で外部にサービスを提供する方が、より安全で適切です。

2.6 インストール開始 🎉

設定に間違いがないことを確認し、インストール開始をクリックします。

1Panel が自動的に innei/mx-server、mongo:7、redis:alpine の3つのイメージを取得し、オーケストレーションして起動します。初回インストール時はイメージの取得に数分かかるため、気長に待ちましょう。

ステータスが実行中（Running） と表示されれば、Mix Space バックエンドは静かに動き出しています 🌿

ステップ3 · リバースプロキシと HTTPS の設定

ポートを直接公開する方法は安全でなく、見た目も良くありません。Nginx リバースプロキシを使ってサービスをあなたのドメインにバインドし、HTTPS を設定して初めて、全体が完成します。

ここでは、完全な Nginx 設定を提供します。この設定は興味深い工夫をしています――フロントエンド（Yohaku、ポート 2323） とバックエンド（Mix Space Core、ポート 2333） のルーティングを同じ server ブロックに記述し、ひとつのドメインで外部に提供するのです。訪問者があなたのブログにアクセスすると、フロントエンドのページとバックエンドの API が舞台裏で静かにそれぞれの役割を果たし、外からはクリーンなドメインだけが見えます。

使用前に以下の内容をあなた自身の値に置き換えてください：

あなたのドメイン → 実際のドメイン名に置き換え。合わせて 7か所 あります
あなたのサブネットセグメント → 実際のサブネットセグメントに置き換え。1か所 です
あなたのサーバーIP → 実際のサーバー IP に置き換え。1か所（set_real_ip_from フィールド）
SSL 証明書のパス → 実際の証明書のパスに置き換え（ssl_certificate と ssl_certificate_key）
baidu_verify_*.html → Baidu サイト認証が不要な場合は、該当の location ブロックを削除してください

NGINX

server {
    # IPv4/IPv6 の HTTP・HTTPS ポートをリッスン
    listen 80;
    listen [::]:80;
    listen 443 ssl;
    listen [::]:443 ssl;

    server_name あなたのドメイン;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/sites/あなたのドメイン/index;

    # ログのパス
    access_log /www/sites/あなたのドメイン/log/access.log main;
    error_log /www/sites/あなたのドメイン/log/error.log;
    error_page 404 /404.html;

    # CDN/プロキシから実際のクライアント IP を取得
    real_ip_recursive on;
    set_real_ip_from あなたのサブネットセグメント（例: 172.19.0.0/16）;
    set_real_ip_from あなたのサーバーIP;
    set_real_ip_from 127.0.0.1;
    real_ip_header X-Forwarded-For;

    # バックエンドにクライアント情報を渡す
    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 X-Forwarded-Proto $scheme;

    # SSL 証明書とセキュリティ設定
    ssl_certificate /www/sites/あなたのドメイン/ssl/fullchain.pem;
    ssl_certificate_key /www/sites/あなたのドメイン/ssl/privkey.pem;
    ssl_protocols TLSv1.3 TLSv1.2;
    ssl_ciphers ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:!aNULL:!eNULL:!EXPORT:!DSS:!DES:!RC4:!3DES:!MD5:!PSK:!KRB5:!SRP:!CAMELLIA:!SEED;
    ssl_prefer_server_ciphers off;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;

    # HTTP/2 と HSTS を有効化
    http2 on;
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains";

    # Baidu 認証ファイルを直接返す
    location = /baidu_verify_codeva-46XKS9HVjs.html {
        root /www/sites/あなたのドメイン/index;
        default_type text/plain;
        try_files $uri =404;
    }

    # ルートパス：エラーパラメータを除去してリダイレクト、それ以外は通常の転送
    location = / {
        if ($args ~* "error=please_restart_the_process") {
            return 301 $scheme://$host;
        }
        proxy_pass http://127.0.0.1:2323;
    }

    # センシティブファイルを隠蔽
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md) {
        return 404;
    }

    # ACME 検証ディレクトリ
    location ^~ /.well-known/acme-challenge {
        allow all;
        root /usr/share/nginx/html;
    }

    # .well-known 以下の動的ファイルへのアクセスを禁止
    location ~ ^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$ {
        return 403;
    }

    # WebSocket プロキシ
    location /socket.io {
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_buffering off;
        proxy_pass http://127.0.0.1:2333/socket.io;
    }

    # API、レンダリング、プロキシ転送
    location /api/v3    { proxy_pass http://127.0.0.1:2333/api/v3; }
    location /render    { proxy_pass http://127.0.0.1:2333/render; }
    location /proxy     { proxy_pass http://127.0.0.1:2333/proxy; }
    location /qaqdmin   { proxy_pass http://127.0.0.1:2333/proxy/qaqdmin; }

    # その他のパスはバックエンドへ転送（バッファ最適化あり）
    location / {
        proxy_buffer_size          128k;
        proxy_buffers              4 256k;
        proxy_busy_buffers_size    256k;
        proxy_pass http://127.0.0.1:2323;
    }

    # HTTP から HTTPS へ自動リダイレクト
    if ($scheme = http) {
        return 301 https://$host$request_uri;
    }
    error_page 497 https://$host$request_uri;
}

設定を保存したら、nginx -t で構文をチェックし、その後 nginx -s reload でリロードすれば反映されます。

ルーティングロジック一覧：

パスプレフィックス	プロキシ先	説明
`/api/v3`	バックエンド `:2333`	Mix Space REST API
`/socket.io`	バックエンド `:2333`	WebSocket リアルタイムプッシュ
`/render`	バックエンド `:2333`	サーバーサイドレンダリングインターフェース
`/proxy`	バックエンド `:2333`	プロキシおよび管理画面入口
`/qaqdmin`	バックエンド `:2333`	管理画面へのショートカット
その他すべてのパス	フロントエンド `:2323`	Yohaku ページ

つまり、ドメインはひとつだけで、フロントエンドのブログもバックエンドの管理画面も同じ入口の下にまとまり、すっきりしてエレガントです。

設定が完了すると、バックエンド関連のアドレスは次のようになります（後で Yohaku をデプロイする際に使用します）：

バックエンドAPIアドレス：https://あなたのドメイン/api/v2
バックエンドゲートウェイアドレス：https://あなたのドメイン
管理画面アドレス：https://あなたのドメイン/qaqdmin

これらのアドレスを控えておいてください。

ステップ4 · 管理画面の初期化

リバースプロキシ設定が完了したら、ブラウザで管理画面にアクセスします：

https://あなたのドメイン/qaqdmin

初回アクセス時に初期化ウィザードが表示され、管理者アカウントの作成やサイト基本情報の入力などを案内します。画面の指示に従って進めてください。

よくある質問

Q：インストール後、コンテナが何度も再起動して正常に起動しません。

おそらく、MongoDB または Redis のヘルスチェックがまだ完了していません――これらは完全に準備が整うまでに少し時間がかかり、Core コンテナは自動的にリトライします。約 1 分待てば、通常は自然に復旧します。それでも異常が続く場合は、1Panel のコンテナログで具体的なエラーメッセージを確認してください。

Q：JWT シークレットを保存し忘れてしまいました。どうすれば？

1Panel アプリストアのインストール済みリストで、mxspace の編集または設定をクリックすると、現在の環境変数の値を確認できます。

Q：許可されたオリジンを変更したい場合、どうすればよいですか？

インストール済みアプリの設定ページで、環境変数 ALLOWED_ORIGINS を変更し、保存してからコンテナを再起動すると反映されます。

Q：データはどこに保存されますか？

すべてのデータは /opt/1panel/apps/local/mxspace/mxspace/data/ ディレクトリに永続化されて保存されます。これには MongoDB データ、Redis データ、mx-space のランタイムファイルが含まれます。このディレクトリを定期的にバックアップするか、1Panel のスナップショットと一緒にバックアップしてください。

参考資料

バックエンドはしっかりと土台に着地しました 🌱
次は、第二回に進んで、Yohaku という美しい衣装をまとわせましょう。