Linux系统springboot和vue基于nginx的前后端分离项目的启动部署（最简单配置）

冷不防 2021-08-29 13:09 676阅读 0赞

## 1.部署条件 ##

默认已经搭建好tomcat和nginx环境，且已经准备好springboot项目打包文件和vue项目打包文件dist

## 2.基本逻辑 ##

**nginx发挥反向代理的作用，对外暴露80端口，我会将dvue打包的前端资源部署在nginx上**  
**tomcat上部署springboot项目**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwODY0OA_size_16_color_FFFFFF_t_70_pic_center]

## 3.nginx操作 ##

1.  在/usr/local/nginx目录下创建test文件夹并把vue项目打包文件dist放进去（根据自身情况调整位置）
2.  修改/usr/local/nginx/conf中的nginx.conf配置文件

user root;
    #user nobody;
    worker_processes  1;
    
    
    
    events { 
        worker_connections  1024;
    }
    
    
    http { 
        include       mime.types;
        default_type  application/octet-stream;
        client_max_body_size 110m;
    
    
        sendfile        on;
    
        keepalive_timeout  65;
    
        server { 
            listen       80;
            server_name  localhost;
    
    
            location / { 
                root   /usr/local/nginx/test/dist;
                index  index.html index.htm;
            }
    
    
            location /vue{  #重点:vue是/usr/local/tomcat/webapps目录下的文件夹名，即解压后的服务名
                proxy_pass http://localhost:8080;   #后端服务接口地址 
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;            #通过nginx传递真实Ip
                proxy_set_header REMOTE-HOST $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;
            }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwODY0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/8f2b63429aeb43d4baea93f4c9f053ad.png