宣告：本博文用於學習總結及工作心得

環境:

Ubuntu16.04、Tomcat7、Nginx 1.5.6

發現問題：

最近在生產伺服器使用過程中，發現一個以前被忽略的問題；專案中如果存在大量的js,css或者其它一些靜態資源，每次訪問的時候，都需要發出大量的請求，造成載入速度過慢；

一般情況我們使用開發者模式，就可以檢視瀏覽器發出的每一個請求的耗時情況；而在專案中，當用戶登入時，載入index.jsp的時候，瀏覽器就會發送大量的請求，通過開發者模式可以看出，都是一些js,css,以及一些其它的靜態資原始檔；通過多次測試，載入耗時平均在10s左右；雖然，這些靜態資源都是非同步載入，但是由於請求太多，還是會照成客戶體驗效果差，而且還會影響其它功能的載入

解決問題：

使用 nginx_http_concat模組合併多個靜態資源的請求，減少瀏覽器發出的請求，可以大大加快瀏覽器的載入速度；想象一下，當你的專案中，有成千上萬個靜態資源時，沒有使用nginx_http_concat模組之前，你需要傳送多少個請求？使用nginx_http_concat模組時，可能只需要傳送幾十個或者幾個請求，這個根據你的需求來，比如在我的專案中，js檔案是按照模組劃分，在nginx沒有新增concat模組前，每次使用者登入需要載入白多個js等靜態資原始檔；而新增concat模組以後，我按照模組劃分只需要每個模組傳送一個請求，大大減少了這方面的網路開銷。當然請求耗時是非常可觀的，甚至比普通載入單個檔案耗時更少

1.模組介紹：

該模組是由淘寶技術團隊釋出在github上，用來合併多個靜態檔案的請求為一個請求，減少伺服器被訪問的次數。

2.下載nginx_http_concat模組

git clone git://github.com/alibaba/nginx-http-concat.git

3.重新編譯nginx 

移動模組到 /etc/nginx/third-modules中，third-modules是專門用來存放nginx新增模組的原始檔的

mv nginx-http-concat/ /etc/nginx/third-modules/

根據你現有的nginx版本，去下載原始碼，如果你想升級nginx，也可以下載高版本的nginx原始碼

之前在伺服器中，因為需要新增nginx-accesskey模組，所以當時我已經升級過nginx到1.5.6

解壓nginx原始碼

tar -zxvf /root/nginx-1.5.6

進入目錄

cd /root/nginx-1.5.6.

如果以前編譯過原始碼 請執行

make clean

獲取當前nginx的所擁有的模組：

nginx -V

輸出：

nginx version: nginx/1.5.6
built by gcc 5.4.0 20160609 (Ubuntu 5.4.0-6ubuntu1~16.04.4)
TLS SNI support enabled
configure arguments: --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-client-body-temp-path=/var/lib/nginx/body --http-fastcgi-temp-path=/var/lib/nginx/fastcgi --http-log-path=/var/log/nginx/access.log --http-proxy-temp-path=/var/lib/nginx/proxy --http-scgi-temp-path=/var/lib/nginx/scgi --http-uwsgi-temp-path=/var/lib/nginx/uwsgi --lock-path=/var/lock/nginx.lock --pid-path=/var/run/nginx.pid --with-http_realip_module --with-http_stub_status_module --with-http_ssl_module --with-debug --with-http_addition_module --with-http_dav_module --with-http_geoip_module --with-http_gzip_static_module --with-http_realip_module --with-http_stub_status_module --with-http_ssl_module --with-http_sub_module --with-http_xslt_module --with-ipv6 --with-sha1=/usr/include/openssl --with-md5=/usr/include/openssl --with-mail --with-mail_ssl_module --add-module=/etc/nginx/third-modules/nginx-accesskey-2.0.3

執行./configure 生成編譯時所需要的Makefile檔案 同時加上你需要新增的模組

./configure --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-client-body-temp-path=/var/lib/nginx/body --http-fastcgi-temp-path=/var/lib/nginx/fastcgi --http-log-path=/var/log/nginx/access.log --http-proxy-temp-path=/var/lib/nginx/proxy --http-scgi-temp-path=/var/lib/nginx/scgi --http-uwsgi-temp-path=/var/lib/nginx/uwsgi --lock-path=/var/lock/nginx.lock --pid-path=/var/run/nginx.pid --with-http_realip_module --with-http_stub_status_module --with-http_ssl_module --with-debug --with-http_addition_module --with-http_dav_module --with-http_geoip_module --with-http_gzip_static_module --with-http_realip_module --with-http_stub_status_module --with-http_ssl_module --with-http_sub_module --with-http_xslt_module --with-ipv6 --with-sha1=/usr/include/openssl --with-md5=/usr/include/openssl --with-mail --with-mail_ssl_module --add-module=/etc/nginx/third-modules/nginx-accesskey-2.0.3 --add-module=/etc/nginx/third-modules/nginx-http-concat

編譯：

make

替換nginx：

service nginx stop
mv /usr/sbin/nginx /usr/sbin/nginx-20180403

檢查配置檔案：

/usr/sbin/nginx -t
返回以下資訊
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

升級ngnix：

make upgrade

錯誤問題：

參考之前升級過程，已經羅列了所有可能遇到的問題 通過nginx代理攔截請求，進行全域性訪問限制

3.配置nginx_http_concat

        location ~ .*\.(jpg|js|html|mp3|gif|jpeg|png|bmp|swf|ico|css)$ #設定訪問
靜態檔案直接讀取不經過tomcat
                {
                        concat on;
                        concat_unique off;
                        concat_delimiter "\n";
                        concat_ignore_file_error off;
                        root  /var/lib/tomcat7/webapps/ROOT;
                        access_log off;
                        expires      30d;
                }

4.最終測試

http://xxxxxxxx/index.jsp??js/personnel/insurance.js,performance.js,%20attendance.js,scheduling.js?0.35744541881709835

錯誤問題：

如果在訪問時遇到400 請檢視年nginx伺服器中mime.types中js的型別 與nginx_http_concat是否一直,concat模組中的型別是application/x-javascript 如果不是的話，就去原始碼中修改一下

解決過程：

說一說解決的過程吧，我覺得這個比問題的本身要重要許多；當時想到這個問題，是加班比較晚了，在下班的途中，想到，既然每個請求都需要重複經過網路這段，每次都需要消耗網路資源，可不可以一次性載入多個資源，這樣就節省了多個請求的網路耗時。當時的想法時，如果沒有相關的，就自己寫一個模組，因為之前寫過apache的自定義模組，所以這個不難。在網上查詢相關問題，發現了淘寶的這個開源模組；既然有開源的，就每必要再去重新造輪子了，如果以後業務需求提升，可能會需要自定義。同時感謝淘寶的開源