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

背景

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

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

環境/構成

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

大凡の導入

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