前言#
始める前に、なぜ Kami から Shiro に移行することにしたのかをお話しします。--> 無駄話をスキップする
まず、kami は長い間メンテナンスされておらず、その後 Mix Space の一部の更新が Kami の機能を壊しました。もし私が「kami の固定ユーザー」であり続けるなら、古い Mix Space バージョンを使い続けなければなりません。
-
なぜ Kami のメンテナンスが終了するのを待たずに今 Shiro を使うことにしたのか？
一つは、初期の Shiro にメモリリークのバグがあったため（正確には next.js に）、ローカルデプロイではメモリがいっぱいになってクラッシュすることが多かったからです。Vercel にデプロイするよりも、自分のサーバーに個人ブログをデプロイする方が好みです。
二つ目は、Kami の「さわやかさ」が好きだったからです。Shiro も素晴らしいですが、Kami に比べて多くの面で大きな進歩がありますが、デザインの一部があまり好きではありません（逃）。 -
なぜ自分で Kami をメンテナンスしないのか？
その能力があれば、自分でフロントエンドを開発しているでしょう -_-もしかしたら、1 年、2 年、何年後かに、十分な能力を持ったら Kami に戻るか、あるいは自分のブログのフロントエンドを開発しているかもしれません。
簡単に話したので、本文に入るべきです。
正文#
Shiro の開発者（Innei）が提案したように、Shiro は Vercel でデプロイするのが最適です。ローカルデプロイでは自力でやるしかありません。今日（2024 年 1 月 18 日）時点で、ローカルデプロイの Shiro が他の問題を引き起こさないかは不明です。
事前準備#
ローカルデプロイですが、ログイン用に Clerk を設定する必要があります。
Clerk の設定については Shiro のドキュメントを参照するのが良いです：https://mx-space.js.org/themes/shiro#%E6%89%93%E5%BC%80-clerk-%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE
以下では、NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY を pk_test_aaaaaaaaaaaaaaaaaxxxxxx と仮定します。
裸機デプロイ#
ここでは簡単に記録します。以前に Mix Space をデプロイしており、最終的にはメモリリークを防ぐために Docker で Shiro をデプロイすることにしました。
私のサーバー環境：Arch Linux
理論的には、Linux カーネルバージョン >= 4.19 のサーバーで Mix Space と Shiro をデプロイできます。
必要な依存関係：Node.js, MongoDB, Redis, pnpm, pm2
プロジェクトのクローン#
git clone https://github.com/Innei/Shiro
依存関係の取得とコンパイル#
依存関係をインストールします。
cd Shiro
pnpm install
ENV の設定を忘れないでください。
.env ファイルを編集します。以下のように：
NEXT_PUBLIC_API_URL=http://127.0.0.1:2333/api/v2
NEXT_PUBLIC_GATEWAY_URL=http://127.0.0.1:2333/
NEXT_PUBLIC_API_URL=https://blog.insnhgd.com/api/v2
NEXT_PUBLIC_GATEWAY_URL=https://blog.insnhgd.com
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_aaaaaaaaaaaaaaaaaxxxxxx
## Clerk
CLERK_SECRET_KEY=sk_test_***************
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
OPENAI_API_KEY=
TMDB_API_KEY=
NEXT_PUBLIC_API_URL、NEXT_PUBLIC_GATEWAY_URL、NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY、CLERK_SECRET_KEY を実際に使用しているものに置き換えます。
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY、CLERK_SECRET_KEY は Clerk から取得します。
ビルド
pnpm build
テーマ設定#
完了したら、Mix Space でテーマ設定を行う必要があります。
Mix Space に入り、「設定とクラウド関数」ページで設定を追加します。
名前：shiro
引用：theme
データタイプ：JSON
データ（私が実際に使用しているもの）：
{
"footer": {
"otherInfo": {
"date": "2023-{{now}}"
},
"linkSections": [
{
"name": "について",
"links": [
{
"name": "このサイトについて",
"href": "/about-site"
},
{
"name": "私について",
"href": "/about-me"
},
{
"name": "このプロジェクトについて",
"href": "https://github.com/innei/Shiro",
"external": true
}
]
},
{
"name": "もっと",
"links": [
{
"name": "タイムライン",
"href": "/timeline"
},
{
"name": "友達リンク",
"href": "/friends"
}
]
},
{
"name": "連絡",
"links": [
{
"name": "メッセージを書く",
"href": "/message"
},
{
"name": "メールを送る",
"href": "mailto:insnh-gd@qq.com",
"external": true
},
{
"name": "GitHub",
"href": "https://github.com/insnh-gd",
"external": true
}
]
}
]
},
"config": {
"site": {
"favicon": "https://pic.insnhgd.com/images/2023/06/28/favicon.svg"
},
"custom": {
"scripts": null,
"styles": null
},
"hero": {
"title": {
"template": [
{
"type": "h1",
"text": "こんにちは、私は ",
"class": "font-light text-4xl"
},
{
"type": "h1",
"text": "嘤特尔",
"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": "<Dev & Ops/>",
"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": "Web 開発を学んでいる人"
},
"module": {
"bilibili": {
"liveId": 689348740
},
"activity": {
"enable": true,
"endpoint": "/fn/ps/update"
}
}
}
}
起動！#
pm2 ツールを使って Shiro プロセスを実行および管理します。
pm2 start
問題がなければ、https:///2323 で Shiro を確認できるはずです。
Docker デプロイ#
Docker デプロイはさらに便利ですが、イメージを構築する際には Shiro を構築する必要があります。
::: info
ここでは docker-compose を使用して Docker イメージを構築します。
:::
プロジェクトのクローン#
git clone https://github.com/Innei/Shiro
ENV の設定#
Docker デプロイなので、docker-compose.yml または Dockerfile を変更します。
docker-compose.yml の例：
version: "3"
services:
shiro:
container_name: shiro
build:
context: .
args:
- BASE_URL=https://blog.insnhgd.com
- NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_aaaaaaaaaaaaaaaaaxxxxxx
- CLERK_SECRET_KEY=sk_test_***************
restart: always
ports:
- 2323:2323
BASE_URL、NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY、CLERK_SECRET_KEY を実際に使用しているものに置き換えます。
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY、CLERK_SECRET_KEY は Clerk から取得します。
イメージの構築#
docker-compose build
起動！#
構築が成功すると、「shiro」という名前の Docker コンテナが自動的に作成されます。
docker-compose up -d
問題がなければ、https:///2323 で Shiro を確認でき、"shiro" コンテナは自動的に起動します（Docker サービスを enable している場合）。
これでこの程度の内容を書いておきます。フロントエンドのリバースプロキシなどの設定については、Mix Space のドキュメントを参照してください：https://mx-space.js.org/docs/extra で大丈夫です。お読みいただきありがとうございます。
この記事は Mix Space によって xLog に同期更新されました。元のリンクは https://blog.insnhgd.com/posts/build/4