1       原始需求

近期在搭建平臺,因多域名會分割流量,所以希望將類似

ansible.178linux.com  salt.178linux.com qa.178linux.com 這些平臺整合為一個平臺,所示如下

ansible.178linux.com =è www.www58058.com/doc/ansible

salt.178linux.com =è www.www58058.com/doc/salt

qa.178linux.com =è www.www58058.com/doc/qa

以些方式最大程度提高平臺整體權重。整合過程中出現一個css頁面加載異常問題特總結分享

2       問題回放

如圖: 右瀏覽器頁面css,js,圖片等樣式無法加載,顯示丑陋,

Chrome F12 debug追蹤后發現有部分樣式不加載,但該頁面所有請求均能正常請求并被回應,狀態值均為200,

2.1     初步懷疑

2.1.1  css,js目錄權限問題  —失敗

這個問題容易解決,驗證也不成問題,

# cd /data/webapps/doc

# chown www. ansible -R

2.1.2  樣式文件copy遺漏  —失敗

確保所有樣式文件均沒有遺漏,

但測試下來仍然樣式渲染不正常

2.2     確認所有請求回應數據

沒有其它辦法,只能對比doc.178linux.com正常請求來逐個請求和回應數據逐一查看,確認每個請求和回應的數據是否全部都一樣.經仔細查看果然發現問題了.

1.     部分css.js,能正常被辨別被正常解析為 text/css  text/javascripts,部分只能被解析為text/html

2.     查看頁面源碼并比對發現所有源碼是一樣的

3.       google  Content-Type: text/html 發現如下幾篇文章

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types

http://stackoverflow.com/questions/5413107/headercontent-type-text-css-is-working-in-firefox-and-chrome-but-in-inter 

2.2.1  初步懷疑

2.2.1.1 /etc/nginx/mime.types文件沒有定義 css,js解析結構  —失敗

和運營環境正常配置的nginx對比后沒有異常

2.2.1.2 瀏覽器緩存或瀏覽器支持問題 –失敗

發現firefox,chrome均有問題,但ie正常,但原因還是無從得知

3       從源開始

3.1     Nginx配置

server
	{
		listen 80 default;
		server_name www.www58058.com;
		index  index.php index.html;
		root  /data/webapps/;
                access_log /var/log/nginx/access.log;
                error_log /var/log/nginx/error.log;

		error_page   404   /404.html;
		location ~ [^/]\.php(/|$){
			try_files $uri =404;
			fastcgi_pass  127.0.0.1:9000;
			fastcgi_index index.php;
			include fastcgi.conf;
			#include pathinfo.conf;
			}

		location  ~  /doc/ansible/ {
		        index  index.php index.html;
			try_files $uri $uri/ =404;
			fastcgi_pass  127.0.0.1:9000;
			fastcgi_index index.php;
			include fastcgi.conf;
		}

		location /nginx_status {
			stub_status on;
			access_log   off;
		}

		location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
			{
			expires      30d;
			}

		location ~ .*\.(js|css)?$
			{
			expires      12h;
			}


               if (-f $request_filename/index.html){
               		rewrite (.*) $1/index.html break;
  	         }
	       if (-f $request_filename/index.php){
               		rewrite (.*) $1/index.php;
	         }
               if (!-f $request_filename){
        	        rewrite (.*) /index.php;
 		} 

	}
server
	{
		server_name doc.178linux.com;
		index  index.php index.html;
		root  /data/tran/build/html/;
                access_log /var/log/nginx/access.log;
                error_log /var/log/nginx/error.log;

		error_page   404   /404.html;
		location ~ [^/]\.php(/|$){
			try_files $uri =404;
			fastcgi_pass  127.0.0.1:9000;
			fastcgi_index index.php;
			include fastcgi.conf;
			#include pathinfo.conf;
			}

		location /nginx_status {
			stub_status on;
			access_log   off;
		}

		location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
			{
			expires      30d;
			}

		location ~ .*\.(js|css)?$
			{
			expires      12h;
			}


               if (-f $request_filename/index.html){
               		rewrite (.*) $1/index.html break;
  	         }
	       if (-f $request_filename/index.php){
               		rewrite (.*) $1/index.php;
	         }
               if (!-f $request_filename){
        	        rewrite (.*) /index.php;
 		} 

	}

清理思緒,從頭再來,幾經檢查覺得可能性最大的還是nginx的配置問題,從這個點出發再次切入,增加如下配置后刷新再看,問題解決。 

找了一番官網發現沒有特別合適的說明,從配置上看我的個人理解是:

Location匹配到字段后將不會繼續查找其它匹配字段,因本頁面中即有簡單的html頁面也有css,js等樣式在解析過程中找不到對應配置,所以根據配置規則全部解析為html方式,但css,js樣式以html的方式是無法正常解析,所以導致樣式加載異常。