【nginx反向代理】成功解决tomcat下js、css等样式加载失败问题

什么是动静分离

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

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

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

如果没有安装nginx，可以参考这篇文章
https://blog.csdn.net/weixin_43464303/article/details/105060246

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

我们这里就通过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的文件路径在这里，跟上面的对应着来看

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

页面可以运行了

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

拓展
同一个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真是让人蛋疼，但是运行出来的效果时候，我是激动的，我当时真的跳起来了！