【js&css文件压缩】lua+icombo+nginx 服务端的压缩合并 -2

胡意致

2023-12-01

上一次我们是通过使用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

相关阅读

相关文章

相关问答

相关文档