Shiro个人站部署

22 小时前(已编辑)
9

Shiro个人站部署

前言

去年在X上看到了关于Shiro的推荐分享，就被它的简约风格给深深吸引了，就像官方仓库描述的A minimalist personal website embodying the purity of paper and freshness of snow.一种很纯粹的极简美。本人也在最近成功部署了该站点，由于官网的部署文档过于简略和开源版作者已不再积极维护，部署过程中也遇到了一些问题，借此机会，分享一下我的部署经验。

部署环境

  • Linux 发行版： debian-12-x86_64 (官网推荐Linux 内核版本 >= 4.19)
  • cpu 内存配置：2c2g (官网推荐Memory >= 1G)
  • 前端主题：Shiro
  • 后端服务：mx-space
  • 反向代理：nginx
  • docker compose 部署

部署步骤

  1. 域名 DNS 配置，我这边用的是 Cloudflare 的 DNS 服务，将要使用的域名映射到自己的服务器上。(ps: 如果使用的是国内的云服务商，需要进行域名备案，否则DNS解析会失败)
    Cloudflare DNS配置
    Cloudflare DNS配置

  2. 部署后端服务和配置nginx，这里需要注意的是，在mx-apce服务部署和配置云函数完毕前切记不要启动前端主题服务进行访问！

    mix-space 的docker-compose.yml的配置如下, JWT_SECRET和ALLOWED_ORIGINS请根据自己的需求进行修改：

    services:
 app:
   container_name: mx-server
   image: innei/mx-server:latest
   environment:
     - TZ=Asia/Shanghai
     - NODE_ENV=production
     - DB_HOST=mongo
     - REDIS_HOST=redis
     - JWT_SECRET=*** --jwt密钥 长度不小于16个字符,不大于32个字符
     - ALLOWED_ORIGINS=localhost:*,127.0.0.1:*,*.fufufun.com -- 被允许的域名 如果允许多个域名访问, 用英文逗号隔开
     - ENCRYPT_ENABLE=false
   volumes:
     - ./data/mx-space:/root/.mx-space
   ports:
     - '2333:2333'
   depends_on:
     - mongo
     - redis
   networks:
     - mx-space
   restart: unless-stopped
   healthcheck:
     test: [CMD, curl, -f, 'http://127.0.0.1:2333/api/v2/ping']
     interval: 1m30s
     timeout: 30s
     retries: 5
     start_period: 30s

 mongo:
   container_name: mongo
   image: mongo
   volumes:
     - ./data/db:/data/db
   networks:
     - mx-space
   restart: unless-stopped

 redis:
   image: redis:alpine
   container_name: redis
   volumes:
     - ./data/redis:/data
   healthcheck:
     test: [CMD-SHELL, 'redis-cli ping | grep PONG']
     start_period: 20s
     interval: 30s
     retries: 5
     timeout: 3s
   networks:
     - mx-space
   restart: unless-stopped

