SanguiBlog 新版上线，并附全栈博客部署记录
全新博客已经上线，目前仍在测试阶段，旧博客暂时不会下线。 本文记录我将自研的 SanguiBlog 全栈博客项目 部署到阿里云服务器的完整过程。 项目技术栈：Spring Boot 3 + React 19 + MySQL + JWT + Tailwind + Vite
一、部署新博客背景
我目前有个旧的博客，它运行在：
Tomcat 9 + JDK 8
Nginx 反向代理
域名：
sangui.top
现在我完成了新博客（SpringBoot + React），我的打算是这样的：
部署在同一台服务器上
新博客不影响旧博客运行
通过新域名
new.sangui.top访问后续稳定后再迁移到正式域名（sangui.top）
因此，我需要做到：
在服务器中同时安装 JDK8 和 JDK21
新博客使用 JDK21，旧博客继续使用 JDK8
后端稳定运行 → systemd
前端交给 Nginx
静态资源 /uploads 映射到服务器目录
API 通过 /api/ 转发到 SpringBoot
二、后端部署（Spring Boot）
1. 安装 JDK 21
sudo yum install -y java-21-openjdk-devel我的 JDK21 安装在：
/usr/lib/jvm/java-21-openjdk验证：
/usr/lib/jvm/java-21-openjdk/bin/java -version2. 准备后端目录
我把 jar 包放在：
/home/sangui/blog/sanguiblog-server.jar上传方式：
scp target/sanguiblog-server.jar root@服务器IP:/home/sangui/blog/3. 创建上传目
mkdir -p /home/sangui/uploads4. 使用 systemd 托管后端服务
编辑服务文件：
sudo vim /etc/systemd/system/sanguiblog.service写入：
[Unit]
Description=SanguiBlog Backend Service (Java 21)
After=network.target
[Service]
User=root
WorkingDirectory=/home/sangui/blog
ExecStart=/usr/lib/jvm/java-21-openjdk/bin/java -jar sanguiblog-server.jar --spring.profiles.active=prod
Environment="SPRING_DATASOURCE_URL=jdbc:mysql://127.0.0.1:3306/sanguiblog_db?useSSL=false&serverTimezone=Asia/Shanghai"
Environment="SPRING_DATASOURCE_USERNAME=写你的数据库用户名"
Environment="SPRING_DATASOURCE_PASSWORD=写你的数据库密码"
Environment="JWT_SECRET=写你的 jwt 密钥"
Environment="STORAGE_BASE_PATH=/home/sangui/uploads"
Environment="ASSET_BASE_URL=http://new.sangui.top/uploads"
Restart=always
RestartSec=3
[Install]
WantedBy=multi-user.target
加载并启动：
sudo systemctl daemon-reload
sudo systemctl enable sanguiblog
sudo systemctl start sanguiblog
查看状态：
sudo systemctl status sanguiblog测试：
curl http://127.0.0.1:8082/api/site/meta如果返回 JSON 格式的返回即代表成功。
三、前端部署（React + Vite）
1. 构建前
本地运行：
npm install
npm run build
生成 dist 文件夹。
2. 上传前端 dist 到
scp -r dist/ root@服务器IP:/home/sangui/newblog-front/四、Nginx 配置
新建一个配置文件：
sudo vim /etc/nginx/conf.d/newblog.conf写入：
server {
listen 80;
server_name new.sangui.top;
root /home/sangui/newblog-front/dist;
index index.html;
location / {
try_files $uri /index.html;
}
# API 转发到后端
location /api/ {
proxy_pass http://127.0.0.1:8082/api/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
# 静态资源映射
location /uploads/ {
alias /home/sangui/uploads/;
}
}
测试并重载：
sudo nginx -t
sudo systemctl reload nginx
五、DNS 配置（阿里云）
进入：
阿里云控制台 → 域名 → sangui.top → 解析设置
添加一条记录：
如下图所示
访问：
http://new.sangui.top即可看到新博客上线。
六、总结
本次部署完成了：
SpringBoot 后端 → systemd 托管
前端 React → Nginx 静态托管
Nginx → API 反向代理 + 静态资源 alias
uploads 独立目录
多版本 JDK 共存（JDK8 不影响 JDK21）
域名多环境共存（旧博客不受影响）
最终实现：
旧博客：sangui.top （继续运行）
新博客：new.sangui.top（已上线）
未来只需：
把 sangui.top Nginx 配置切到新博客即可完成无停机切换。
写在最后
这是我第一次完整部署 SpringBoot + React 项目到生产环境， 从 JDK 多版本管理到 systemd、Nginx、域名解析、静态资源， 全链路的运维流程都走了一遍。
过程中遇到过：
Docker 拉不下来镜像
JDK 版本冲突
systemd 找不到 jar 文件
前端 API 地址错用 localhost
uploads 静态资源不显示
但也一个个排查下来都解决了。
- 微信
- 赶快加我聊天吧
- 赶快加我聊天吧
