nginx(EC2)とngx_small_lightで画像をリサイズしてs3でcacheしたい - その1

背景

こんなの作ろうとしてる。

  • URLに幅と高さを入れて自動的にリサイズしてくれるサーバ
  • リサイズした画像をcacheしてくれるサーバ

環境/構成

  • AWS VPC内のEC2(Amazon Linux)
  • AWS s3に画像を保存する
  • nginx1.8.1
  • nginxsmalllight

大凡の導入

OSはAmazon Linuxだけど残念ながらyumは使えない。nginxをオプション付きでBuildする。なぁに、昔を思い出せば…/usr/local/nginx 以下にインストールされる。

[ec2-user@ip-vpc ~]$ wget http://nginx.org/download/nginx-1.8.1.tar.gz
[ec2-user@ip-vpc ~]$ tar zxfv nginx-1.8.1.tar.gz
[ec2-user@ip-vpc ~]$ cd nginx-1.8.1
[ec2-user@ip-vpc nginx-1.8.1]$ git clone https://github.com/cubicdaiya/ngx_small_light.git
[ec2-user@ip-vpc nginx-1.8.1]$ cd ngx_small_light/
[ec2-user@ip-vpc ngx_small_light]$ ./setup --with-imlib2 --with-gd
[ec2-user@ip-vpc ngx_small_light]$ ngx_small_light=`pwd`
[ec2-user@ip-vpc ngx_small_light]$ cd ..
[ec2-user@ip-vpc nginx-1.8.1]$ ./configure --with-pcre --add-module=$ngx_small_light --user=nginx --group=nginx --with-http_image_filter_module
[ec2-user@ip-vpc nginx-1.8.1]$ make
[ec2-user@ip-vpc nginx-1.8.1]$ sudo make install

/etc/init.d/nginx

起動スクリプトとか。これをchmod +xとかしておく。するとおなじみのsudo service nginx start|stop|statusが使えるヤツね。

#!/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
# config:         /etc/nginx/nginx.conf
# config:         /etc/sysconfig/nginx
# pidfile:        /var/run/nginx.pid

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

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

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

nginx="/usr/local/nginx/sbin/nginx"
prog=$(basename $nginx)

NGINX_CONF_FILE="/usr/local/nginx/conf/nginx.conf"

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

lockfile=/var/lock/subsys/nginx

make_dirs() {
        # make required directories
        user=`$nginx -V 2>&1 | grep "configure arguments:" | sed 's/[^*]*--user=\([^ ]*\).*/\1/g' -`
        if [ -z "`grep $user /etc/passwd`" ]; then
            useradd -M -s /bin/nologin $user
        fi
        options=`$nginx -V 2>&1 | grep 'configure arguments:'`
        for opt in $options; do
            if [ `echo $opt | grep '.*-temp-path'` ]; then
                value=`echo $opt | cut -d "=" -f 2`
                if [ ! -d "$value" ]; then
                    # echo "creating" $value
                    mkdir -p $value && chown -R $user $value
                fi
            fi
        done
}

start() {
    [ -x $nginx ] || exit 5
    [ -f $NGINX_CONF_FILE ] || exit 6
    make_dirs
    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
}

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|configtest)
        $1
        ;;
    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|configtest}"
        exit 2
esac

/usr/local/nginx/conf/nginx.conf

proxy_pass は任意のs3 bucketを公開して使う感じで。あと、テスト用画像をs3にアップロードするのも忘れずに。

user  nginx nginx;
worker_processes  1;

events {
    worker_connections  1024;
}


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

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen     80;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }

        # enable ngx_small_light
        small_light on;

        # build ngx_small_light URL
        location ~ ^/w/(.+)/h/(.+)/(.+)$ {
                set $width $1;
                set $height $2;
                set $file $3;
                # image generator engine: "imagemagick" by default.  You may use "gd" or "imlib2" if installed
                set $engine "imagemagick";
                proxy_pass http://127.0.0.1/small_light(dw=$width,dh=$height,e=$engine)/images/$file;
        }

        location ~ small_light[^/]*/(.+)$ {
                set $file $1;
                rewrite ^ /$file;
        }

        # Redirect urls below /images to S3 bucket via reverse proxy
        # Like: /images/foo.png -> s3://bucketname/foo.png
        location /images/ {
                proxy_pass http://******.s3-website-ap-northeast-1.amazonaws.com/;
        }

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

実際にURL叩いてみる

例えばhttp://yourdomain.com/w/1000/h/564/test.jpgを叩くとhttp://******.s3-website-ap-northeast-1.amazonaws.com/test.jpgを1000 * 564pxにリサイズしてreverse proxyが返してくれる。

課題(ToDo)

  • ファイルをs3にcacheする→ proxy_cache でLocalにcacheはできるんだろうけどs3ってどうしたらいいんだろう。s3fsとか使いたくない…
Written on February 5, 2016