spring boot+vue+nginx前后端分离详细部署过程心得！（不包含nginx集群和负载均衡）

『莫陌男』

已于 2025-01-13 15:39:05 修改

阅读量749

点赞数

CC 4.0 BY-SA版权

文章标签： nginx spring spring boot

于 2021-09-13 03:54:54 首次发布

本文链接：https://blog.csdn.net/weixin_42562259/article/details/120259440

本文详细介绍了如何在Linux服务器上部署前后端分离的项目，包括SpringBoot后端和Vue前端。步骤涵盖从安装nginx、配置代理到启动服务的全过程，并强调了vue build后的dist目录配置。同时，提到了后端jar包的部署方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前期准备：spring boot项目，vue，服务器（或者linux虚拟机可联网）

环境准备：服务器上有数据库，java环境即可！（java会打包，vue使用build打包项目）

1、安装nginx到服务器（虚拟机）

下载的相关包：

nginx安装包

pcre安装包（处理请求中的json数据）

openssl（支持HTTPS访问）

zlib（解压，必须下载）

2、使用fazillia或者xftp上传文件到目标文件夹下面（一般在linux的 /usr/local/nginx下面）解压，

使用unzip或者其他的都可以进行解压。（万事不决用sudo）

如果不能将文件直接传输到目标文件夹中使用

sudo mv 文件名 空格 目标目录

3、进入到nginx的解压文件下面执行以下命令（进入的是解压后的nginx文件夹下面）

  sudo tar zxvf 压缩包

注：sudo是用来提升Linux的操作权限

sudo apt install gcc

sudo apt install build-essential

sudo apt install make

yum install git gcc-c++ make automake autoconf libtool pcre pcre-devel zlib zlib-devel openssl-devel wget vim -y

4、nginx配置文件配置（/usr/local/nginx/conf下的nginx.conf）

（1）将开头的user放开，改为user root;

（2）在http下的server中的location改为

location / {
            root   /***...***/dist; //vue打包后的dist的文件目录
            index  index.html index.htm;
        }

location /代理的名字/ { //一般前后端分离都会有个代理名字如：localhost:8080/mmm/login  mmm就是代理的名字
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:8899/;  //这个路径是后端接收的路径
        }

5、运行nginx服务

去/usr/local/nginx/sbin  使用sudo ./nginx 开启

6、去前端浏览器输入服务器ip即可展示前端界面

7、将后端代码打包package然后将jar包打到后端使用

nohup java -jar ******.jar > nohup.out 2>&1 &

详细视频教学

项目下载、运行、配置、构建、打包、部署：全步骤实战演示。前后端分离式项目实战部署

视频特别全。包括war包和jar包的打包方式以及负载均衡都有涉及！！推荐！