banner
jiuyue

jiuyue

JiuYue
主页归档

Mix-Space部署最新前端Shiro

#Mix Space#Shiro#Shiroi#mx space432
AI 生成的摘要
Shiro是一个极简主义的个人网站，具有清新的设计风格。它是Mix-Space前端主题的一个版本，分为开源和闭源两种，功能上有所不同。Shiro的部署可以通过Vercel进行，也可以在云服务器或本地进行，要求使用Linux系统，推荐Debian 11/12，服务器内存需24Gib。安装Node.js、pnpm、pm2和sharp是必要的步骤，并提供了详细的安装和配置指南。Shiro的配置包括主题设置、颜色配置、网站图标等，用户可以根据自己的需求进行自定义。

Shiro，一个极简主义的个人网站，如纸的纯净和雪的清新。

innei 大佬与
Shiro ： Shiro - 全新风格，再次起航

Shiro/Shiroi 为 Mix-Space 前端主题，其中，Shiroi 为闭源版本，通过赞助 Innei Innei获取。
开源闭源在部分功能上有所区别，可在官方文档看到部分闭源版本功能。

Shiro 及相关项目#

mx-space/core

😎 The next generation of RESTful API service and more feature for Mix Space, powered by @nestjs.

TypeScript402113
Innei/Shiro

📜 A minimalist personal website embodying the purity of paper and freshness of snow.

TypeScript3703806

image

Vercel 部署#

Shiro Vercel 部署请参阅官方文档

https://mx-space.js.org/themes/shiro

云服务器 / 本地部署#

系统 / 环境要求#

  • Linux， 内核版本 > 4.19 (推荐 Debian11 / 12) 教程以 Debian11 / 12 为例
  • 服务器内存需 2~4Gib，构建完成运行只需 512Mib 甚至更低 （内存小 or 可用内存不足的可在本地构建或者配置 2~4G 的 Swap）：博主服务器为 2H-2G，故配置了 4G Swap。
  • 使用 NVM 安装 Node.js v20.12.2，以及 PNPM / PM2 /sharp
  • Screen 实现后台保活（可选）
  • 采用 1Panel+OpenResty（可选）

必要的准备#

  • 域名：本篇所采用～～双二级域名模式，即前端 www.vlo.cc，后端api.vlo.cc~~

  • 前后端域名所需 SSL 证书：需要全站 HTTPS （前端访问 API 问题，可以尝试后端配置文件 ALLOWED_ORIGINS 加上 localhost,127.0.0.1

壹・NodeJS 等相关环境#

刷新系统包缓存与安装常用 / 必备软件包

apt update && apt install git curl vim wget git-lfs -y```

1、安装NVM

```bash
    curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash

2、运行 source ~/.profile 命令将环境变量重新加载到当前会话中。

 source ~/.profile

3、列出 Node.JS 的可用版本。

nvm ls-remote

4、确定版本后，运行 nvm install version 命令下载并安装它。例如，安装 Node.JS 20.12.2 ，
强烈推荐 V20.12.2 版本

# 安装
nvm install 20.12.2
# 检查版本
node -v

5、安装 pnpm pm2

npm install -g pnpm pm2

6、安装 sharp

  npm i -g sharp
  pnpm add sharp
  # 配置sharp环境变量
  # export NEXT_SHARP_PATH=/root/node_modules/sharp

贰・Shiro 的配置与构建#

一・Core 后端云函数配置#

具体可参考官方文档：
** 后端设置主题配置 **

