【js&css文件壓縮】lua+icombo+nginx 服務端的壓縮合並 -2

上一次我們是通過使用php的minify開源項目,來達到目標css和js文件的壓縮以及合併。這一次我們將會通過在服務器端配置,達到同樣的效果。
前提：首先我們需要先配置一下服務器的軟件,nginx服務器將這種應用處理交給lua腳本操作,因此這一次在服務端的配置會比較複雜。
安裝準備:

lua腳本解析器安裝 (官網下載) 要求5.1版本
httpLuaModule nginx模塊下載 (參考網站) 開源地址
nginx服務器安裝(官網下載)
jsMin下載
icombo下載及修改

一: lua腳本解析器安裝
這裏首先要區分LuaJIT 和Lua的差別。
Lua： Lua由標準C編寫而成,是一個小巧的腳本語言,幾乎在所有操作系統和平臺上都可以編譯，運行。包含一些腳本文件和腳本解釋器。
LuaJIT：採用C語言寫的Lua的解釋器的代碼,LuaJIT試圖保留Lua的精髓–輕量級,高效和可擴展。是一個高效率的lua腳本解釋器。

1: 下載 lua-5.1.5

curl -R -O http://www.lua.org/ftp/lua-5.1.5.tar.gz
tar -xvzf lua-5.1.5.tar.gz

2: 下載 readline lua的依賴

yum -y install readline-devel ncurses-devel

3: 配置並安裝
查看Makefile文件就可以知道目標安裝位置信息,默認lua安裝在/usr/local目錄下

cd lua-5.1.5
make && make install
#建立軟連接
ln -s /usr/local/bin/lua /usr/bin/lua
ln -s /usr/local/bin/luac /usr/bin/luac

4:查看是否安裝完成

vi test.lua

test.lua內容如下

-- account.lua
-- from PiL 1, Chapter 16

Account = {balance = 0}

function Account:new (o, name)
  o = o or {name=name}
  setmetatable(o, self)
  self.__index = self
  return o
end

function Account:deposit (v)
  self.balance = self.balance + v
end

function Account:withdraw (v)
  if v > self.balance then error("insufficient funds on account "..self.name) end
  self.balance = self.balance - v
end

function Account:show (title)
  print(title or "", self.name, self.balance)
end

a = Account:new(nil,"demo")
a:show("after creation")
a:deposit(1000.00)
a:show("after deposit")
a:withdraw(100.00)
a:show("after withdraw")

-- this would raise an error
--[[
b = Account:new(nil,"DEMO")
b:withdraw(100.00)
--]]

保存測試: lua test.lua 輸出

after creation  demo    0
after deposit   demo    1000
after withdraw  demo    900

如果有顯示結果則代表lua解析器成功安裝好.

二: nginx 服務器搭建
1. 從官網下載nginx服務器

wget  http://nginx.org/download/nginx-1.7.12.tar.gz
tar -xvzf nginx-1.7.12.tar.gz

從github中獲取httpLuaModule，ngx_devel_kit 模塊

wget https://github.com/openresty/lua-nginx-module/archive/v0.9.15.tar.gz
tar -xvzf v0.9.15
mv lua-nginx-module-0.9.15/  lua-nginx-module
wget https://github.com/simpl/ngx_devel_kit/archive/v0.2.19.tar.gz
tar -xvzf v0.2.19
mv ngx_devel_kit-0.2.19/ ngx_devel_kit

由於nginx添加模塊需要進行預編譯,所以無法動態添加模塊。如何添加httpLuaModule,詳細請看這裏。
3. 配置httpLuaModule模塊
命令行操作

export LUA_LIB=/usr/local/lib/lua
export LUA_INC=/usr/local/include

4.配置nginx

# /root 模塊和nginx源碼共同的目錄
tar -xvzf nginx-1.7.12.tar.gz
cd nginx-1.7.12
./configure --prefix=/opt/nginx \
            --with-ld-opt='-Wl,-rpath,/usr/local/lib/lua' \
            --add-module=/root/ngx_devel_kit \
            --add-module=/root/lua-nginx-module
make && make install

如果期間需要zlib-devel 和pcre的依賴,這是nginx服務器默認安裝需要的一些庫,你可以通過yum 進行安裝.

5.將nginx作爲服務端啓動服務

cd /etc/init.d
vi nginx

