シロ、極めてミニマリストな個人ウェブサイトで、紙の純粋さと雪の新鮮さを持っています。
innei 大佬と
シロ ： シロ - 新しいスタイル、再出航
シロ / シロイは Mix-Space のフロントエンドテーマであり、その中でシロイはクローズドソース版で、Innei をスポンサーすることで入手できます。Innei。
オープンソースとクローズドソースには一部機能の違いがあり、公式ドキュメントで一部のクローズドソース版機能を見ることができます。
シロおよび関連プロジェクト#
Vercel デプロイ#
シロの Vercel デプロイについては公式ドキュメントを参照してください
https://mx-space.js.org/themes/shiro
クラウドサーバー / ローカルデプロイ#
システム / 環境要件#
- Linux、カーネルバージョン > 4.19（推奨 Debian11 / 12） チュートリアルは Debian11 / 12 を例にしています
- サーバーのメモリは 2〜4GiB が必要で、構築後の実行には 512MiB またはそれ以下で済みます（メモリが少ない場合や利用可能なメモリが不足している場合は、ローカルで構築するか、2〜4G の Swap を設定してください）：ブロガーのサーバーは 2H-2G で、4G の Swap を設定しました。
- NVM を使用して Node.js v20.12.2 をインストールし、PNPM / PM2 /sharp を使用します。
- Screen を使用してバックグラウンドでの保持を実現します（オプション）。
- 1Panel+OpenResty を使用します（オプション）。
必要な準備#
-
ドメイン名：本記事で使用する～～ダブルサブドメインモード、つまりフロントエンド
www.vlo.cc、バックエンドapi.vlo.cc~~ -
フロントエンドとバックエンドのドメイン名に必要な SSL 証明書：全サイト HTTPS が必要です（フロントエンドが API にアクセスする問題については、バックエンドの設定ファイル ALLOWED_ORIGINS に
localhost,127.0.0.1を追加してみてください）。
壹・NodeJS など関連環境#
システムパッケージキャッシュを更新し、一般的な / 必須ソフトウェアパッケージをインストールします。
apt update && apt install git curl vim wget git-lfs -y
1、NVM をインストールします。
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
2、source ~/.profileコマンドを実行して環境変数を現在のセッションに再読み込みします。
source ~/.profile
3、Node.JS の利用可能なバージョンをリストします。
nvm ls-remote
4、バージョンを決定したら、nvm install *version*コマンドを実行してダウンロードしてインストールします。例えば、Node.JS 20.12.2 をインストールします。
V20.12.2 バージョンを強く推奨します。
# インストール
nvm install 20.12.2
# バージョンを確認
node -v
5、pnpm pm2 をインストールします。
npm install -g pnpm pm2
6、sharp をインストールします。
npm i -g sharp
pnpm add sharp
# sharpの環境変数を設定
# export NEXT_SHARP_PATH=/root/node_modules/sharp
贰・シロの設定と構築#
一・Core バックエンドクラウド関数の設定#
具体的には公式ドキュメントを参照してください：
** バックエンド設定テーマ構成 **
Mix Space のバックエンドに入り、「設定とクラウド関数」ページに移動し、右上の新規ボタンをクリックして、編集ページに以下の設定を入力します：
- 名前：shiro
- 引用：theme
- データタイプ：JSON
- データ：右側に以下の例をコピーし、自分の情報に変更します。
{
"footer": {
"otherInfo": {
"date": "2022-{{now}}",
"icp": {
"text": "豫 ICP 备 2022029096号-2",
"link": "https://beian.miit.gov.cn"
}
},
"linkSections": [
{
"name": "😊について",
"links": [
{
"name": "私について",
"href": "/about"
},
{
"name": "このプロジェクトについて",
"href": "https://github.com/innei/Shiro",
"external": true
}
]
},
{
"name": "🧐もっと",
"links": [
{
"name": "タイムライン",
"href": "/timeline"
},
{
"name": "友達リンク",
"href": "/friends"
},
{
"name": "監視",
"href": "https://halo.vlo.cc",
"external": true
}
]
},
{
"name": "🤗連絡",
"links": [
{
"name": "メッセージを書く",
"href": "/message"
},
{
"name": "メールを送る",
"href": "mailto:i@vlo.cc",
"external": true
},
{
"name": "GitHub",
"href": "https://github.com/jiuyue52",
"external": true
}
]
}
]
},
"config": {
"color": {
"light": [
"#33A6B8",
"#FF6666",
"#26A69A",
"#fb7287",
"#69a6cc",
"#F11A7B",
"#78C1F3",
"#FF6666",
"#7ACDF6"
],
"dark": [
"#F596AA",
"#A0A7D4",
"#ff7b7b",
"#99D8CF",
"#838BC6",
"#FFE5AD",
"#9BE8D8",
"#A1CCD1",
"#EAAEBA"
]
},
"custom": {
"css": [],
"styles": [],
"js": [],
"scripts": []
},
"site": {
"favicon": "https://halo.vlo.cc/upload/pic/J99Y.svg",
"faviconDark": "https://halo.vlo.cc/upload/pic/J99Y.svg"
},
"hero": {
"title": {
"template": [
{
"type": "h1",
"text": "こんにちは、私は ",
"class": "font-light text-4xl"
},
{
"type": "h1",
"text": "JiuYue",
"class": "font-medium mx-2 text-4xl"
},
{
"type": "h1",
"text": "👋。",
"class": "font-light text-4xl"
},
{
"type": "br"
},
{
"type": "h1",
"text": "言語は思考の直接的な現実です",
"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/@huasui",
"qrcode": [
"https://halo.vlo.cc/upload/pic/wxdashang.png",
"https://halo.vlo.cc/upload/pic/wxdashang.png"
]
},
"bilibili": {
"liveId": 23359061
}
}
}
}
二・シロ / シロイを取得する#
cd /opt/mx-space
# 個人的な習慣として、/opt/mx-spaceディレクトリにMx-Spaceとフロントエンドシロ/カミをデプロイします
# したがって、ここで./mx-spaceはmxバックエンド/フロントエンドプロジェクトフォルダーです
git clone https://github.com/Innei/Shiro.git
# shiroiのリポジトリは自分でスポンサーして取得してください
三・.env を設定する#
.env.exampleをコピーして.envにし、.envファイルを編集します。
cd /opt/mx-space/Shiro
mv .env.template .env
vim .env
.env の例
# バックエンドAPIアドレス
NEXT_PUBLIC_API_URL=https://api.example.com/api/v2
# バックエンドゲートウェイアドレス
NEXT_PUBLIC_GATEWAY_URL=https://api.example.com
# TMDB情報取得
TMDB_API_KEY=
# GitHubトークン、フロントエンドバージョンハッシュを取得するため
GH_TOKEN=
四・シロ / シロイプロジェクトの構築を開始する#
cd /opt/mx-space/Shiro
pnpm i && pnpm build
::: warning
サーバーのある地域が NPM 公式ソースにアクセスできない場合、依存関係のインストールに失敗し、次のようなエラーが発生する可能性があります。
解決策：構築前にプロジェクトの_.npmrc_設定ファイルを手動で変更します。
cd /opt/mx-space/Shiro
vim .npmrc
# 1 ↑registryをtaobaoソース(https://registry.npmmirror.com)または他の国内ミラーソースに変更します
# nrm use taobao
# 2 ↑nrm（npmのミラーソース管理ツール）がインストールされている場合は、nrmを使用することもできます
pnpm i && pnpm build
# 最後に依存関係を再インストールし、構築します
:::
構築には時間がかかるため、辛抱強くお待ちください...
::: gallery
:::
叁・シロを起動する！#
1、直接フロントエンドを起動し、シロのルートディレクトリで直接pnpm prod:pm2を実行し、nohup または他の方法でバックグラウンドで実行できます。
2、Screen を使用してバックグラウンドでの保持を実現します（推奨）。
apt install screen -y
# Debian/UbuntuにScreenをインストール
screen -R shiro
# shiroセッションを新規作成
cd /opt/mx-space/Shiro
npx next start -p 2323
# pnpm prod:pm2
# shiroiを起動します
起動が完了したら、Ctrl +A+Dを押すことで shiro セッションを終了し、シロをバックグラウンドで実行できます。
** 注意：** サーバーを再起動した後は、どちらの起動方法でもシロを再起動する必要があります。
Screen の使用方法チュートリアル：https://www.mintimate.cn/2021/09/02/howToUseScreen/
とても良いチュートリアルです。
肆・リバースプロキシと更新#
一・リバースプロキシ#
1Panel+OpenResty を例にします。
- 静的ウェブサイトを新規作成します。
- SSL 証明書を設定して HTTPS を有効にします。
add_header Strict-Transport-Security "max-age=31536000";の下または最後の}の上に新しい行を追加して CV リバースプロキシ設定を行います。
ダブルドメインのフロントエンドリバースプロキシの例
## リバースプロキシ開始
location ~* \.(gif|png|jpg|css|js|woff|woff2|svg|webp)$ {
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-Proto $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
expires 30d;
}
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-Proto $scheme;
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-Proto $scheme;
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 no-cache;
proxy_intercept_errors on;
}
## リバースプロキシ終了
シングルドメインのフロントエンドリバースプロキシの例
## リバースプロキシ開始、公式ドキュメントの内容をそのままコピーします
## WebSocketアドレス
location /socket.io {
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_buffering off;
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;
}
## APIアドレス
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 /proxy {
proxy_pass http://127.0.0.1:2333/proxy;
}
location /qaqdmin {
proxy_pass http://127.0.0.1:2333/proxy/qaqdmin;
}
## RSSアドレス
location ~* \/(feed|sitemap|atom.xml) {
proxy_pass http://127.0.0.1:2333/$1;
}
## リバースプロキシ終了
二・シロの更新#
# 作業ディレクトリに移動
cd /opt/mx-space/Shiro
# 更新
git pull
# git push
screen -R shiroi -X quit
# nrm use taobao (サーバーの位置/ネットワーク状況に応じてソースを変更するかどうかを選択)
# 依存関係をインストールし、構築します
pnpm i && pnpm build
# screenを使用してバックグラウンドで起動します
screen -R shiroi
npx next start -p 2323
上記の更新方法は試していません、試してみたところ、とても良かったです！Arthals大佬の文章を参考にしました盗んだ。
国内サーバーが git にアクセスできない場合、私は面倒な方法で更新するしかありません：ローカルで git を取得してサーバーにアップロードし、その後、上記の贰・シロの設定と構築の二から四のプロセスを再度実行します🤣（🥹
三・Markdown 拡張構文#
詳細については https://shiro.innei.in/#/markdown をお読みください。
伍・トラブルシューティング#
一・フォント取得失敗#
シロの構築時にフォントファイルを取得します。
サーバーが fonts.googleapis.com/fonts.gstatic.com に Ping できない場合、次のようなエラーが発生し、最終的に構築に失敗する可能性があります
おそらくサーバーが解決した IP があまり良くない.....
解決策：hosts ファイルを変更し、fonts.googleapis.com/fonts.gstatic.com に Ping 可能な IP を指定します。
itdog を使用してフォントドメインの IP を確認し、サーバーで Ping を試みて、Ping が通るものを変更してください。
二・OAuth2 関連の問題#
- コールバックエラー redirect_uri
第一の方法：シングルドメインに切り替える
以下の問題には新しい解決策があります。
もしあなたが私と同じように最初にダブルドメインを使用していた場合、OAuth2 を設定すると次のようなエラーが発生します。現在、シングルドメインに切り替えるしかありません。なぜなら、OAuth が接続する GitHub/Google は、同じドメイン内でしか機能しないからです（二次ドメインも同じ二次ドメインでなければなりません）。
切り替え方法：
- フロントエンドドメインを再設定し、上記に示したリバースプロキシの設定を行います。
- バックエンド設定 - ウェブサイト設定に移動し、
API,GW,バックエンドアドレスをフロントエンドの同じ二次 / トップレベルドメインに変更します。例えば、元の API アドレス：api.vlo.cc/api/v2をwww.vlo.cc/api/v2に変更します。
第二の方法：Core/Shiro のデプロイに関する 2 つの記事内の新しいダブルドメインリバースプロキシ設定をコピーします。
FAQ：
新しい設定ファイルにはどのような変更がありますか？
私は元のフロントエンドとバックエンドのリバースプロキシ設定の各 location に次の設定を追加しました（おそらくバックエンドに追加すれば大丈夫ですが、念のためフロントエンドとバックエンドの両方に追加しました）。
これを行った後もredirect_uriが機能しない場合は？
大抵はキャッシュの問題です。キャッシュをクリアするか、ブラウザのプライベートモードでテストして正常に動作するか確認してください。
location / {
...
proxy_set_header X-Forwarded-Proto $scheme;
...
}
- バックエンドがオーナーを認識しない
もしあなたのバックエンドコアバージョンが 7.0.3-7.0.6、または 7.0.6 以降のバージョンで OAuth を設定している場合、常に成功しない場合があります（原因は特定のバージョンにバグがある可能性があり、Core のアップグレードでは解決できず、バージョンを戻すことで解決できるかもしれません）。
これには含まれないが：バックエンドがオーナーを認識しない、フロントエンドとバックエンドのオーナーがログインできない、redirect_url エラーなど。
Core を7.0.2-alpha.0バージョンに戻して、OAuth を設定し、オーナーアカウントとして検証し、フロントエンドとバックエンドを OAuth でログインテストします（それでもredirect_urlの問題がある場合はキャッシュが原因かもしれませんので、新しい環境でテストしてみてください）。テストが問題なければ、直接latestバージョンにアップグレードします。
参考記事#
公式およびコミュニティの貢献者に感謝します！
Arthals + シロ：紙のように純粋な新しいブログ
公式ドキュメント
Yukina
この記事は Mix Space によって xLog に同期更新されました。
元のリンクは https://www.vlo.cc/posts/jc/shiro