::: warning
本文中所出現的所有網域、項目與接口在本文發出後均停止服務，僅供演示使用
:::
最終結果呈現#
前期準備#
請在GitHub、Clerk、Vercel註冊自己的帳號，此處不再演示。
配置網域#
搭建個人博客的第一步，便是擁有自己的網域，如果你還沒有，可以前往Dynadot購買，在此可以使用我的優惠碼8E9O6bh6c9B8y6l以獲得五美元的優惠。
此處以在 Dynadot 購買nskr.blog為例。
介於 Cloudflare 提供了諸多優化站點訪問，保障站點安全的服務，我們在此選擇將站點託管至Cloudflare。
首先需要在 Cloudflare 中加入自己已購買的網域，並令其掃描現有的 DNS 解析。
隨後複製 Cloudflare 提供的 DNS 伺服器，回到 Dynadot 控制台，在 DNS 設定處選擇網域名稱伺服器，並填入已複製的內容。
配置伺服器#
在完成有關網域的相關設定後，我們便需要進行伺服器的配置。我在此選擇的是Google Cloud，在綁定貸記卡後可以獲得 300 美元的贈金，有效期三個月。
根據自己的需求配置和購買，我按照個人習慣選擇了 Ubuntu 的系統鏡像。注意在此處需開啟「允許 HTTP 流量」、「允許 HTTPS 流量」兩個選項。
在伺服器構建完畢後，我們可以獲得這一伺服器的公網 IP。我們需要複製這一 IP 並在 Cloudflare 的控制台中配置網域解析，將api.nskr.blog指向自己的伺服器。（實際上，在此處無需參照影片中的操作，同時解析 @.nskr.blog，因為後面需要將其解析到 Vercel 的伺服器上）
在完成前面的操作後，我們通過 SSH 連結自己的伺服器。
為了方便管理，我們可以安裝 1Panel 面板或寶塔面板，二者選其一即可：
#安裝1Panel
curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && bash quick_start.sh
#安裝寶塔面板
wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh ed8484bec
這安裝這兩個面板後都會自動安裝 Docker 與 Docker-compose，可以通過下面的命令分別檢查：
docker -v
docker compose version
如果伺服器沒有正確輸出已安裝版本號，可以執行以下命令即可：
curl -fsSL https://get.docker.com | bash -s docker
在完成上面的步驟後，請前往伺服器控制台開放相關端口，面板所需端口可以在 SSH 介面查詢，博客所需端口為2323與2333：
部署博客後端#
首先，需要拉取配置文件：
# 創建目錄
cd && mkdir -p mx-space/core && cd $_
# 拉取 docker-compose.yml 文件
wget https://fastly.jsdelivr.net/gh/mx-space/core@master/docker-compose.yml
並在mx-space/core目錄下新建.env文件並填入以下內容（請根據自身需要進行修改）：
有關
vim的使用可以自行學習，在此僅提及與部署相關的操作：使用
vim .env創建並打開.env文件，隨後輸入i切換至 insert 模式，在輸入完變量後按ESC鍵進入命令模式，輸入:wq保存退出。
JWT_SECRET=nishikoriyuinishikoriyui
ALLOWED_ORIGINS= nskr.blog
ENCRYPT_ENABLE=false
ENCRYPT_KEY=
- JWT_SECRET 長度不小於 16 個字符，不大於 32 個字符，用於加密 JWT。
- ALLOWED_ORIGINS 為被允許的域名，如果存在多個需用英文逗號分割。
- ENCRYPT_ENABLE 是否開啟加密，填寫
true或false。 - ENCRYPT_KEY 為加密密鑰，如不開啟加密，則無需填寫。密鑰長度需為 64 位且僅包含小寫字母與數字，可通過
openssl rand -hex 32命令生成。
完成上面的操作後，可通過下面的命令拉取鏡像並運行後端核心容器：
docker compose up -d
完成後端部署後，我們需要配置反向代理。使用單域名的方案可以參照官方文檔 ，我在此選擇借助1Panel進行雙域名配置，寶塔面板配置方法與之類似，在此不再演示。
首先需要在 1Panel 安裝OpenResty程式，用於網站部署。
隨後，在「網站」選擇卡中搭建靜態網站api.nskr.blog
完成網站搭建後，需要申請 SSL 證書，在此不再演示。
搭建完成後，選擇「配置」，並將下面的內容粘貼至網站配置文件：
## 反向代理开始
## WebSocket
location /socket.io {
proxy_pass http://127.0.0.1:2333/socket.io;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_buffering off;
proxy_http_version 1.1;
add_header Cache-Control no-cache;
}
## Others
location / {
proxy_pass http://127.0.0.1:2333;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
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;
}
## 反向代理结束
這樣配置後，
API 地址為 https://api.nskr.blog/api/v2
GateWay 為 https://api.nskr.blog/
部署博客前端#
在此我們使用 Vercel 的 Serverless 服務進行前端的部署，這可以有效減輕我們伺服器的壓力，從而減少在伺服器上的開支。
我們首先需要在 GitHub 上克隆 Shiro 的官方倉庫。
隨後，我們需要打開Clerk，並創建新應用，獲得公鑰和私鑰。
隨後我們需要訪問博客的後端面板，在配置雲函數。
在編輯面板中填入：
- 名稱：
shiro - 引用：
theme - 數據類型：
JSON
並複製該連結的內容並填入（此處直接引用本站點的配置文件，請根據自身需要進行修改）：
在完成上述步驟之後，前往Vercel，創建新項目，在配置頁面中，点击 Environment Variables，填入以下內容：
NEXT_PUBLIC_API_URL=https://api.nskr.blog/api/v2
NEXT_PUBLIC_GATEWAY_URL=https://api.nskr.blog
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_•••••••••••••••••••••••••••••••••••••••••••
CLERK_SECRET_KEY=sk_test_•••••••••••••••••••••••••••••••••••••••••••
- NEXT_PUBLIC_API_URL 為 API 地址
- NEXT_PUBLIC_GATEWAY_URL 為 Gateway 地址
- NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY 是 Clerk 獲得的公鑰
- CLERK_SECRET_KEY=sk_test_・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・是在 Clerk 獲得的私鑰
隨後點擊Deploy，等待部署完成
在部署完成之後，將自己的網域名稱與之綁定，並將博客連結在 Cloudflare 上解析到 Vercel 的服務器。
就此，基本的部署便已經完成。
參考資料#
Mix Space 官方文檔 https://mx-space.js.org/
此文由 Mix Space 同步更新至 xLog
原始链接为 https://ursprung.io/posts/tech/%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2%20-%20Mix%20Space%20%E5%8F%8AShiro%E4%B8%BB%E9%A1%8C%E9%83%A8%E7%BD%B2%E6%95%99%E7%A8%8B