news 2026/3/16 9:22:09

手把手教你用 Spring Boot + Vue 搭建个人博客系统（全栈整合 + 部署篇）

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
手把手教你用 Spring Boot + Vue 搭建个人博客系统（全栈整合 + 部署篇）

视频看了几百小时还迷糊？关注我，几分钟让你秒懂！

在前两篇中，我们分别完成了：

  • 后端篇：用 Spring Boot 搭建 RESTful API；
  • 前端篇：用 Vue 3 实现文章列表与详情页。

现在，是时候把它们“合体”并部署上线了！本篇将带你完成前后端联调优化、安全加固、本地打包、以及部署到云服务器的全流程，真正拥有一个可对外访问的个人博客！

一、为什么需要整合与部署？

很多教程止步于“本地能跑”，但真正的成就感来自——让全世界都能访问你的博客。
而部署过程中会遇到各种现实问题：

  • 前后端跨域怎么彻底解决？
  • 数据库密码能写死在代码里吗？
  • Vue 打包后如何和 Spring Boot 一起运行？
  • 如何用免费 HTTPS 让网站更专业？

本篇一一击破！

二、需求场景升级

你现在是一个独立开发者，希望：

✅ 博客能通过https://myblog.example.com访问；
✅ 前端页面加载快、无跨域警告；
✅ 后端配置不泄露敏感信息；
✅ 整个系统稳定运行，重启自动恢复。

三、关键步骤概览

  1. 前端打包→ 生成静态文件
  2. 后端集成静态资源→ Spring Boot 托管 Vue 页面
  3. 配置优化→ 分离配置、关闭跨域（不再需要）
  4. 部署到 Linux 服务器（以 Ubuntu 22.04 为例）
  5. 配置 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/blog
server { 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 nginx
3. 申请免费 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忽略配置文件，或用环境变量。

⚠️ 注意事项

  1. 域名解析：提前在 DNS 服务商（如阿里云、Cloudflare）将域名指向服务器 IP；
  2. 防火墙：确保云服务器安全组开放 80/443 端口；
  3. 日志查看：journalctl -u blog -f实时查看后端日志；
  4. 自动续期：Certbot 证书 90 天过期，但会自动续期（检查systemctl list-timers）。

六、最终效果

  • ✅ 域名访问：https://myblog.example.com
  • ✅ 响应式页面：手机/电脑都能看
  • ✅ 安全 HTTPS：浏览器显示绿色锁
  • ✅ 自动重启：服务器宕机后服务自恢复

七、后续可扩展功能

功能技术方案
后台管理Vue + Element Plus + JWT 登录
Markdown 编辑使用@bytemd/vue或vditor
评论系统新增评论表 + 邮件通知
SEO 优化Vue SSR（Nuxt.js）或预渲染
图片上传阿里云 OSS / 本地存储

视频看了几百小时还迷糊？关注我，几分钟让你秒懂！

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/3/16 4:21:59

揭秘Dify access_token配置难题：5步实现无缝认证集成

第一章&#xff1a;Dify access_token配置难题解析在集成 Dify 平台时&#xff0c;access_token 的正确配置是实现身份验证与 API 调用的关键环节。许多开发者在初次部署时遇到认证失败、token 无效或过期等问题&#xff0c;通常源于配置流程中的细节疏忽。常见配置问题及成因 …

作者头像 李华
网站建设 2026/3/13 16:20:41

以生命为盾的守护（一）

三天后&#xff0c;C国与 E国边境的跨国机场&#xff0c;寒风卷着细碎的雪花&#xff0c;在停机坪上打着旋。秋然穿着黑色的大衣&#xff0c;手里紧紧攥着那半张染血的绣球花纸条&#xff0c;站在警戒线旁&#xff0c;目光死死盯着远处缓缓降落的运输机——那是载着仲清禾遗体回…

作者头像 李华
网站建设 2026/3/14 2:41:35

Redis的正确打开方式：Java程序员一定要了解！

Redis这玩意不用多说&#xff0c;Java后端打工人就没有没接触过的&#xff0c;现在出去面试基本上是必问项&#xff1b;而且在工作中在项目中还能起很大的作用。它不仅能减少数据库的操作、并且你还可以利用redis的一些数据结构如set sorted set 解决一些特定的问题、利用单线程…

作者头像 李华
网站建设 2026/3/14 2:50:02

Java CheckFailedException会去获取message.properties的内容吗

CheckFailedException是 Java 中一个自定义异常类&#xff0c;通常不会自动获取​ message.properties文件的内容&#xff0c;除非在代码中显式实现了国际化消息加载。常见的实现方式&#xff1a;1. 手动加载资源文件public class CheckFailedException extends RuntimeExcepti…

作者头像 李华
网站建设 2026/3/15 10:27:26

基于微信小程序的家乡特产销售平台系统毕设源码+文档+讲解视频

前言 随着乡村振兴战略推进与数字电商蓬勃发展&#xff0c;家乡特产的线上销售成为拓宽农产品流通渠道、助力农户增收的重要路径。当前家乡特产销售普遍存在渠道单一、品牌曝光不足、供需信息不对称、交易流程繁琐等问题&#xff0c;难以适配消费者便捷购物需求与农户数字化销售…

作者头像 李华
网站建设 2026/3/14 13:11:16

【Dify触发器兼容性终极指南】：破解跨平台集成难题的5大核心策略

第一章&#xff1a;Dify触发器兼容性核心挑战在现代低代码与AI集成平台中&#xff0c;Dify作为连接AI模型与业务逻辑的关键组件&#xff0c;其触发器机制承担着事件驱动架构中的核心职责。然而&#xff0c;在多系统异构环境下&#xff0c;Dify触发器的兼容性面临多重挑战&#…

作者头像 李华