视频看了几百小时还迷糊？关注我，几分钟让你秒懂！
在前两篇中，我们分别完成了：
- 后端篇：用 Spring Boot 搭建 RESTful API；
- 前端篇：用 Vue 3 实现文章列表与详情页。
现在，是时候把它们“合体”并部署上线了！本篇将带你完成前后端联调优化、安全加固、本地打包、以及部署到云服务器的全流程，真正拥有一个可对外访问的个人博客！
一、为什么需要整合与部署？
很多教程止步于“本地能跑”，但真正的成就感来自——让全世界都能访问你的博客。
而部署过程中会遇到各种现实问题：
- 前后端跨域怎么彻底解决？
- 数据库密码能写死在代码里吗？
- Vue 打包后如何和 Spring Boot 一起运行？
- 如何用免费 HTTPS 让网站更专业？
本篇一一击破！
二、需求场景升级
你现在是一个独立开发者，希望：
✅ 博客能通过https://myblog.example.com访问；
✅ 前端页面加载快、无跨域警告；
✅ 后端配置不泄露敏感信息；
✅ 整个系统稳定运行，重启自动恢复。
三、关键步骤概览
- 前端打包→ 生成静态文件
- 后端集成静态资源→ Spring Boot 托管 Vue 页面
- 配置优化→ 分离配置、关闭跨域（不再需要）
- 部署到 Linux 服务器（以 Ubuntu 22.04 为例）
- 配置 Nginx + HTTPS（Let's Encrypt 免费证书）
四、详细实现
步骤 1：Vue 项目打包
在blog-frontend目录下执行：
npm run build生成dist/文件夹，里面是纯 HTML/CSS/JS 静态资源。
✅ 此时前端已“编译完成”，不再依赖 Node.js 运行时。
步骤 2：Spring Boot 托管前端静态文件
将dist/文件夹整体复制到 Spring Boot 项目的src/main/resources/static/目录下：
blog-backend/ └── src/ └── main/ └── resources/ └── static/ ├── index.html ├── assets/ └── ...🌟 Spring Boot 默认会将
/static下的内容作为静态资源提供服务。
访问http://localhost:8080/就会自动加载index.html！
修改 Vue 路由模式（重要！）
因为现在所有请求都走 Spring Boot，必须支持HTML5 History 模式回退。
修改src/router/index.js：
const router = createRouter({ history: createWebHistory(), // 注意：生产环境不能带 import.meta.env.BASE_URL routes })并在 Spring Boot 中添加一个兜底控制器，防止刷新 404：
// 新增：FallbackController.java @Controller public class FallbackController { @GetMapping({"/", "/post/{id}"}) public String forward() { return "forward:/index.html"; } }💡 原理：当访问
/post/123时，Spring Boot 找不到 API，就转发给index.html，由 Vue Router 接管路由。
步骤 3：配置分离 & 安全加固
不要把数据库密码写死在application.yml并提交到 Git！
✅ 正确做法：使用外部配置文件或环境变量。
创建application-prod.yml（不提交到 Git）：
spring: datasource: url: jdbc:mysql://localhost:3306/blog_db?useSSL=false&serverTimezone=Asia/Shanghai username: ${DB_USER} password: ${DB_PASSWORD}启动时指定：
java -jar blog.jar --spring.profiles.active=prod并在服务器上设置环境变量：
export DB_USER="root" export DB_PASSWORD="your_real_password"🔒 安全提示：MySQL 用户建议新建专用账号，仅授予
blog_db权限。
步骤 4：打包 Spring Boot 项目
确保pom.xml包含打包插件：
<build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build>执行打包：
./mvnw clean package -DskipTests生成target/blog-0.0.1-SNAPSHOT.jar
步骤 5：部署到云服务器（Ubuntu 22.04）
1. 安装必要软件
# 安装 Java 17（Spring Boot 3 要求） sudo apt update sudo apt install openjdk-17-jre -y # 安装 MySQL sudo apt install mysql-server -y sudo mysql_secure_installation # 创建数据库 sudo mysql -e "CREATE DATABASE blog_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;"2. 上传 JAR 包
用scp或 FinalShell 上传blog.jar到服务器/home/ubuntu/目录。
3. 启动应用（后台运行）
使用nohup或systemd（推荐后者）：
创建服务文件：
sudo nano /etc/systemd/system/blog.service内容如下：
[Unit] Description=My Personal Blog After=network.target mysql.service [Service] Type=simple User=ubuntu WorkingDirectory=/home/ubuntu ExecStart=/usr/bin/java -jar /home/ubuntu/blog.jar --spring.profiles.active=prod Environment=DB_USER=root Environment=DB_PASSWORD=your_password_here Restart=always [Install] WantedBy=multi-user.target启用并启动：
sudo systemctl daemon-reload sudo systemctl enable blog sudo systemctl start blog检查状态：
sudo systemctl status blog此时博客可通过http://你的服务器IP:8080访问！
步骤 6：配置 Nginx + HTTPS（免费！）
1. 安装 Nginx
sudo apt install nginx -y sudo ufw allow 'Nginx Full'2. 配置反向代理
sudo nano /etc/nginx/sites-available/blogserver { listen 80; server_name your-domain.com; # 替换为你的域名 location / { proxy_pass http://localhost:8080; 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 X-Forwarded-Proto $scheme; } }启用配置：
sudo ln -s /etc/nginx/sites-available/blog /etc/nginx/sites-enabled/ sudo nginx -t && sudo systemctl reload nginx3. 申请免费 HTTPS 证书（Let's Encrypt）
sudo apt install certbot python3-certbot-nginx -y sudo certbot --nginx -d your-domain.com按提示操作，Certbot 会自动修改 Nginx 配置并启用 HTTPS！
✅ 现在访问https://your-domain.com就能看到你的博客，并且浏览器显示“安全锁”！
五、反例 & 注意事项
❌ 反例：直接暴露 8080 端口给公网
- 不安全（容易被扫描攻击）；
- 无法使用标准 80/443 端口（用户需手动输端口）。
✅ 正确做法：用 Nginx 反向代理 + 防火墙限制 8080 仅本地访问。
sudo ufw deny 8080 # 禁止外网访问 8080❌ 反例：把敏感配置提交到 GitHub
# application.yml（危险！） password: 123456✅ 正确做法：使用.gitignore忽略配置文件，或用环境变量。
⚠️ 注意事项
- 域名解析：提前在 DNS 服务商（如阿里云、Cloudflare）将域名指向服务器 IP；
- 防火墙：确保云服务器安全组开放 80/443 端口；
- 日志查看：
journalctl -u blog -f实时查看后端日志； - 自动续期：Certbot 证书 90 天过期，但会自动续期（检查
systemctl list-timers）。
六、最终效果
- ✅ 域名访问：
https://myblog.example.com - ✅ 响应式页面：手机/电脑都能看
- ✅ 安全 HTTPS：浏览器显示绿色锁
- ✅ 自动重启：服务器宕机后服务自恢复
七、后续可扩展功能
| 功能 | 技术方案 |
|---|---|
| 后台管理 | Vue + Element Plus + JWT 登录 |
| Markdown 编辑 | 使用@bytemd/vue或vditor |
| 评论系统 | 新增评论表 + 邮件通知 |
| SEO 优化 | Vue SSR（Nuxt.js）或预渲染 |
| 图片上传 | 阿里云 OSS / 本地存储 |
视频看了几百小时还迷糊？关注我，几分钟让你秒懂！
