InSnh-Gd

InSnh-Gd 的小空间

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_KEYpk_test_aaaaaaaaaaaaaaaaaxxxxxx

裸机部署#

这里我就粗略地记录一下,因为我之前就已经部署好了 Mix Space ,而且最终我还是选择用 Docker 部署 Shiro 防止内存溢出让整个主机都陷入瘫痪。

我的服务器环境: Arch Linux

image.png

理论上 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_URLNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY 替换成自己实际是使用的。

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY 从 Clerk 获取。


Building

pnpm build

主题配置#

完成之后,还需要在 Mix Space 设置主题配置

在 Mix Space 进入 ” 配置与云函数 “ 页面添加配置。

image.png

名称: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 了

image7e5b28bdaaec1f9a.png

Docker 部署#

Docker 部署更加方便,不过构建 image 时还是要构建 Shiro 的。

::: info
这里我使用 docker-compose 构建 Docker image
:::

克隆项目#

git clone https://github.com/Innei/Shiro

配置 ENV#

既然是 Docker 部署,那自然是在 docker-compose.ymlDockerfile 修改了。

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_URLNEXT_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


加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。