什么是动静分离

  • 为了提高网站的响应速度,减轻程序服务器(Tomcat,Jboss等)的负载,对于静态资源比如图片,js,css等文件,我们可以在反向代理服务器中进行缓存,这样浏览器在请求一个静态资源时,代理服务器就可以直接处理,而不用将请求转发给后端服务器。用户请求的动态文件比如servlet,jsp则转发给Tomcat,Jboss服务器处理,这就是动静分离。这也是反向代理服务器的一个重要的作用。

最近tomcat服务器在本机运行javaweb程序时候,没有一点问题,但是放到阿里云服务器上面时候,总是加载不了js和css页面,一开始总是以为我本地代码写错,到处查,改了半天依旧没有反应。

然后最近在搞nginx反向代理,通过不断查阅,终于nginx对动静分离有了一点了解,从而解决js的404问题

如果没有安装nginx,可以参考这篇文章

下图时tomcat中webapp里面war包,线上运行8080端口域名地址,界面格式显示不出来。我们打开开发者工具,看到这里没有获取到加载js和css文件,这是大多人应该都有的操作吧。

nginx转发后authorization数据没了 nginx转发失败_linux


我们这里就通过nginx来转发到tomcat上面,从而实现动静态的分离。

打开nginx.conf,设置参数

  1. server_name 这是要转发的地址,设置为你自己域名,或者你的tomcat的ip地址,下面的转发地址都填此地址
  2. root 表示请求别匹配到后,会在这个文件夹内寻找相应的文件,root对后面静态资源的处理很重要。此处我把静态资源重新放了一个文件夹,放在外部 /product/Root中
  3. location 表示匹配客户端发送请求的路径,这里“/”代表所有请求的路径都能匹配。

这里的 root 位置 很重要,我把地址改成tomcat下的webapp,运行不成功的,然后我就把js、css的文件拿出来,放在外部了,在/product/Root中

cd /usr/local/nginx/conf/
vim nginx.conf
server {
        listen       80;
        #server_name  localhost;
        #此处我设置的是域名地址
        server_name www.xxx.xxx:8080;
        #charset koi8-r;

        #access_log  logs/host.access.log  main

      location ~ \.(js|css|html|jpg|gif|png|swf|mp3)$ {
         root /product/Root/;
       }

      location /{
        proxy_pass http://www.xxx.xxx:8080;
       }
       # location / {
       #     root   html;
       #     index  index.html index.htm;
       # }
       
       error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

此外root的文件路径在这里,跟上面的对应着来看

nginx转发后authorization数据没了 nginx转发失败_负载均衡_02

注意哈,我这里war包还是放在tomcat的webapp下面的。虽然原理我还是不太明白,还在慢慢找资料加深了解中。

页面可以运行了

nginx转发后authorization数据没了 nginx转发失败_linux_03


看下转发路径下的www.xxx.com/js/page.js的 js 文件可以显示出来。

nginx转发后authorization数据没了 nginx转发失败_服务器_04


拓展

同一个Nginx服务器同一端口配置多个tomcat服务代理

upstream product_server{
        server www.product.com:8080;
    }
    upstream order_server{
        server www.image.com:8081;
    }
 
 
   #HTTP服务器
   server {
        #监听80端口,80端口是知名端口号,用于HTTP协议
        listen       80;
        
        #定义使用www.xx.com访问
        server_name  www.nginx.com;    
      
        #编码格式
        charset utf-8;
        
        #代理配置参数
        proxy_connect_timeout 180;
        proxy_send_timeout 180;
        proxy_read_timeout 180;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarder-For $remote_addr;
        
        #默认指向product的server
        location / {
            proxy_pass http://product_server;
        }
 
		#使用location对不同请求做相应处理
        location /product/{
            proxy_pass http://product_server;
        }
 
        location /image/ {
            proxy_pass http://image_server;
        }
        
    }

网址输入
www.nginx.com/product
www.nginx.com/image
即可显示

说实话找bug真是让人蛋疼,但是运行出来的效果时候,我是激动的,我当时真的跳起来了!