进入 Mix Space 后台，进入「配置与云函数」页面，点击右上角的新增按钮，在编辑页面中，填入以下设置：

  • 名称：shiro
  • 引用：theme
  • 数据类型：JSON
  • 数据：右侧复制以下示例，更改为自己的信息
{
 "footer": {
   "otherInfo": {
     "date": "2022-{{now}}",
     "icp": {
       "text": "豫 ICP 备 2022029096号-2",
       "link": "https://beian.miit.gov.cn"
     }
   },
   "linkSections": [
     {
       "name": "😊关于",
       "links": [
         {
           "name": "关于我",
           "href": "/about"
         },
         {
           "name": "关于此项目",
           "href": "https://github.com/innei/Shiro",
           "external": true
         }
       ]
     },
     {
       "name": "🧐更多",
       "links": [
         {
           "name": "时间线",
           "href": "/timeline"
         },
         {
           "name": "友链",
           "href": "/friends"
         },
         {
           "name": "监控",
           "href": "https://halo.vlo.cc",
           "external": true
         }
       ]
     },
     {
       "name": "🤗联系",
       "links": [
         {
           "name": "写留言",
           "href": "/message"
         },
         {
           "name": "发邮件",
           "href": "mailto:i@vlo.cc",
           "external": true
         },
         {
           "name": "GitHub",
           "href": "https://github.com/jiuyue52",
           "external": true
         }
       ]
     }
   ]
 },
 "config": {
   "color": {
     "light": [
       "#33A6B8",
       "#FF6666",
       "#26A69A",
       "#fb7287",
       "#69a6cc",
       "#F11A7B",
       "#78C1F3",
       "#FF6666",
       "#7ACDF6"
     ],
     "dark": [
       "#F596AA",
       "#A0A7D4",
       "#ff7b7b",
       "#99D8CF",
       "#838BC6",
       "#FFE5AD",
       "#9BE8D8",
       "#A1CCD1",
       "#EAAEBA"
     ]
   },
   "custom": {
     "css": [],
     "styles": [],
     "js": [],
     "scripts": []
   },
   "site": {
     "favicon": "https://halo.vlo.cc/upload/pic/J99Y.svg",
     "faviconDark": "https://halo.vlo.cc/upload/pic/J99Y.svg"
   },
   "hero": {
     "title": {
       "template": [
         {
           "type": "h1",
           "text": "Hi, I'm ",
           "class": "font-light text-4xl"
         },
         {
           "type": "h1",
           "text": "JiuYue",
           "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": "<Developer />",
           "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": "内心湛然，则无往而不乐。"
   },
   "module": {
     "activity": {
       "enable": true,
       "endpoint": "/fn/ps/update"
     },
     "donate": {
       "enable": true,
       "link": "https://afdian.net/@huasui",
       "qrcode": [
         "https://halo.vlo.cc/upload/pic/wxdashang.png",
         "https://halo.vlo.cc/upload/pic/wxdashang.png"
       ]
     },
     "bilibili": {
       "liveId": 23359061
     }
   }
 }
}

二・拉取 Shiro/Shiroi#

   cd /opt/mx-space
    # 个人习惯在/opt/mx-space目录下部署Mx-Space与前端Shiro/Kami
    # 所以此处./mx-space为mx后端/前端项目文件夹
   git clone https://github.com/Innei/Shiro.git
    # shiroi的仓库自己赞助获取即可

image

三・配置 .env#

复制 .env.example 为 .env 并编辑 .env 文件

  cd /opt/mx-space/Shiro
  mv .env.template .env
  vim .env

.env 示例

# 后端API地址
NEXT_PUBLIC_API_URL=https://api.example.com/api/v2
# 后端网关地址
NEXT_PUBLIC_GATEWAY_URL=https://api.example.com
# TMDB信息获取
TMDB_API_KEY=
# GitHub token，用来获取前端版本哈希
GH_TOKEN=

四・开始构建 Shiro/Shiroi 项目#

  cd /opt/mx-space/Shiro
  pnpm i && pnpm build

::: warning
若服务器所在区域无法访问 NPM 官方源，可能导致依赖安装失败而出现如下报错
image
解决：构建前手动修改项目 .npmrc 配置文件

cd /opt/mx-space/Shiro
vim .npmrc
  # 1 ↑修改registry为taobao源(https://registry.npmmirror.com)或其他国内镜像源
  # nrm use taobao
  # 2 ↑若安装有nrm (npm 的镜像源管理工具）也可使用nrm
pnpm i && pnpm build
  # 最后重新安装依赖、构建

image
:::
构建时间较慢长，需耐心等待...

::: gallery
pnpmi&&pnpmbuild.png
build done.png
:::

叁・Shiro 启动！#

1、直接前台启动，在 Shiro 根目录直接运行
pnpm prod:pm2，可使用 nohup 或其他使其后台运行

2、使用 Screen 实现后台保活 (推荐)

apt install screen -y
  # Debian/Ubuntu安装Screen
screen -R shiro
  # 新建shiro会话
cd /opt/mx-space/Shiro
npx next start -p 2323
# pnpm prod:pm2
  # 启动shiroi

启动完成后 按 Ctrl +A+D即可退出并挂起 shiro 对话，完成 Shiro 后台运行。
image
** 注意：** 两种启动方式重启 servers 后都需重新启动下 Shiro

Screen 食用教程：https://www.mintimate.cn/2021/09/02/howToUseScreen/
很不错的教程

肆・反代与更新#

一・反向代理#

以 1Panel+OpenResty 为例

  1. 新建静态网站
  2. 配置 SSL 证书开启 HTTPS
  3. 在add_header Strict-Transport-Security "max-age=31536000"; 下方或者最后一个}的上方另起一行 CV 反代配置
双域名前端反代示例 
## 反向代理开始 
    location ~* \.(gif|png|jpg|css|js|woff|woff2|svg|webp)$ {
      proxy_pass http://127.0.0.1:2323;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header REMOTE-HOST $remote_addr;
      expires 30d;
    }
    location ~* \/(feed|sitemap|atom.xml) {
      proxy_pass http://127.0.0.1:2333/$1;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header REMOTE-HOST $remote_addr;
      add_header X-Cache $upstream_cache_status;
      add_header Cache-Control max-age=60;
    }
    location / {
      proxy_pass http://127.0.0.1:2323;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header REMOTE-HOST $remote_addr;
      add_header X-Cache $upstream_cache_status;
      add_header Cache-Control no-cache;
      proxy_intercept_errors on;
    }
    ## 反向代理结束
单域名前端反代示例 
## 反向代理开始，直接复制官方文档的
    ## WebSocket 地址
    location /socket.io {
        proxy_set_header Upgrade $http_upgrade; 
        proxy_set_header Connection "Upgrade"; 
        proxy_buffering off; 
        proxy_set_header Host $host; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Proto $scheme; 
        proxy_pass http://127.0.0.1:2333/socket.io; 
    }
    ## API 地址
    location /api/v2 {
        proxy_pass http://127.0.0.1:2333/api/v2; 
    }
    ## 简读 render 地址
    location /render {
        proxy_pass http://127.0.0.1:2333/render; 
    }
    ## 前端地址
    location / {
        proxy_pass http://127.0.0.1:2323; 
    }
    ## 后台地址
    location /proxy {
        proxy_pass http://127.0.0.1:2333/proxy;
    }
    location /qaqdmin {
        proxy_pass http://127.0.0.1:2333/proxy/qaqdmin;
    }
    ## RSS 地址
    location ~* \/(feed|sitemap|atom.xml) {
        proxy_pass http://127.0.0.1:2333/$1; 
    }
    ## 反向代理结束

二・Shiro 更新#

# 进入工作目录
cd /opt/mx-space/Shiro
# 更新
git pull
# git push
screen -R shiroi -X quit
# nrm use taobao (根据服务器 位置 / 网络 情况选择是否换源)
# 安装依赖、构建
pnpm i && pnpm build
# 使用screen实现后台启动
screen -R shiroi
npx next start -p 2323

上面更新方法没试过，试过了，很棒！是参考Arthals大佬的文章 偷来的

国内服务器拉不到 git 的话我就只能用笨方法更新：本地拉取 git 在上传服务器，然后从上文的 贰・Shiro 的配置与构建中二到四 流程再走一遍🤣（🥹

三・Markdown 扩展语法#

请阅读 https://shiro.innei.in/#/markdown

伍・踩坑#

一・字体拉取失败#

Shiro 构建时会拉取字体文件，
若服务器无法 Ping 通 fonts.googleapis.com/fonts.gstatic.com，
可能会出现如下报错，最终构建失败

大概是服务器解析到的 IP 不太行.....

解决：更改 hosts 文件，为 fonts.googleapis.com/fonts.gstatic.com 指定一个服务器可以 Ping 通的 IP

可以用 itdog 查下字体域名的 ip，然后服务器尝试 ping 一下，哪个 ping 的通就改哪个
image

二・OAuth2 相关问题#

  1. 回调报错 redirect_uri
第一种方法：切换单域名

以下问题已有新的解决方法

如果你是跟我一样最开始使用了双域名，那么配置 OAuth2 时会出现如下报错，目前只能切换为单域名了，因为 OAuth 所接入的 Github/Google, 都只能同一域名下（二级也只能是同一个二级）
切换方法：

  • 前端域名重新配置反代，上面给出了示例配置
  • 进入后台设置 - 网站设置：把API,GW,后台地址改为前端同 二级 / 顶级域名，如原 API 地址：api.vlo.cc/api/v2，改为：www.vlo.cc/api/v2
    image

第二种方法：复制 Core/Shiro 部署两篇文章内新的双域名反代配置

FAQ：

新的配置文件有什么更改呢？

我在原前后端反代配置示例文件的每个 location 中都添加了如下配置（貌似后端添加就行，我为了保险前后端全部添加了）。

做完这些仍然redirect_uri怎么办？

大概率是缓存问题，清除缓存 OR 浏览器开隐私模式测试是否正常。

location / {
    ...
    proxy_set_header X-Forwarded-Proto $scheme;
    ...
}
  1. 后端不认主

如果你的后端 core 版本在 7.0.3-7.0.6, 或 7.0.6 之后的某版本开始配置 OAuth 的， 一直无法成功（猜测原因可能是某个版本有 BUG,Core 升级无法解决，回退版本可解）

包括不限于：后端不认主人，前后端主人无法登录，redirect_url 错误等，

可以尝试 Core 退回7.0.2-alpha.0版本：配置 oauth 并验证设为主人账户，前后端使用 OAuth 进行登录测试（仍然有redirect_url的 问题可能有缓存作怪，可以尝试新环境测试），测试没问题后直接升级latest版本

参考文章#

感谢官方以及社区大佬们的贡献！

Arthals + Shiro：如纸一般纯净的新博客


官方文档

Yukina

此文由 Mix Space 同步更新至 xLog
原始链接为 https://www.vlo.cc/posts/jc/shiro

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