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

克隆项目

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

拉取依赖并编译

安装依赖

Copy
cd Shiro
pnpm install

不要忘了配置 ENV

编辑 .env 文件，就像这样：

Copy
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

Copy
pnpm build

主题配置

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

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

名称：shiro

引用：theme

数据类型：JSON

数据（我实际使用的）：

Copy
{
"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 进程

Copy
pm2 start

不出意外的话，在 https:///2323 已经可以成功看到 Shiro 了

Docker 部署

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

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

克隆项目

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

配置 ENV

既然是 Docker 部署，那自然是在 docker-compose.yml 或 Dockerfile 修改了。

以 docker-compose.yml 示例：

Copy
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

Copy
docker-compose build

启动！

构建成功后将自动创建一个名为 "shiro" 的 docker 容器

Copy
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