Springmvc nginx实现动静分离过程详解

在下自己整理，如有错误请指正

一般的nginx的静态文件的项目是这么配置的

location ~ .*\.(js|css)?$
{
  root E:/Workspaces/Idea15/demo/web/WEB-INF;
  expires 1h;
}

但是如果这样配置，系统是读取不到对应的文件的，因为springmvc本身的前端模板配置了访问静态资源 Handles

那如何使用nginx搭理访问，实现动静分离

搭建nginx代理

第一阶段，修改nginx.conf 文件

#location / {
  #root  html;
  #index index.html index.htm;
#}
location / {
  proxy_next_upstream http_502 http_504 error timeout invalid_header;
  proxy_pass  http://127.0.0.1:8080;
  # 真实的客户端IP
  proxy_set_header  X-Real-IP    $remote_addr;
  # 请求头中Host信息
  proxy_set_header  Host       $host;
  # 代理路由信息，此处取IP有安全隐患
  proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
  # 真实的用户访问协议
  proxy_set_header  X-Forwarded-Proto $scheme;
}

这样替换以后，就可以通过nginx 代理转到tomcat了，但是静态资源仍然是通过tomcat 来读取的

注意：不需要更改原始的项目文件，需要修改tomcat的配置，bin/server.xml 将端口号由80改回8080

处理静态文件

第二阶段，实现动静分离

在springmvc的前端控制器中配置如下：

<mvc:resources mapping="/image/**" location="/WEB-INF/"/>
<mvc:resources mapping="/css/**" location="/WEB-INF/"/>
<mvc:resources mapping="/js/**" location="/WEB-INF/"/>

在nginx中配置如下，demo是我的项目名称，以下三种方式都可以区分

location demo/image/ {
  root E:/Workspaces/Idea15/demo/web/WEB-INF;
}
location /css/ {
  root E:/Workspaces/Idea15/demo/web/WEB-INF;
}
location js/ {
  root E:/Workspaces/Idea15/demo/web/WEB-INF;
}

但是写成 /demo/image/ 就是不行的

注：404页面等，如果在springmvc的项目中配置了，就不需要在这里接着配置了

最终的nginx.conf 页面代码如下：

#user nobody;
worker_processes 1;

events {
  worker_connections 1024;
}

http {
  include    mime.types;
  default_type application/octet-stream;

  #access_log logs/access.log main;

  sendfile    on;
  #tcp_nopush   on;

  #keepalive_timeout 0;
  keepalive_timeout 65;

  #gzip on;

  server {
    listen    80;
    server_name localhost;

    location / {
      proxy_next_upstream http_502 http_504 error timeout invalid_header;
      proxy_pass  http://127.0.0.1:8080;
      # 真实的客户端IP
      proxy_set_header  X-Real-IP    $remote_addr;
      # 请求头中Host信息
      proxy_set_header  Host       $host;
      # 代理路由信息，此处取IP有安全隐患
      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
      # 真实的用户访问协议
      proxy_set_header  X-Forwarded-Proto $scheme;
    }

    location image/ {
      root E:/Workspaces/Idea15/demo/web/WEB-INF;
    }
    location css/ {
      root E:/Workspaces/Idea15/demo/web/WEB-INF;
    }
    location js/ {
      root E:/Workspaces/Idea15/demo/web/WEB-INF;
    }

    # redirect server error pages to the static page /50x.html
    #
    error_page  500 502 503 504 /50x.html;
    location = /50x.html {
      root  html;
    }
  }

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自学编程网。

编程技巧