在一個項目還是單體架構的時候，所有的js，css，image都會在一個web網站上，看起來並沒有什麼問題，比如下麵這樣： 但是當web網站流量起來的時候，這個單體架構必須要進行橫向擴展，而在原來的架構中靜態資源這羊毛是出在單體架構這頭羊身上，所以橫向多少 個單體，就有多少個靜態資源文件夾，比如下麵這 ...
在一個項目還是單體架構的時候，所有的js，css，image都會在一個web網站上，看起來並沒有什麼問題，比如下麵這樣：
但是當web網站流量起來的時候，這個單體架構必須要進行橫向擴展，而在原來的架構中靜態資源這羊毛是出在單體架構這頭羊身上，所以橫向多少
個單體，就有多少個靜態資源文件夾，比如下麵這樣的架構。
那這種架構有什麼問題呢？ 總的來說會有如下二個問題：
1. 瀏覽器對單一功能變數名稱的請求有併發限制。
在同一個功能變數名稱下，一般來說有js，css,img,media,html等等靜態資源，如果資源都掛在同一個功能變數名稱下，勢必會影響頁面的載入速度，而且單一功能變數名稱
下靜態資源還會帶上同功能變數名稱下的cookie等本不需要附加的信息。
2. 不方便管理和資源的浪費
為什麼這麼說呢？ 我們知道靜態資源一般來說都是很占資源空間的，尤其是用戶上傳的頭像，csv那更是占用web伺服器資源，為了應對突發情況，
一般會保持web代碼的3個版本的回滾策略，也就是說你需要在web1，web2，web3上同時進行3個靜態資源文件夾的copy，相比單獨用靜態資源服務
器統一管理的文件夾的情況對比，前者的磁碟資源的浪費可想而知。。。所以改正後的架構應該是這樣的。
有些同學可能會說，空口無憑，你得找點真實的案例給我看看，為了滿足你的胃口，下麵我就找下‘攜程’ 和 ‘淘寶’站點給你分享一下。
一：攜程首頁對這二個問題的解決
啥也不想說，通過瀏覽器隨便抓取一個css文件給大家分享一下，詳細如下圖：
1. css的載入路徑
從http://webresource.c-ctrip.com/ResCRMOnline/R5/css/index/private_index.A_v3.css?ts=20170828_pro 中可以看到這和www.ctrip.com
功能變數名稱根本就不是一個功能變數名稱，除了有點像，不說話，甚至還有點想笑，所以這種方式的載入對頁面的快速呈現有很大的幫助。
2. 對R5的分析
這個R5是什麼意思，就是有10個版本，R1-R10，每發佈一個新版本，R++，輪迴而已，所以你可以將R5 -> R6，那就是輪迴之前的css版本。
攜程現在的靜態資源大部分也是使用到了tengine,這是一個淘寶開源的基於nginx的proxy伺服器，在nginx上面做了很多的優化，而且tengine很
大的一個亮點就是可以使用多文件合併載入，比如10個css文件，可以合併成一個css進行呈現，這就讓10個http請求變成了1個，同樣也是對頁面
快速呈現有非常大的幫助，很可惜在ctrip上面並沒有找到合併載入css,js的案例，或許還是歷史的原因吧，那隻能在taobao官網上找一下看看。
從上圖中可以清楚看到tengine的強大功能，將default-min.css 和 apply-min.css 進行了合併載入，很神奇吧，接下來分享一下tengine的安裝配置。
二：tengine安裝
1. 下載地址：
可以去tengine官網（http://tengine.taobao.org/）上找到目前最新的 2.2.0的安裝包。
[root@localhost myapp]# wget http://tengine.taobao.org/download/tengine-2.2.0.tar.gz --2017-09-02 19:54:07-- http://tengine.taobao.org/download/tengine-2.2.0.tar.gz Resolving tengine.taobao.org (tengine.taobao.org)... 120.55.149.135 Connecting to tengine.taobao.org (tengine.taobao.org)|120.55.149.135|:80... connected. HTTP request sent, awaiting response... 200 OK Length: 2160648 (2.1M) [application/octet-stream] Saving to: ‘tengine-2.2.0.tar.gz’ 100%[===================================================================================================>] 2,160,648 2.11MB/s in 1.0s 2017-09-02 19:54:13 (2.11 MB/s) - ‘tengine-2.2.0.tar.gz’ saved [2160648/2160648] [root@localhost myapp]# tar -xzvf tengine-2.2.0.tar.gz [root@localhost myapp]# ls tengine-2.2.0 tengine-2.2.0.tar.gz [root@localhost myapp]# cd tengine-2.2.0 [root@localhost tengine-2.2.0]# ls AUTHORS.te CHANGES CHANGES.ru conf contrib html man packages README.markdown tests auto CHANGES.cn CHANGES.te configure docs LICENSE modules README src THANKS.te [root@localhost tengine-2.2.0]# pwd /root/myapp/tengine-2.2.0
2. 然後就是tengine的一些依賴包
[root@localhost myapp]# yum install -y zlib zlib-devel openssl openssl-devel pcre pcre-devel gcc gcc-c++
3. 常規的configure, make,make install
[root@localhost tengine-2.2.0]# ./configure --prefix=/usr/myapp/tengine checking for OS + Linux 3.10.0-327.el7.x86_64 x86_64 checking for C compiler ... found + using GNU C compiler + gcc version: 4.8.5 20150623 (Red Hat 4.8.5-11) (GCC) checking for gcc -pipe switch ... found checking for gcc builtin atomic operations ... found checking for C99 variadic macros ... found checking for gcc variadic macros ... found checking for compiler structure-packing pragma ... found checking for unistd.h ... found checking for inttypes.h ... found checking for limits.h ... found checking for sys/filio.h ... not found checking for sys/param.h ... found checking for sys/mount.h ... found checking for sys/statvfs.h ... found checking for crypt.h ... found checking for Linux specific features checking for epoll ... found checking for EPOLLRDHUP ... found checking for O_PATH ... found checking for sendfile() ... found checking for sendfile64() ... found checking for sys/prctl.h ... found checking for prctl(PR_SET_DUMPABLE) ... found checking for sched_setaffinity() ... found checking for crypt_r() ... found checking for SO_REUSEPORT ... found checking for sys/vfs.h ... found checking for nobody group ... found checking for poll() ... found checking for /dev/poll ... not found checking for kqueue ... not found checking for crypt() ... not found checking for crypt() in libcrypt ... found checking for F_READAHEAD ... not found checking for posix_fadvise() ... found checking for O_DIRECT ... found checking for F_NOCACHE ... not found checking for directio() ... not found checking for statfs() ... found checking for statvfs() ... found checking for dlopen() ... not found checking for dlopen() in libdl ... found checking for sysinfo() ... found checking for getloadavg() ... found checking for /proc/meminfo ... found checking for sched_yield() ... found checking for SO_SETFIB ... not found checking for SO_ACCEPTFILTER ... not found checking for TCP_DEFER_ACCEPT ... found checking for TCP_KEEPIDLE ... found checking for TCP_FASTOPEN ... found checking for TCP_INFO ... found checking for accept4() ... found checking for eventfd() ... found checking for int size ... 4 bytes checking for long size ... 8 bytes checking for long long size ... 8 bytes checking for void * size ... 8 bytes checking for uint64_t ... found checking for sig_atomic_t ... found checking for sig_atomic_t size ... 4 bytes checking for socklen_t ... found checking for in_addr_t ... found checking for in_port_t ... found checking for rlim_t ... found checking for uintptr_t ... uintptr_t found checking for system byte ordering ... little endian checking for size_t size ... 8 bytes checking for off_t size ... 8 bytes checking for time_t size ... 8 bytes checking for setproctitle() ... not found checking for pread() ... found checking for pwrite() ... found checking for sys_nerr ... found checking for localtime_r() ... found checking for posix_memalign() ... found checking for memalign() ... found checking for mmap(MAP_ANON|MAP_SHARED) ... found checking for mmap("/dev/zero", MAP_SHARED) ... found checking for System V shared memory ... found checking for POSIX semaphores ... not found checking for POSIX semaphores in libpthread ... found checking for struct msghdr.msg_control ... found checking for ioctl(FIONBIO) ... found checking for struct tm.tm_gmtoff ... found checking for struct dirent.d_namlen ... not found checking for struct dirent.d_type ... found checking for sysconf(_SC_NPROCESSORS_ONLN) ... found checking for openat(), fstatat() ... found checking for getaddrinfo() ... found checking for PCRE library ... found checking for PCRE JIT support ... found checking for OpenSSL library ... found checking for zlib library ... found creating objs/Makefile Configuration summary + using system PCRE library + using system OpenSSL library + md5: using OpenSSL library + sha1: using OpenSSL library + using system zlib library + jemalloc library is disabled nginx path prefix: "/usr/myapp/tengine" nginx binary file: "/usr/myapp/tengine/sbin/nginx" nginx configuration prefix: "/usr/myapp/tengine/conf" nginx configuration file: "/usr/myapp/tengine/conf/nginx.conf" nginx pid file: "/usr/myapp/tengine/logs/nginx.pid" nginx error log file: "/usr/myapp/tengine/logs/error.log" nginx http access log file: "/usr/myapp/tengine/logs/access.log" nginx http client request body temporary files: "client_body_temp" nginx dso module path: "/usr/myapp/tengine/modules/" nginx http proxy temporary files: "proxy_temp" nginx http fastcgi temporary files: "fastcgi_temp" nginx http uwsgi temporary files: "uwsgi_temp" nginx http scgi temporary files: "scgi_temp" [root@localhost tengine-2.2.0]# make && make install
4. 啟動tengine下的nginx進程，可以看到當我啟動之後，tengine的80埠已經打開了。
[root@localhost myapp]# ls tengine tengine-2.2.0 tengine-2.2.0.tar.gz [root@localhost myapp]# cd tengine [root@localhost tengine]# ls conf html include logs modules sbin [root@localhost tengine]# cd conf [root@localhost conf]# cd ../sbin [root@localhost sbin]# ls dso_tool nginx [root@localhost sbin]# ./nginx [root@localhost sbin]# netstat -tln Active Internet connections (only servers) Proto Recv-Q Send-Q Local Address Foreign Address State tcp 0 0 0.0.0.0:80 0.0.0.0:* LISTEN tcp 0 0 192.168.122.1:53 0.0.0.0:* LISTEN tcp 0 0 0.0.0.0:22 0.0.0.0:* LISTEN tcp 0 0 127.0.0.1:631 0.0.0.0:* LISTEN tcp 0 0 127.0.0.1:25 0.0.0.0:* LISTEN tcp6 0 0 :::22 :::* LISTEN tcp6 0 0 ::1:631 :::* LISTEN tcp6 0 0 ::1:25 :::* LISTEN [root@localhost sbin]#
三：css文件和合併載入的驗證
1. css文件驗證
下麵在nginx.conf 中配置一下靜態資源的訪問路徑，所有靜態資源都是放在/usr目錄下。
location ~ ^/(images|javascript|js|css|flash|media|static)/ { root /usr; }
然後生成 /usr/css/top.css 文件，最終瀏覽可以發現配置已生效。
[root@localhost usr]# mkdir css
[root@localhost usr]# ls
bin css etc games include lib lib64 libexec local myapp sbin share src tmp
[root@localhost usr]# cd css
[root@localhost css]# rz
[root@localhost css]# ls
top.css
2. css 合併壓縮
這個合併模式還需要在tengine下安裝一個ngx_http_concat_module 模塊，可以看下官網：http://tengine.taobao.org/document_cn/http_concat_cn.html。
我這裡採用靜態編譯，編譯之前先把之前的tengine進程給關閉掉（nginx -s stop）。
[root@localhost myapp]# cd tengine-2.2.0 [root@localhost tengine-2.2.0]# ls AUTHORS.te CHANGES CHANGES.ru conf contrib html Makefile modules packages README.markdown tests auto CHANGES.cn CHANGES.te configure docs LICENSE man objs README src THANKS.te [root@localhost tengine-2.2.0]# ./configure --prefix=/usr/myapp/tengine --with-http_concat_module && make && make install
接下來只要在nginx.conf 中配置concat on，最多合併20個文件，最後 nginx -s reload 重啟一下
location ~ ^/(images|javascript|js|css|flash|media|static)/ { root /usr; concat on; concat_max_files 20; concat_types text/css application/x-javascript; }
接下來再上傳一個tips.css到/usr/css目錄下，然後鍵入url：http://192.168.23.168/css/??top.css,tips.css ，，，終於大功告成啦。。。。
好了，本篇就說到這裡，希望對你有幫助。。。
