从零开始部署Mx-Space + Shiro

发表于 更新于 分类于 阅读次数： 本文字数： 1.4k 阅读时长 ≈ 5 分钟

Shiro

写在前面

最近把自己的Hexo+Next博客迁移到了Mx-Space，在这里记录一下迁移的完整过程，以下是开始前的必要准备。

  • 一台服务器，这里我使用的是Azure的虚拟机，配置为1核1G。

  • 一个域名，使用的是腾讯云的域名活动价2.9年/元。

我的部署方式为后端docker部署，前端使用vercel自动化部署，使用Cloudflare进行域名解析。 如果VPS内存不足2G，建议设置不少于4G的swap分区，否则服务器可能会卡死，这里我参考的是这篇文章。

后端Mx-Space

1. 安装docker

由于我的VPS服务在国外，ssh到服务器上后直接使用个官方脚本安装：

1
curl -fsSL https://get.docker.com | bash -s docker

如果是国内服务器，可以使用阿里云的镜像加速

1
curl -sSL https://get.daocloud.io/docker | sh

验证是否安装成功：

1
2
docker -v
docker compose version

2. 配置Core

创建目录并下载docker-compose.yml文件：

1
2
cd && mkdir -p mx-space/core && cd $_
wget https://fastly.jsdelivr.net/gh/mx-space/core@master/docker-compose.yml

修改docker-compose.yml文件，在environment字段下添加或修改以下内容：

1
2
3
4
5
6
7
8
9
environment:
  - TZ=Asia/Shanghai
  - NODE_ENV=production
  - DB_HOST=mongo
  - REDIS_HOST=redis
  - JWT_SECRET=************ 
  - ALLOWED_ORIGINS=beanljun.top
  - ENCRYPT_ENABLE=false
  - ENCRYPT_KEY=
  • JWT_SECRET，长度不小于 16 个字符，不大于 32 个字符。
  • ALLOWED_ORIGINS为允许访问的域名，即前端域名，比如我的域名为beanljun.top。
  • ENCRYPT_ENABLE为是否开启加密，直接填false即可。
  • ENCRYPT_KEY为加密密钥，不开启加密时不需要填写。 填写的话请参考官方文档。

填写完之后，启动Core服务：

1
docker-compose up -d

接下来还需要配置反向代理，然后通过绑定域名登录后台进行初始化。

3. 配置反向代理

安装宝塔面板

如果已经有了宝塔面板，可以跳过这一步。

1
wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh ed8484bec

按照提示操作，安装完成后服务器放行16929端口，一并放行路80,443,2333端口，然后使用给出的外网面板地址，输入用户名和密码登录宝塔面板。

点击左侧网站，提示安装nginx，安装完成后点击添加站点，填写后端域名(例如server.beanljun.top)，根目录自动生成，点击确定。

网站创建完成后，点击SSL证书，签发证书，这里使用的是Let's Encrypt，生成后部署即可。

配置反向代理

接下来点击设置，弹出的页面中再点击反向代理 --> 添加反向代理，代理名称随意，目标URL地址为http://127.0.0.1:2333，发送域名为127.0.0.1,然后点击确定。

打开配置文件，将里面的内容替换为以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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; 
    }

    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; 
    }

点击保存，然后重启nginx服务。

4. 域名解析

前面我们在服务器里创建了一个后端域名，但是现在输入这个域名是无法访问的，需要进行域名解析。将创建的后端域名解析到服务器的公网IP地址。

首先将腾讯云域名通过Cloudflare进行解析，相关配置参考这篇文章。

打开Cloudflare，点击域名，选择DNS，添加一条A记录，名称填写server(因为我的后端域名是server.beanljun.top)，IPv4地址填写服务器的公网IP地址，代理状态选择全程代理，点击保存。

4. 初始化后台

访问https://后端域名/proxy/qaqdmin，进入登录页面，设置用户名和密码，登录后台，进行初始化操作。

至此，后端部署完成。

前端部署

前端直接使用vercel进行自动化部署，具体操作参考官方文档的准备步骤以及通过 Vercel 部署，这里已经写的很详细了，不再赘述。

vercel域名绑定

直接输入vercel给出的域名，发现在不科学上网的情况下很难访问，需要绑定自己的域名。

打开vercel项目，点击Settings，Domains，添加域名，填写自己的域名。

然后在Cloudflare中添加CNAME记录，名称填写www，目标填写vercel.app给出的域名，cname.vercel-dns.com。 再添加一条A记录，名称填写@，IPv4地址填写76.76.21.21。

至此，前端部署完成，不出意外的话，访问自己的域名应该可以就可以看到Shiro的首页了。

CORS跨域问题

在部署完成访问后，发现首页中最近发生的事以及友链和评论等内容无法正常显示，查看控制台发现CORS问题。

关于CORS问题，可以参考这篇文章。

我的解决方法是在Cloudflare中添加转换规则，如下图所示：

标头名称 值
Access-Control-Allow-Headers authorization,content-type,x-session-uuid
Access-Control-Allow-Methods GET,HEAD,POST,OPTIONS,PUT,PATCH
Access-Control-Allow-Origin https://www.beanljun.top(前端域名)

如果还存在跨域问题，比较失败名称所对应的响应头的Access-Control-Allow-Headers、Access-Control-Allow-Methods是否包含了请求头的内容，如果不包含在Cloudflare添加即可。

不知道这种操作的安全隐患大不大，还请大佬解答。

添加完成后，刷新页面，问题完美解决。

Enjoy~