SpringBoot+Vue 前后端分离项目部署到云服务器

前言

前后端分离项目 SpringBoot + Vue 是当下最常用的开发架构，本地开发调试完成后，需要部署到云服务器对外提供访问。整体部署方案：Nginx 托管 Vue 静态资源 + Nginx 反向代理 API 请求到 SpringBoot 后端。本文从 Nginx 源码编译安装、Vue 前端打包上传、SpringBoot Jar 包部署、Nginx 反向代理配置，完整走通整套上线流程，附带踩坑要点，新手可以直接跟着操作。

架构说明：用户访问 80 端口，Nginx 返回 Vue 页面；页面发起 /api 接口请求，Nginx 转发请求到本机 SpringBoot 后端服务，同时解决浏览器跨域问题。

前置准备

一台云服务器（阿里云 / 腾讯云，CentOS7/8），开放安全组端口：80、后端服务端口（示例 8080）
服务器预装依赖：gcc、gcc-c++、pcre、openssl（编译 Nginx 必需）

yum install -y gcc gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel
本地安装 Node、Maven，用于打包前端、后端项目

一、Nginx 源码编译安装

这里采用源码编译方式安装 Nginx，安装目录默认 /usr/local/nginx

1. 下载 Nginx 压缩包并上传服务器

推荐官网下载，版本自选：Index of /download/

复制代码

# 示例直接在服务器wget下载，无需百度网盘
wget https://nginx.org/download/nginx-1.24.0.tar.gz

2. 解压源码包

复制代码

tar -xzvf nginx-1.24.0.tar.gz
# 进入解压目录
cd nginx-1.24.0

3. 编译配置 && 安装

复制代码

# 配置，指定安装路径
./configure --prefix=/usr/local/nginx
# 编译
make
# 安装
make install

执行完成后，Nginx 安装到 /usr/local/nginx

4. 验证 Nginx 是否安装成功

复制代码

# 进入nginx sbin目录
cd /usr/local/nginx/sbin
# 启动nginx
./nginx

浏览器访问云服务器公网 IP，出现 Nginx 欢迎页面即代表安装成功（默认监听 80 端口）。

常用 Nginx 启停命令

复制代码

./nginx        # 启动
./nginx -s stop  # 停止
./nginx -s reload # 重载配置（修改conf后推荐，不中断服务）

二、Vue 前端项目打包、上传、Nginx 配置

前置重要提醒

打包前，修改 Vue 项目 axios 接口地址 ：把本地localhost替换为服务器公网 IP，或者直接使用相对路径/api，依靠 Nginx 反向代理转发。

1. Vue 项目打包

在 Vue 项目本地命令行执行打包命令

复制代码

npm run build

执行完成后，项目根目录生成dist文件夹，里面是编译后的静态资源。

2. 清理 Nginx 默认页面，上传 dist 资源

复制代码

# 进入nginx静态页面目录
cd /usr/local/nginx/html
# 删除原有默认文件
rm -rf index.html 50x.html

把本地 dist 目录内全部文件 上传到 /usr/local/nginx/html

3. 修改 nginx.conf 配置文件

配置文件路径：/usr/local/nginx/conf/nginx.conf

复制代码

vim /usr/local/nginx/conf/nginx.conf

核心 server 配置（重点：静态页面托管 + 后端 api 反向代理 + Vue 路由 history 模式刷新 404 解决方案）

复制代码

server {
    listen       80;
    server_name  localhost;

    # 前端静态资源
    location / {
        root   html;
        index  index.html index.htm;
        # 解决history路由刷新404问题，Vue项目必备
        try_files $uri $uri/ /index.html;
    }

    # 所有/api开头的请求转发给SpringBoot后端
    location /api/ {
        proxy_pass http://127.0.0.1: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;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

注意：proxy_pass地址，根据你的 SpringBoot 启动端口修改。

4. 重载 Nginx 配置生效

复制代码

# 检查配置语法是否有误（推荐每次改完先校验）
./nginx -t
# 重载
./nginx -s reload

浏览器直接访问服务器公网 IP，即可打开 Vue 前端页面。

三、SpringBoot 后端打包部署

1. 后端项目打包

使用 Maven 打包，在 SpringBoot 项目根目录执行

复制代码

mvn clean package -DskipTests

打包成功后，target目录生成可执行xxx.jar包。

本地测试：本地 cmd 运行 jar 包，验证项目可以正常启动，接口无报错

复制代码

java -jar demo.jar

2. 上传 Jar 包到云服务器

上传到服务器任意目录，例如 /usr/local/java

3. 后台常驻运行（nohup）

nohup 让程序后台运行，关闭 ssh 窗口服务不中断，日志输出到 nohup.out

复制代码

nohup java -jar demo.jar &

日志查看：tail -f nohup.out
关闭后端服务：查找进程 ps -ef | grep java，拿到 pid，kill pid

补充：生产环境推荐编写 systemd 服务，方便开机自启，这里入门采用 nohup 快速部署。

四、完整访问流程

浏览器访问云服务器 IP:80 → Nginx 返回 Vue 前端页面
页面点击，前端发起/api/xxx接口请求
Nginx 匹配/api/，反向代理转发请求到本机 127.0.0.1:8080 SpringBoot
SpringBoot 处理业务，返回数据，原路返回给前端

五、高频踩坑总结

云服务器安全组：一定要在云厂商控制台放行 80、后端端口，否则外部无法访问。
Vue history 路由刷新 404 ：nginx 配置必须加上 try_files $uri $uri/ /index.html;。
接口跨域：使用 Nginx 反向代理后，前端不用配置跨域，由 Nginx 转发，避免浏览器跨域报错。
jar 包启动失败：检查端口占用、数据库连接地址是否为服务器数据库 IP、账号密码。
nohup 后台进程：多个版本 jar 包启动，记得 kill 旧进程，防止端口冲突。
Nginx 修改配置 ：每次修改 nginx.conf，先执行nginx -t校验语法，再 reload，避免直接挂掉服务。
打包前端前，接口地址不能硬编码写localhost，否则部署到服务器后接口请求本地浏览器，访问不到后端。

结语

这套部署方案是前后端分离项目最基础、最通用的上线方式，Nginx 承担静态资源托管 + 反向代理两大职责。掌握这套流程，你就可以独立把 SpringBoot+Vue 项目部署上线。后续进阶可以学习：HTTPS 证书配置、开机自启、Docker 容器化部署、项目日志管理。