Shiro 本地部署笔记

1 个月前(已编辑)
/ , ,
57
3
AI 生成的摘要

前言

开始之前,我先聊聊为什么要放弃 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

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

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

image7e5b28bdaaec1f9a.png

Docker 部署

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

这里我使用 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 就可以了,感谢阅读。

  • Loading...
  • Loading...
  • Loading...
  • Loading...