【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真是讓人蛋疼，但是運行出來的效果時候，我是激動的，我當時真的跳起來了！