Shiro 本地部署筆記

前言#

開始之前，我先聊聊為什麼要放棄 Kami 轉向 Shiro 吧。--> 一鍵跳過廢話

首先，kami 已經不再維護許久，之後 Mix Space 的部分更新破壞了 Kami 的功能，如果我要繼續堅持當 “kami 丁子戶 “ 的話，我就必須保持使用過時的 Mix Space 版本。

關於我為什麼要等現在而不是 Kami 停止維護就專用 Shiro 呢？

一是因為早期 Shiro 有內存溢出 bug （準確說是 next.js 有），本地部署會經常吃滿內存崩潰，比起部署在 Vercel 我更願意在我自己的伺服器部署自己的個人博客。
二是我更喜歡 Kami 的 “小清新”，雖然 Shiro 也很不錯，很多方面相比 Kami 都有很大的進步，但我還是不太喜歡部分地方的設計（逃）。
關於我為什麼不自己維護 Kami

~~我要有這能力我就自己開發自己的前端了 -_-~~，或許一年，兩年，很多年以後，我有了足夠的能力或許會再換回 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 獲取。

Building

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": "Hi, I'm ",
            "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 部署更加方便，不過構建 image 時還是要構建 Shiro 的。

::: info
這裡我使用 docker-compose 構建 Docker image
:::

克隆項目#

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 獲取。

構建 image#

docker-compose build

啟動！#

構建成功後將自動創建一個名為 "shiro" 的 docker 容器

docker-compose up -d

不出意外的話，在 https:///2323 已經可以成功看到 Shiro 了，並且 "shiro" 容器將開機自啟（如果你 enable了 docker 服務）。

就先寫這麼點東西吧，關於前端反代之類的配置看 Mix Space 的文檔：https://mx-space.js.org/docs/extra 就可以了，感謝閱讀。

此文由 Mix Space 同步更新至 xLog 原始鏈接為 https://blog.insnhgd.com/posts/build/4