异常教程

springboot vue项目部署（长文讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在现代 Web 开发中，Spring Boot 与 Vue.js 的组合已成为前后端分离项目的主流技术栈。本文将深入探讨如何将一个典型的 Spring Boot + Vue.js 项目部署到生产环境，帮助开发者系统化掌握从代码构建到服务器配置的全流程。通过实际案例和代码示例，本文将带领读者逐步解决部署过程中可能遇到的常见问题，并提供优化建议，确保项目高效稳定运行。

一、部署前的准备工作

1.1 确认项目结构与依赖

Spring Boot 与 Vue.js 项目的典型目录结构如下：

project-root/  
├── backend/（Spring Boot 项目）  
│   ├── src/  
│   ├── pom.xml（或 build.gradle）  
│   └── application.properties  
└── frontend/（Vue.js 项目）  
    ├── src/  
    ├── package.json  
    └── vue.config.js

关键点解析：

  • Spring Boot 需要独立打包成可执行的 JAR/WAR 文件，而 Vue.js 需要通过 npm run build 生成静态资源。
  • 确保 application.properties 中配置了正确的端口（如 server.port=8080）和数据库连接信息。

1.2 服务器环境要求

部署服务器建议使用 Linux 系统（如 Ubuntu），并安装以下组件：

  • JDK 11+（Spring Boot 运行依赖）
  • Nginx 或 Apache（反向代理与静态资源托管）
  • Docker（可选，用于容器化部署）

比喻说明：
将服务器视为一个“交通指挥中心”，Nginx 就像交警，负责将用户请求合理分流到后端接口（Spring Boot）和静态资源（Vue.js）。

二、项目构建与打包

2.1 构建 Spring Boot 后端

在项目根目录的 backend 文件夹中，执行以下命令：

mvn clean package  # Maven 项目  
./gradlew build    # Gradle 项目

成功后，会在 backend/target/ 目录下生成 your-project-name.jar。

注意事项：

  • 确保 application.properties 中配置的端口未被占用，且防火墙允许外部访问该端口。
  • 若使用数据库，需提前在服务器上部署 MySQL/MongoDB 等服务并配置好权限。

2.2 构建 Vue.js 前端

进入 frontend 目录，执行：

npm install  
npm run build

生成的静态文件位于 frontend/dist/，包含 HTML、CSS 和 JavaScript 文件。

关键优化：

  • 在 vue.config.js 中配置 publicPath: '/'，避免静态资源路径错误。
  • 使用代码压缩工具（如 Terser）减小文件体积，提升加载速度。

三、部署到服务器

3.1 后端部署：Spring Boot 启动与守护进程

将打包好的 JAR 文件上传到服务器的指定目录（如 /opt/app/backend/），然后通过以下命令启动：

nohup java -jar your-project-name.jar &

守护进程配置：
使用 systemd 管理服务，创建文件 /etc/systemd/system/springboot.service：

[Unit]  
Description=Spring Boot Application  
After=syslog.target  

[Service]  
User=your-username  
ExecStart=/usr/bin/java -jar /opt/app/backend/your-project-name.jar  
SuccessExitStatus=143  
Restart=on-failure  
RestartSec=10  
StartLimitInterval=600  
StartLimitBurst=3  

[Install]  
WantedBy=multi-user.target

启用并启动服务：

systemctl enable springboot.service  
systemctl start springboot.service

3.2 前端部署：Nginx 配置静态资源

将 frontend/dist/ 的内容上传到服务器的 Nginx 根目录（如 /var/www/html/）。编辑 Nginx 配置文件（/etc/nginx/sites-available/default）：

server {  
    listen 80;  
    server_name your-domain.com;  

    location / {  
        root /var/www/html;  
        index index.html;  
        try_files $uri $uri/ /index.html;  # 解决 Vue Router 的 history 模式问题  
    }  

    location /api/ {  
        proxy_pass http://localhost:8080;  # 转发后端接口请求  
        proxy_set_header Host $host;  
        proxy_set_header X-Real-IP $remote_addr;  
    }  
}

配置要点：

  • 通过 /api/ 路径前缀区分前后端请求，避免静态资源与接口冲突。
  • 使用 try_files 确保 Vue 单页应用（SPA）的路由正确跳转。

四、进阶部署方案：Docker 容器化

4.1 编写 Dockerfile

在 backend 目录下创建 Dockerfile：

FROM openjdk:11-jdk-slim  
WORKDIR /app  
COPY your-project-name.jar app.jar  
ENTRYPOINT ["java","-jar","/app.jar"]

在 frontend 目录下创建 Dockerfile：

FROM node:16  
WORKDIR /app  
COPY package*.json .  
RUN npm install  
COPY . .  
RUN npm run build  
FROM nginx:stable-alpine  
COPY --from=0 /app/dist/ /usr/share/nginx/html/  
EXPOSE 80  
CMD ["nginx", "-g", "daemon off;"]

4.2 构建并运行容器

docker build -t your-spring-boot-image .  
docker run -d -p 8080:8080 your-spring-boot-image  

docker build -t your-frontend-image .  
docker run -d -p 80:80 your-frontend-image

优势说明：
Docker 将环境依赖封装进镜像，实现“一次构建，到处运行”，尤其适合团队协作与快速部署。

五、常见问题与解决方案

5.1 跨域问题

在 Spring Boot 中配置 @CrossOrigin 或全局 CORS 配置：

@Configuration  
public class WebConfig implements WebMvcConfigurer {  
    @Override  
    public void addCorsMappings(CorsRegistry registry) {  
        registry.addMapping("/**")  
                .allowedOrigins("http://your-domain.com")  
                .allowedMethods("GET", "POST", "PUT", "DELETE");  
    }  
}

5.2 静态资源 404 错误

检查 Nginx 配置中的 root 路径是否正确，并确保文件权限允许访问：

chmod -R 755 /var/www/html

5.3 日志监控与性能优化

  • 使用 ELK（Elasticsearch, Logstash, Kibana）集中管理日志。
  • 在 Spring Boot 中启用 Actuator 端点监控应用状态： 
    management.endpoints.web.exposure.include=health,info

六、总结与扩展

本文详细讲解了从项目构建到生产部署的全流程，涵盖传统部署与容器化方案。通过合理配置 Nginx 反向代理和 Docker 容器，开发者可以高效管理 Spring Boot + Vue.js 项目的生命周期。后续可进一步探索以下方向：

  1. 云服务集成：使用 AWS、阿里云等托管服务简化部署。
  2. 自动化 CI/CD：通过 Jenkins 或 GitHub Actions 实现持续交付。
  3. 高可用架构：结合负载均衡和集群部署提升系统稳定性。

掌握这些技能后，开发者不仅能独立完成项目部署，还能为团队提供更专业的运维支持。希望本文能成为您技术进阶路上的实用指南！

最新发布

查看更多文章