networks:
 mx-space:
   driver: bridge

    nginx 配置如下，关于 https 证书我是使用Let's Encrypt的免费证书，请根据自己的实际证书进行修改：

    server {
 listen 80;
 listen 443 ssl http2 ; 
 ## 绑定域名 
 server_name www.fufufun.com; 
 index index.html; 
 proxy_set_header Host $host; 
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
 proxy_set_header X-Forwarded-Host $server_name; 
 proxy_set_header Upgrade $http_upgrade; 
 proxy_set_header Connection "upgrade"; 
 error_log /www/wwwlogs/www.fufufun.com.log;
 access_log /www/wwwlogs/www.fufufun.com.error.log;
 location /socket.io {
     proxy_set_header Upgrade $http_upgrade; 
     proxy_set_header Connection "Upgrade"; 
     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; 
 }
 location /api/v2 {
     proxy_pass http://127.0.0.1:2333/api/v2; 
 }
 location /render {
     proxy_pass http://127.0.0.1:2333/render; 
 }
 location / {
     proxy_pass http://127.0.0.1:2323; 
 }
 location /qaqdmin {
     proxy_pass http://127.0.0.1:2333/proxy/qaqdmin;
 }
 location /proxy {
     proxy_pass http://127.0.0.1:2333/proxy;
 }

 ssl_certificate /www/server/panel/vhost/cert/www.fufufun.com/fullchain.pem;
 ssl_certificate_key /www/server/panel/vhost/cert/www.fufufun.com/privkey.pem;
 ssl_protocols TLSv1.3 TLSv1.2 TLSv1.1 TLSv1; 
 ssl_ciphers 'ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!3DES:!MD5:!PSK'; 
 ssl_prefer_server_ciphers on; 
 ssl_session_cache shared:SSL:10m; 
 ssl_session_timeout 10m; 
 add_header Strict-Transport-Security "max-age=31536000";
 error_page 497 https://$host$request_uri; 
 limit_conn perserver 300; 
 limit_conn perip 25; 
 limit_rate 512k; 
}

  3. Shiro 前端主题部署，这边需要注意的是 一定要在后端部署完，且配置好云函数和nginx再进行前端部署！相关docker-compose.yml和.env文件如下：

    services:
 shiro:
   container_name: shiro
   image: innei/shiro:latest
   volumes:
     - ./.env:/app/.env
   restart: always
   environment:
     - NEXT_SHARP_PATH=/usr/local/lib/node_modules/sharp
   ports:
     - 2323:2323
    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://www.fufufun.com/api/v2
NEXT_PUBLIC_GATEWAY_URL=https://www.fufufun.com

遇到的问题

前端页面报【禁止访问或者 API 服务出现问题】的错误

在部署完 mx-space 和配置反向代理且在后台管理配置好云函数前就访问了shiro前端页面，会出现这个常在 issue 提到的错误。

通过阅读源码发现是使用了 react 的 cache 这个api导致的，初次访问时会调用后端接口获取用户配置的主题内容，然后把结果缓存下来，所以后续的请求都会命中 react 的缓存，导致获取值一直为空，即便后续在后台配置了对应配置也无会提示该错误。过早访问前端导致 React 缓存了错误的空配置。

解决方式： 通过删除前端容器，且删除docker volume挂载的data数据，按步骤重新部署后端服务配置完主题后重新启动前端容器即可访问。（ps ： 后续更新主题配置，由于我这边的Cloudflare会预设缓存，所以主题生效需要一定的时间，或者前往 Cloudflare 删除对应的 DNS 缓存，后者不一定有效果 Orz...）

前端轻管理页面一直处于加载中无法访问

这边可能是最新的官方镜像存在 bug 导致部分功能无法使用，目前遇到问题的镜像Index digest 为sha256:d8a4b2bf8180e42a8a00ef9d6b7d8ea14444ed9e9c1709be3d595f89fceaa616

解决方式

  1. 自行构建前端 docker 镜像，构建方式如下

    git clone https://github.com/Innei/Shiro
cd Shiro
docker build -t shiro-my .

    docker-compose.yml文件如下：

    services:
 shiro:
   container_name: shiro
   image: shiro-o
   volumes:
     - ./.env:/app/.env
   restart: always
   environment:
     - NEXT_SHARP_PATH=/usr/local/lib/node_modules/sharp
   ports:
     - 2323:2323

  2. 直接使用第三方的前端镜像进行构建，相关dokcer-compose.yml文件如下:

    services:
 shiro:
   container_name: shiro-my
   image: huangyan321/shiro --第三方镜像
   volumes:
     - ./.env:/app/.env
   restart: always
   environment:
     - NEXT_SHARP_PATH=/usr/local/lib/node_modules/sharp
   ports:
     - 2323:2323

写在最后

如果你也一样被 Shiro 简约风格吸引，却在部署时因官方文档不详或项目维护问题而受挫，希望该文章对你能有所帮助。

拓展阅读

  1. MX Space 官方文档
  2. Shiro docker 部署文档
  3. React 官网

使用社交账号登录

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