Lua、Tadashi Gallery

Openresty+Lua开源的图库管理系统:Tadashi Gallery 0.9.8发布

4条评论

Tadashi Gallery介绍

  1. Tadashi Gallery是什么鬼？
    Tadashi Gallery简称为TG，TG是一个类似于淘宝图片管理系统的简单版，便于将图片按文件夹进行分类管理，方便图片进行多次利用展示。
  2. TG应用背景
    在通常情况下大多数网站都是采用要使用时就进行图片上传，这样是很方便，但是遇到图片重复利用次数过多的网站时，这无非增加了存储空间也增加了图片传输的带宽，而且在多点的站点是部署配置也是非常麻烦，非常不利用扩展。在此环境下TG就诞生了，也借鉴了淘宝图库的一些想法。
  3. TG的好处
    TG在图片重复利用展示的特点就非常明显了，减少服务器的存储空间，减少带宽的压力等。也可以进行二次开发进行，很方便的进行扩展。也可以和fastDFS结合是组合成高性能的的分布式图片系统。
  4. TG的弊端
    TG是采用Lua开发的，并结合OpenResty一起才可运行，相对于用PHP来说没有那么普及并且部署不方便，考虑到TG一旦部署完毕后都不在进行更改的关系，以上因素都可以简单的忽略。

TG可以结合我之前写过的《openresty+Lua+GraphicsMagick进行类似淘宝的图片处理》进行自动图片进行各种尺寸的裁剪，非常适用于电商网站的使用。

OpenResty的安装

TG的开发离不开OpenResty的支持，OpenResty 是一个基于 Nginx 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。相关内容可以查看其官网：http://openresty.org

安装drizzle

$ wget https://openresty.org/download/drizzle7-2011.07.21.tar.gz
$ tar -xf drizzle7-2011.07.21.tar.gz
$ cd drizzle7-2011.07.21/
$ ./configure --without-server
$ make libdrizzle-1.0
$ make install-libdrizzle-1.0

安装OpenResty

$ wget https://openresty.org/download/ngx_openresty-1.9.3.2.tar.gz
$ tar -xf ngx_openresty-1.9.3.2.tar.gz
$ cd ngx_openresty-1.9.3.2
$ ./configure --prefix=/opt/openresty --with-http_drizzle_module --with-lua51 --with-luajit --without-mail_pop3_module --without-mail_imap_module  --without-mail_smtp_module 
$ gmake
$ gmake install
$ ln -s /opt/openresty/nginx/conf /etc/nginx

编写OpenResty的启动服务脚本

$ vim /etc/init.d/openresty
#!/bin/bash
# OpenResty Startup script for the Nginx HTTP Server
# this script create it by ivan at 2010.12.29.
#
# chkconfig: - 85 15
# description: OpenResty is a high-performance web and proxy server.
# It has a lot of features, but it's not for everyone.
# processname: nginx
# pidfile: /var/run/nginx.pid
# config: /etc/nginx/nginx.conf

nginxd=/opt/openresty/nginx/sbin/nginx
nginx_config=/etc/nginx/nginx.conf
nginx_pid=/var/run/nginx.pid

RETVAL=0
prog="nginx"

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

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

# Check that networking is up.
[ ${NETWORKING} = "no" ] && exit 0
[ -x $nginxd ] || exit 0

# Start nginx daemons functions.
start(){

    if [ -e $nginx_pid ]; then
        echo "nginx already running..."
        exit 1
    fi
    echo -n $"Starting $prog:"
    daemon $nginxd -c ${nginx_config}
    RETVAL=$?
    echo
    [ $RETVAL = 0 ] && touch /var/lock/subsys/nginx
    return $RETVAL
}
# Stop nginx daemons functions.
stop(){
    echo -n $"Stopping $prog:"
    killproc $nginxd
    RETVAL=$?
    echo
    [ $RETVAL = 0 ] && rm -f /var/lock/subsys/nginx /var/run/nginx.pid
}

#reload nginx service functions.
reload(){
    echo -n $"Reloading $proc:"
    killproc $nginxd -HUP
    RETVAL=$?
    echo
}
# See how we were called.
case "$1" in
    start)
        start
        ;;
    stop)
        stop
        ;;
    reload)
        reload
        ;;
    restart)
        stop
        start
        ;;
    status)
        status $prog
        RETVAL=$?
        ;;
    *)
        echo $"Usage: $prog {start|stop|restart|reload|status|help}"
        exit 1
esac

exit $RETVAL

$ chmod +x /etc/init.d/openresty
$ chkconfig --add openresty
$ chkconfig openresty on

安装TG

将TG的所有文件拷贝到服务器上

$ git clone https://github.com/ivanszl/tadashigallery.git
$ cd tadashigallery

配置好前端的访问地址跟图片访问域名

