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