nginx實現動態分離,解決css和js等圖片加載問題

時間 2019-11-12

標籤 nginx 實現動態分離解決 css 圖片加載問題欄目 Nginx 简体版

原文原文鏈接

2018年7月27日 16:52:16 新增信息javascript

這個多是Nginx版本的問題，最近在新的項目中用到了Nginx，是最近版本的Nginx，圖片和js均可以加載出來。php

改帖專門爲使用nginx,經過nginx把請求轉發到web服務器再返回客戶端的時候,解決css和js和圖片加載不出來的問題。css

若是沒安裝nginx,請訪問一下地址進行安裝 http://www.cnblogs.com/sz-jack/p/5200283.htmlhtml

以前對nginx負載均衡/反向代理雖然明白什麼意思,可一直沒作過,抽個空學了一下nginx,在搭建的時候發現經過nginx反向代理到web服務器的時候,發現web服務器的css和js等靜態資源加載不了,網上找了一下資料解決了此問題,現分享一下給各位,但願能給遇到此問題的人一些幫助。前端

1.解決思路java

當請求到web服務器js和css資源的時候,也是一個url指向到那些靜態資源,這個時候nginx配置文件中配置了靜態資源的訪問方法,不是訪問web服務器的靜態資源,並且是訪問nginx對應目錄下面的靜態資源。node

客戶端->nginx->nginx服務器css和js文件目錄。nginx

配置以下nginx.confweb

#僅僅是對靜態資源加載不出來的配置信息,下面會有全的配置文件信息。後端

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        { 
                #這目錄是我web服務器的項目位置,這裏的目錄須要最好和web服務器的靜態資源的目錄同樣,當請求web服務器的css文件的時候,nginx會獲取url地址,而後根據url地址去                #訪問url對應的本地目錄資源
                root /usr/local/tomcat/tomcat-80/webapps/ifm;
                if (-f $request_filename) {
                expires 1d;
                break;
                }
        }
    
        location ~ .*\.(js|css)$
                {
                root /usr/local/tomcat/tomcat-80/webapps/ifm;
                if (-f $request_filename) {
                expires 1d;
                break;
        }

2016/02/20 18:49:42 [error] 8182#0: *968 open() "/usr/local/tomcat/tomcat-80/webapps/ifm/cache/global/img/gs.gif" failed (2: No such file or directory), client: 5.44.1

這個是nginx的error.log日誌,咱們看到在open 打開usr/local/tomcat/tomcat-80/webapps/ifm/cache/global/img/gs.gif這個文件的時候提示 No such file or directory,不存在此目錄,這樣能夠直觀的看到當訪問圖片和css等靜態文件的時候它是會訪問本地資源目錄的

全的nginx配置文件以下

#定義Nginx運行的用戶和用戶組
user  root;
#nginx進程數，建議設置爲等於CPU總核心數。
worker_processes  1;
#全局錯誤日誌定義類型，[ debug | info | notice | warn | error | crit ]
error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#進程文件
pid        logs/nginx.pid;

#工做模式與鏈接數上限
events {
#參考事件模型，use [ kqueue | rtsig | epoll | /dev/poll | select | poll ]; epoll模型是Linux 2.6以上版本內核中的高性能網絡I/O模型，若是跑在FreeBSD上面，
#就用kqueue模型。
    use epoll;  
　　#單個進程最大鏈接數（最大鏈接數=鏈接數*進程數）
    worker_connections  65535;
}

#設定http服務器
http {
    include       mime.types;#文件擴展名與文件類型映射表
    default_type  application/octet-stream; #默認文件類型

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        off;
    tcp_nopush     on;#防止網絡阻塞
    tcp_nodelay on; #防止網絡阻塞

    #keepalive_timeout  0;
    keepalive_timeout  65;#長鏈接超時時間，單位是秒


    #FastCGI相關參數是爲了改善網站的性能：減小資源佔用，提升訪問速度。下面參數看字面意思都能理解。
    fastcgi_connect_timeout 300;
    fastcgi_send_timeout 300;
    fastcgi_read_timeout 300;
    fastcgi_buffer_size 64k;
    fastcgi_buffers 4 64k;
    fastcgi_busy_buffers_size 128k;
    fastcgi_temp_file_write_size 128k;

    #gzip模塊設置
    gzip on; #開啓gzip壓縮輸出
    gzip_min_length 1k; #最小壓縮文件大小
    gzip_buffers 4 16k; #壓縮緩衝區
    #gzip_http_version 1.0; #壓縮版本（默認1.1，前端若是是squid2.5請使用1.0）
    gzip_comp_level 2; #壓縮等級
    gzip_types text/plain application/x-javascript text/css application/xml;
    #壓縮類型，默認就已經包含text/html，因此下面就不用再寫了，寫上去也不會有問題，可是會有一個warn。
    gzip_vary on;
    #limit_zone crawler $binary_remote_addr 10m; #開啓限制IP鏈接數的時候須要使用

    upstream aly.com {
        #服務器1   
        server 120.25.153.204:8080 weight=3;#tomcat 8080端口   
        #服務器2 
        #server 120.25.153.204:8081 weight=1;#tomcat 8081端口
        server 120.27.137.142      weight=3;
   
        }   

    server {
        #監聽的端口
        listen       80;
        server_name  aly.com;
        #編碼格式
        charset utf-8;

        #access_log  logs/host.access.log  main;
   
        location /
       {
        proxy_pass http://aly.com;
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        #後端的Web服務器能夠經過X-Forwarded-For獲取用戶真實IP
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        #如下是一些反向代理的配置，可選。
        proxy_set_header Host $host;
        client_max_body_size 10m; #容許客戶端請求的最大單文件字節數
        client_body_buffer_size 128k; #緩衝區代理緩衝用戶端請求的最大字節數，
        proxy_connect_timeout 90; #nginx跟後端服務器鏈接超時時間(代理鏈接超時)
        proxy_send_timeout 90; #後端服務器數據回傳時間(代理髮送超時)
        proxy_read_timeout 90; #鏈接成功後，後端服務器響應時間(代理接收超時)
        proxy_buffer_size 4k; #設置代理服務器（nginx）保存用戶頭信息的緩衝區大小
        proxy_buffers 4 32k; #proxy_buffers緩衝區，網頁平均在32k如下的設置
        proxy_busy_buffers_size 64k; #高負荷下緩衝大小（proxy_buffers*2）
        proxy_temp_file_write_size 64k;
        }

        #error_page  404              /404.html;

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

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
                root /usr/local/tomcat/tomcat-80/webapps/ifm;
                if (-f $request_filename) {
                expires 1d;
                break;
                }
        }
    
        location ~ .*\.(js|css)$
                {
                root /usr/local/tomcat/tomcat-80/webapps/ifm;
                if (-f $request_filename) {
                expires 1d;
                break;
        }
} 


        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}