$ vim js/common.js
define(function(require, exports, modules){
    String.prototype.htmlEncode = function() {
        var tmp = document.createElement("div");
        (tmp.textContent != null) ? (tmp.textContent = this) : (tmp.innerText = this);
        var output = tmp.innerHTML;
        tmp = null;
        return output;
    };
    String.prototype.htmlDecode = function() {
        var tmp = document.createElement("div");
        tmp.innerHTML = text;
        var output = tmp.innerText || tmp.textContent;
        tmp = null;
        return output;
    };
    String.prototype.jstpl_format = function(c) {
        function d(b, a) {
            if (a in c) {
                return c[a];
            }
            return "";
        }
        return this.replace(/%\{([A-Za-z0-9_|.]+)\}/g, d);
    };
    var common = {
        queryUri : '/query.html', // 查询文件、文件夹、搜索接口
        loginUri : '/login.html', // 登陆接口
        addFolderUri : '/add_folder.html', // 添加文件夹接口
        uploadUri : '/file_upload.html', // 文件上传接口
        delFileUri : '/delete_file.html', // 删除文件接口
        renameUri: '/rename.html', // 更改名字接口
        imageHost : 'http://images.linsongzheng.com', // 图片访问域名 可以结合CDN来使用
        storeSave : function(key, val) {
            if (window.localStorage) {
                localStorage[key] = val;
            } else {
                common.setCookie(key, val, 365 * 24 * 3600);
            }
        },
        storeDelete : function(key) {
            if (window.localStorage) {
                localStorage.removeItem(key);
            } else {
                common.setCookie(key, 'tadashi', -1);
            }
        },
        storeGet : function(key) {
            if (window.localStorage) {
                return localStorage.getItem(key);
            } else {
                return common.getCookie(key);
            }
        },
        setCookie  : function(key, val, expire) {
            var exp = new Date();
            exp.setTime(exp.getTime() + expire * 1000);
            document.cookie = key + "=" + escape(val) + ";expire=" + exp.toGMTString();
        },
        getCookie : function(key) {
            var arr,reg=new RegExp("(^| )"+key+"=([^;]*)(;|$)");
            return (arr=document.cookie.match(reg))?unescape(arr[2]):null;
        }
    };
    modules.exports = common;
});

修改服务器配置

创建虚拟主机与后端配置文件夹，修改OpenResty的配置文件

$ mkdir -p /etc/nginx/{vhost,backend}
$ vim /etc/nginx/nginx.conf

将nginx.conf的内容替换成以下代码

user www;
worker_processes 1;

#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;

pid /var/run/nginx.pid;

worker_rlimit_nofile 65535;
events {
    worker_connections 65535;
    multi_accept on;
}


http {
    include mime.types;
    default_type application/octet-stream;

    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;

    keepalive_timeout 5;
    client_header_timeout 10;
    client_body_timeout 120;
    reset_timedout_connection on;
    send_timeout 3600;
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 64k;
    gzip_comp_level 6;
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_vary on;

    client_header_buffer_size 32k;
    large_client_header_buffers 4 64k;
    client_max_body_size 200m;

    open_file_cache max=100000 inactive=20s;
    open_file_cache_valid 30s;
    open_file_cache_min_uses 2;
    open_file_cache_errors on;

    resolver 10.202.72.118 10.202.72.116;
    lua_package_path '/opt/openresty/lualib/?.lua;;';
    lua_package_cpath '/opt/openresty/lualib/?.so;;';
    include conf/backend/*.enable;
    include conf/vhost/*.enable;
}

添加vhost的配置文件

$ vim /etc/nginx/vhost/tuku.enable

init_by_lua_file '/var/www/html/tadashigallery/script/init.lua';
server {
    listen 80;
    server_name tuku.linsongzheng.com;
    access_log logs/tuku.access.log main;
    error_log logs/tuku.error.log;
    root /var/www/html/tadashigallery;
    index index.html;
    location ~ ^/(query|add_folder|file_upload|delete_file|rename).html$ {
        default_type applcation/json;
        set $redirect_header 1;
        access_by_lua_file /var/www/html/tadashigallery/script/auth_check.lua; 
        content_by_lua_file /var/www/html/tadashigallery/script/$1.lua;
    }
    location /tuku/index.html {
        access_by_lua_file /var/www/html/tadashigallery/script/auth_check.lua;
        alias /var/www/html/tadashigallery/index.html;
    }
    location /login.html {
        default_type text/html;
        if ($request_method = POST) {
            content_by_lua_file /var/www/html/tadashigallery/script/login.lua;
        }
        alias /var/www/html/tadashigallery/login.html;
        if ($cookie_formhash = '') {
            access_by_lua "
                local ip = ngx.var.binary_remote_addr
                local hash = ngx.md5(ip .. (ngx.time() / 7200))
                ngx.header['Set-Cookie'] = {'formhash=' .. hash}
            ";
        }
    }
    encrypted_session_key "abcdefghijklmnopqrstuvwxyz123456";
    encrypted_session_iv "abcdefok12345678";
    encrypted_session_expires 1d;
    location /tuku_mysql {
        internal;
        add_header Access-Control-Allow-Origin *;
        set_unescape_uri $sql $arg_sql;
        drizzle_pass tuku;
        drizzle_module_header off;
        drizzle_connect_timeout 500ms;
        drizzle_send_query_timeout 2s;
        drizzle_recv_cols_timeout 1s;
        drizzle_recv_rows_timeout 1s;
        drizzle_query $sql;
        rds_json on;
    }
    location ~ \.(js|css)$ {
        expires 30d;
    }
}

添加drizzle后端配置文件

$ vim /etc/nginx/backend/tuku.enable

upstream tuku {
    drizzle_server 127.0.0.1:3306 dbname=db_tuku password=123456 user=tuku protocol=mysql;
}

修改TG的MYSQL配置和登录账号信息

$ vim /var/www/html/tadashigallery/script/init.lua

MYSQL = {
    host = '127.0.0.1',
    port = 3306,
    dbname = 'db_tuku',
    user = 'test',
    pwd = '123456'
}

TUKU = {
    user = 'tadashi', -- 登录用户名
    password = 'tuku123456' -- 登录密码
}

启动服务测试

启动http服务器

$ service openresty start

浏览器访问测试

登陆界面
detail

《Openresty+Lua开源的图库管理系统:Tadashi Gallery 0.9.8发布》有4个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注