sroxck

sroxck

ホームアーカイブ

Mx-space + shiroのゼロからの構築とデプロイのプロセスを記録します

213
AI 翻訳
この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示
AI が生成した要約
mx spaceは、シンプルでありながら多機能な個人ブログシステムで、nestjs（nodejs）を基盤にしており、mongoDBとRedisのインストールが必要です。shiroはmx spaceを基にしたReact開発のテーマシステムです。これらのシステムはGitHubで数千のスターを獲得しており、成熟した機能を持っています。 サーバーを用意し、HTTPS対応のドメインを取得した後、サーバーにdockerをインストールし、mx spaceの設定ファイルを取得して必要な値を設定します。Nginxをインストールし、SSL証明書を設定してリバースプロキシを構成します。最後に、mx spaceのバックエンドを起動し、shiroのフロントエンドを設定します。

mx space
はシンプルでありながら簡単ではない個人ブログシステムです。速くて、現代的です。これを利用して自分だけの個人空間を構築し、生活を記録し、知識を共有できます。mx Space のコアサービスは、nestjs（nodejs）に基づいており、mongoDB と Redis をインストールする必要があります。

shiro
は mx space を基にして react で開発されたテーマシステムです。

上記のシステムは github で数千の star を持ち、成熟しているだけでなく、多くの興味深い機能がありますので、今回のブログ再構築ではこのシステムを直接使用します。

準備作業#

  1. サーバー 1 台、Windows 以外で可
  2. ドメイン 1 つ、HTTPS が必要

まず、サーバーを購入します。任意の構成で構いません。新規顧客向けの割引を探すことができ、数十元で 1 年分のものがあれば十分です。ここでは、Tencent Cloud のサーバーを購入しました。新規顧客 79 元で 1 年、構成は 2h2g の宝塔 Linux パネルです。

サーバーの購入が完了したら、宝塔 Linux パネルでシステムを再インストールします。サーバーのデフォルトシステムは Tencent Cloud OS で、ここからパネルで dockerCE をインストールすると、自動的に Tencent Cloud のイメージが設定されます。

手動で docker をインストールし、イメージを Aliyun に設定することもできます。

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

実行後、成功したかどうかを確認します。

docker -v
 
docker compose version

これで、サーバーの準備作業が完了しました。

バックエンド mx space のデプロイ#

設定ファイルの取得#

サーバーのルートディレクトリで設定ファイルを取得します。

cd && mkdir -p mx-space/core && cd $_
 
# docker-compose.ymlファイルを取得
wget https://fastly.jsdelivr.net/gh/mx-space/core@master/docker-compose.yml

Core の起動設定ファイルの設定#

以下の設定ファイルの値を自分で定義した値に変更します。

- JWT_SECRET = your jwt
- ALLOWED_ORIGINS = your domain
- ENCRYPT_ENABLE = false
  • JWT キー：16 文字以上 32 文字以下の文字列を記入する必要があります。ユーザーの JWT を暗号化するために使用されます。自分のキーを必ず保存し、他人に漏らさないようにしてください。
  • 許可されたドメイン：許可されたドメインを記入する必要があります。通常はフロントエンドのドメインです。複数のドメインを許可する場合は、英語のカンマで区切ります。
  • 暗号化を有効にするかどうか：暗号化を有効にする場合は、false を true に変更します。

Core の起動#

サーバーが国内にある場合、イメージを取得できないか、取得速度が遅い場合は、プロキシを使用するか、docker-compose.yml の image の前にイメージドメインを追加してください。例えば、docker.1panel.top/innei/mx-serverのように。

docker compose up -d

Nginx リバースプロキシの設定#

Nginx のインストール#

docker を使用してインストールできますが、ここではシステムインストールを使用します。

sudo yum install nginx
# ステータスを確認
sudo systemctl status nginx
# サービスを起動
sudo systemctl start nginx

デフォルトでは単一ドメインを使用します。つまり、バックエンド管理システムとブログ表示システムは同じドメインを使用します。

また、フロントエンドとバックエンドのドメインの両方で、HTTPS 証明書を適切に設定して、ウェブサイトが正常にアクセスできるようにする必要があります。

以下の ssl 証明書を自分のものに置き換えます。

server {
    listen 80;
    listen 443 ssl http2 ; 
    ## ドメインをバインド 
    server_name www.example.com; 
    index index.html; 
    proxy_set_header Host $host; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header X-Forwarded-Host $server_name; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection "upgrade"; 
    error_log /www/sites/www.example.com/log/error.log;
    access_log /www/sites/www.example.com/log/access.log; 
    location /socket.io {
        proxy_set_header Upgrade $http_upgrade; 
        proxy_set_header Connection "Upgrade"; 
        proxy_set_header Host $host; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Proto $scheme; 
        proxy_pass http://127.0.0.1:2333/socket.io; 
    }
    location /api/v2 {
        proxy_pass http://127.0.0.1:2333/api/v2; 
    }
    location /render {
        proxy_pass http://127.0.0.1:2333/render; 
    }
    location / {
        proxy_pass http://127.0.0.1:2323; 
    }
    location /qaqdmin {
        proxy_pass http://127.0.0.1:2333/proxy/qaqdmin;
    }
    location /proxy {
        proxy_pass http://127.0.0.1:2333/proxy;
    }
 
    location ~* \/(feed|sitemap|atom.xml) {
        proxy_pass http://127.0.0.1:2333/$1; 
    }
    ssl_certificate /www/sites/www.example.com/ssl/fullchain.pem; 
    ssl_certificate_key /www/sites/www.example.com/ssl/privkey.pem; 
    ssl_protocols TLSv1.3 TLSv1.2 TLSv1.1 TLSv1; 
    ssl_ciphers 'your code'; 
    ssl_prefer_server_ciphers on; 
    ssl_session_cache shared:SSL:10m; 
    ssl_session_timeout 10m; 
    error_page 497 https://$host$request_uri; 
    limit_conn perserver 300; 
    limit_conn perip 25; 
    limit_rate 512k; 
}

リバースプロキシが成功した後、バインドされたドメインでログインして初期化を行います。

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

mx Space バックエンドがインストールされ、起動していることを確認してください。

クラウド関数の設定#

mx Space のバックエンドに入り、「設定とクラウド関数」ページに移動し、右上の新規ボタンをクリックして、編集ページに以下の設定を入力します。

  • 名前：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
      }
    }
  }
}

プリビルドの実行#

サーバーで docker を使用してデプロイします。

mkdir shiro
cd shiro
wget https://raw.githubusercontent.com/Innei/Shiro/main/docker-compose.yml
wget https://raw.githubusercontent.com/Innei/Shiro/main/.env.template .env

vim .env # ENV変数を変更
docker compose up -d

docker compose pull # 以降のイメージ更新

ENV 変数を変更します。

# バックエンドAPIアドレス
NEXT_PUBLIC_API_URL=your api
# バックエンドゲートウェイ
NEXT_PUBLIC_GATEWAY_URL=your gateway

これで mx space + shiro ブログサイトのデプロイが完了しました。ドメインにログインして設定を行った後、執筆を開始できます。

この記事は Mix Space によって xLog に同期更新されました。原始リンクは http://www.sroxck.top/posts/note/record

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