編輯nginx文件


    #!/bin/sh   
    #   
    # nginx - this script starts and stops the nginx daemon   
    #   
    # chkconfig: - 85 15   
    # description: Nginx is an HTTP(S) server, HTTP(S) reverse   
    # proxy and IMAP/POP3 proxy server   
    # processname: nginx   
    # chkconfig: 2345 90 91   
    # description: nginx web server  
    # processname: nginx  
    # config: /opt/nginx/conf/nginx.conf  
    # pidfile: /opt/nginx/nginx.pid  

    # Source function library.  
    . /etc/init.d/functions  

    # Source networking configuration.  
    . /etc/sysconfig/network  


    if [ -f /etc/sysconfig/nginx ];then  
    . /etc/sysconfig/nginx  
    fi  

    # Check that networking is up.   
    [ "$NETWORKING" = "no" ] && exit 0  

    nginx="/opt/nginx/sbin/nginx"   
    prog=$(basename $nginx)  

    NGINX_CONF_FILE="/opt/nginx/conf/nginx.conf"  

    [ -f /etc/sysconfig/nginx ] && . /etc/sysconfig/nginx  

    lockfile=/var/lock/subsys/nginx  

    start() {   
    [ -x $nginx ] || exit 5   
    [ -f $NGINX_CONF_FILE ] || exit 6   
    echo -n $"Starting $prog: "   
    daemon $nginx #-c $NGINX_CONF_FILE   
    retval=$?   
    echo   
    [ $retval -eq 0 ] && touch $lockfile   
    return $retval   
    }  

    stop() {   
    echo -n $"Stopping $prog: "   
    killproc $prog -QUIT   
    retval=$?   
    echo   
    [ $retval -eq 0 ] && rm -f $lockfile   
    return $retval   
    killall -9 nginx   
    }  

    restart() {   
    configtest || return $?   
    stop   
    sleep 1   
    start   
    }  

    reload() {   
    configtest || return $?   
    echo -n $"Reloading $prog: "   
    killproc $nginx -HUP   
    RETVAL=$?   
    echo   
    }  

    force_reload() {   
    restart   
    }  

    configtest() {   
    $nginx -t #-c $NGINX_CONF_FILE   
    }  

    rh_status() {   
    status $prog   
    }  

    rh_status_q() {   
    rh_status >/dev/null 2>&1   
    }  

    case "$1" in   
    start)   
        rh_status_q && exit 0   
        $1   
        ;;   
    stop)   
    rh_status_q || exit 0   
        $1   
        ;;   
    restart)   
        $1   
        ;;   
    test)   
        configtest   
        ;;   
    reload)   
        rh_status_q || exit 7   
        $1   
        ;;   
    force-reload)   
        force_reload   
        ;;   
    status)   
        rh_status   
        ;;   
    condrestart|try-restart)   
        rh_status_q || exit 0   
        ;;   
    *)   
    echo $"Usage: $0 {start|stop|status|restart|condrestart|try-restart|reload|force-reload|test}"   
    exit 2   
    esac

6.修改服務自啓動

chmod 755 nginx
chkconfig nginx on
service nginx start

三:檢查nginx是否支持lua編程
1.我們修改nginx.conf文件在 http server 下添加這樣一段內容

location /hello { 
              default_type 'text/plain'; 
              content_by_lua 'ngx.say("hello, lua")'; 
        }

2.保存nginx.conf 然後重啓nginx服務器,同時要開啓允許http請求

service nginx restart
iptables -I INPUT -p tcp --dport 80 -j ACCEPT
service iptables save

3.請求地址http://目標ip/hello,正常情況下會輸出”hello,lua”的字符串

四: 下載icombo的源代碼,配置nginx.conf
1.icombo是一個開源項目,雖然幾乎沒有什麼關注度,但是也基本滿足我們的需要,它能對css文件進行合併壓縮,對js文件具備連接功能。至於其它的功能到並沒有深入。實際上上面的配置完成後,接下來的配置就是十分簡單的了

wget https://github.com/lanrenwo/icombo/archive/v0.2.4.tar.gz
tar -xvzf v0.2.4
cp -f icombo-0.2.4/icombo /opt/nginx/scripts/lua

2.編輯 nginx.conf文件,關於icombo的配置和使用可以查看開源項目的介紹,那裏會有詳細的內容

location = /icombo/ {
                set $cache_dir "/dev/shm/icombo";
                set $css_trim "on";
                set $max_files 20;
                set $admin_ip "172.16.0.2";
                content_by_lua_file /opt/nginx/scripts/lua/icombo/icombo.lua;
        }
        # set  cache file alias
        location /icombo_sub/ {
            alias /dev/shm/icombo/;
            internal;
        }

3.重啓nginx服務器，設置緩存目錄

service nginx restart
mkdir /dev/shm/icombo
chown nobody:nobody /dev/shm/icombo

4.我們可以在web目錄下添加一些js和css文件,然後進行測試

mkdir /opt/nginx/html/js
cd /opt/nginx/html/js
wget https://github.com/jashkenas/backbone/blob/master/backbone.js
wget https://github.com/jashkenas/underscore/blob/master/underscore.js
cd ..
mkdir css
cd css
wget https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
wget https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap-theme.css

5.訪問目標壓縮文件

http://服務器ip/icombo/?f=js/backbone.js,js/underscore.js
http://服務器ip/icombo/?f=css/bootstrap.css,css/bootstrap.theme.css

在這裏，js與css的文件壓縮與合併就介紹到這裏了，注意,icombo本身目前不支持合併後js的壓縮功能,如果想要添加壓縮的功能,解決的辦法也還是有的。下次我們就特別講一下如何擴展到壓縮合並js文件。

講解到這裏，發現這是一個非常長的配置文章。能夠看到這裏的人估計很辛苦了。目前我的能力還沒有達到繪圖講解的地方,因此不足之處請多多指教。

【js&css文件壓縮】lua+icombo+nginx 服務端的壓縮合並 -2

【javascript】File API 讀取並顯示本地圖片 -1

【javascript】File API slice方法對File文件分割 - 2

【javascript】腳本操作HTTP請求技術Ajax-4 (進度事件)

【javascript】腳本操作HTTP請求技術Ajax-3 (單個文件上傳)

【php】Phalcon 框架安裝介紹

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結