news 2026/4/17 12:50:38

手把手教你用 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/4/18 3:31:23

Git commit统计贡献度查看GLM项目参与情况

Git Commit 统计揭示 GLM 项目真实活跃度&#xff1a;谁在推动多模态模型演进&#xff1f; 在 AI 模型“军备竞赛”愈演愈烈的今天&#xff0c;一个耐人寻味的现象正在浮现&#xff1a;越来越多开发者不再只看论文指标或 Demo 效果&#xff0c;而是悄悄打开项目的 Git 提交记录…

作者头像 李华
网站建设 2026/4/18 3:30:50

物联网赋能环境管控：在线温湿度实时监控系统解决方案，保障数据稳定无丢失

在物联网技术飞速普及的今天&#xff0c;“实时感知、精准调控、智能报警”已成为各行业环境管理的核心需求。温湿度作为影响产品质量、生产安全、生态环境的关键因素&#xff0c;其监控方式正从传统的人工巡检、离线记录&#xff0c;全面升级为在线实时监控模式。在线温湿度实…

作者头像 李华
网站建设 2026/4/17 5:58:04

工业遥控器光纤模块技术解析

工业遥控器光纤模块的核心&#xff0c;是用光纤这条不受电磁干扰的“专属高速路”&#xff0c;在复杂工业环境下建立一条可靠的控制通道。核心原理与技术架构光纤模块的核心是光电-电光转换。遥控器的电信号经光电转换模块调制成光信号&#xff0c;通过光纤传输后&#xff0c;在…

作者头像 李华
网站建设 2026/4/18 3:36:51

ComfyUI变量传递实现GLM-4.6V-Flash-WEB参数复用

ComfyUI变量传递实现GLM-4.6V-Flash-WEB参数复用 在当前多模态AI应用快速落地的背景下&#xff0c;一个现实问题摆在开发者面前&#xff1a;如何在有限算力下&#xff0c;高效部署具备图文理解能力的大模型&#xff1f;传统方式中&#xff0c;每次推理都重新加载模型、重复配置…

作者头像 李华
网站建设 2026/4/18 3:25:33

电子产品设计内部评审的构建与执行

设计内部评审的系统性构建与执行指南一、内部评审的四大核心类型及作用1. 构思评审&#xff08;Concept Review&#xff09; 作用&#xff1a;验证设计方向的正确性&#xff0c;确保方案符合业务目标与用户需求时机&#xff1a;项目启动初期&#xff0c;设计方案成型前关键…

作者头像 李华
网站建设 2026/4/18 3:27:22

实例控制台日志排查GLM-4.6V-Flash-WEB启动失败问题全记录

GLM-4.6V-Flash-WEB 启动失败&#xff1f;从控制台日志看透本质问题 在多模态大模型快速落地的今天&#xff0c;一个看似简单的“网页打不开”问题&#xff0c;可能背后藏着显存溢出、环境错乱或权限缺失等复杂原因。最近不少开发者反馈&#xff1a;明明按照文档执行了 1键推理…

作者头像 李华