Nginx动静分离配置(vue项目和springboot项目)

动静分离

Nginx 动静分离简单来说就是把动态跟静态请求分开，不能理解成只是单纯的把动态页面和 静态页面物理分离。严格意义上说应该是动态请求跟静态请求分开，可以理解成使用 Nginx 处理静态页面，Tomcat 处理动态页面。动静分离从目前实现角度来讲大是纯粹把静态文件独立成单独的域名，放在独立的服务器上，也是目前主流推崇的方案；

配置静态资源:

约定:静态资源 location / {}

        location /dist {
            root   /usr/pro;
            index  index.html index.htm;
        }
//  location 路径
路径一定要包含root里面
访问dist的时候 ip:80/root目录/dist

location /aaa {
            alias   /usr/pro/dist;
            index  index.html index.htm;
        }

alias 访问aaa的时候 其实访问的是 /usr/pro/dist

部署项目到nginx（vue项目和springboot项目）

部署vue项目的时候注意编译时候的路径问题否则可能文件显示不成功

执行命令为：npm run build

部署到nginx的时候

需要在安装nginx的目录下面修改文件 /usr/local/nginx/conf/nginx.conf文件的http里面添加以下代码：

server {  
        listen       80;  
        server_name  192.168.159.35;  
        location / {  
            root   /usr/tmp/dist; # vue项目所在的文件夹的路径
            try_files $uri $uri/ /index.html;#解决刷新报404的问题
            index  index.html index.htm;
        }  
     }

11. 部署vue项目到nginx里面代理

12.将springboot项目部署到nginx里面

a.启动springboot项目

启动命令给 
nohup java -jar 名字 --server.port=8088 &
server {
  #监听的端口号
  listen  80;
  #设置访问的二级域名
  server_name 192.168.159.35;


  location /{
  #配置访问的项目路径（注:这里重点）
  proxy_pass http://192.168.159.35:8088/;
  # root html;
  # index index.html index.htm;
  proxy_set_header   Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
  client_max_body_size 100m;
  root html;
  index index.html index.htm;
   }
  }