banner
jiuyue

jiuyue

JiuYue
首頁封存

Mix-Space部署最新前端Shiro

#Mix Space#Shiro#Shiroi#mx space432
AI 翻譯
這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文
AI 生成的摘要
Shiro 是一個極簡主義的個人網站，具有紙張般的純淨和雪的清新感。它是 Mix-Space 的前端主題，包含開源和閉源版本，功能上有所不同。使用者可以參考官方文檔進行 Vercel 部署或在雲伺服器及本地進行安裝。 在安裝過程中，需使用 Linux 系統（推薦 Debian 11/12），並安裝 Node.js、pnpm、pm2 和 sharp 等工具。配置過程中需要設置域名和 SSL 證書以支持 HTTPS。 Shiro 的配置包括後端雲函數設置和主題配置，使用 JSON 格式進行設置，並可自定義網站的顏色、樣式和內容。

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

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。