Symfoware

Symfowareについての考察blog

nginxで動的に画像をリサイズする(ngx_small_light使用)

パラメーター付きで画像をリクエストすると、リサイズして
画像を返してくれる機能が欲しかったので調べてみました。



ngx_small_light



ngx_small_light

ImageMagick、Imlib2、GDから好きなライブラリを選んで
画像のリサイズが行えます。

Debian 7にインストールしてみます。

※既存の環境にインストールしているので手順を省略していますが、
nginxをビルドする都合上、makeやg++のインストールが必要です。
はじめてのアマゾンウェブサービス(AWS) nginxのインストールと外部公開


nginxのソースを取得して展開。


# cd /usr/local/src
# wget http://nginx.org/download/nginx-1.6.2.tar.gz
# tar zxf nginx-1.6.2.tar.gz




gitコマンドでngx_small_lightを取得。


# git clone https://github.com/cubicdaiya/ngx_small_light.git




ngx_small_lightに移動して、setupを実行。


# cd /usr/local/src/ngx_small_light
# ./setup
Wand-config is not found




「Wand-config」が見つからないって言われます。

これ、ImageMagickのライブラリのことのようです。
こちらを参考にインストールしました。

How to install rmagick on Ubuntu 10.04?


# apt-get install libmagickwand-dev




インストール後、setupを実行するとconfigが生成されました。


# ./setup
config is generated.






GDを使用したい場合は、「--with-gd」オプションをつけてsetupを実行します。


# ./setup --with-gd
gdlib-config is not found




上記エラーが発生する場合は、libgd2-noxpm-devをインストールします。


# apt-get install libgd2-noxpm-dev







imlib2を使用したい場合は、「--with-imlib2」オプションをつけてsetupを実行します。


# ./setup --with-imlib2
imlib2-config is not found




上記エラーが発生する場合はlibimlib2-devをインストールします。


# apt-get install libimlib2-dev




今回は、全て試してみたかったので


# ./setup --with-gd --with-imlib2



というオプションでconfigを生成しました。



nginxのソースフォルダに移動し、configureを実行、インストールします。
--add-moduleの指定を忘れずに。


# cd ../nginx-1.6.2
# ./configure --prefix=/opt/nginx --add-module=../ngx_small_light
# make
# make install




これで準備完了です。





nginxの設定




起動用に、/etc/init.d/nginxを作成。
内容はこんなかんじです。


#!/bin/sh

### BEGIN INIT INFO
# Provides:         nginx
# Required-Start:    $local_fs $remote_fs $network $syslog
# Required-Stop:     $local_fs $remote_fs $network $syslog
# Default-Start:     2 3 4 5
# Default-Stop:     0 1 6
# Short-Description: starts the nginx web server
# Description:     starts nginx using start-stop-daemon
### END INIT INFO

PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin
DAEMON=/opt/nginx/sbin/nginx
NAME=nginx
DESC=nginx

# Include nginx defaults if available
if [ -f /etc/default/nginx ]; then
    . /etc/default/nginx
fi

test -x $DAEMON || exit 0

set -e

. /lib/lsb/init-functions

test_nginx_config() {
    if $DAEMON -t $DAEMON_OPTS >/dev/null 2>&1; then
        return 0
    else
        $DAEMON -t $DAEMON_OPTS
        return $?
    fi
}

case "$1" in
    start)
        echo -n "Starting $DESC: "
        test_nginx_config
        # Check if the ULIMIT is set in /etc/default/nginx
        if [ -n "$ULIMIT" ]; then
            # Set the ulimits
            ulimit $ULIMIT
        fi
        start-stop-daemon --start --quiet --pidfile /var/run/$NAME.pid \
            --exec $DAEMON -- $DAEMON_OPTS || true
        echo "$NAME."
        ;;

    stop)
        echo -n "Stopping $DESC: "
        start-stop-daemon --stop --quiet --pidfile /var/run/$NAME.pid \
            --exec $DAEMON || true
        echo "$NAME."
        ;;

    restart|force-reload)
        echo -n "Restarting $DESC: "
        start-stop-daemon --stop --quiet --pidfile \
            /var/run/$NAME.pid --exec $DAEMON || true
        sleep 1
        test_nginx_config
        # Check if the ULIMIT is set in /etc/default/nginx
        if [ -n "$ULIMIT" ]; then
            # Set the ulimits
            ulimit $ULIMIT
        fi
        start-stop-daemon --start --quiet --pidfile \
            /var/run/$NAME.pid --exec $DAEMON -- $DAEMON_OPTS || true
        echo "$NAME."
        ;;

    reload)
        echo -n "Reloading $DESC configuration: "
        test_nginx_config
        start-stop-daemon --stop --signal HUP --quiet --pidfile /var/run/$NAME.pid \
            --exec $DAEMON || true
        echo "$NAME."
        ;;

    configtest|testconfig)
        echo -n "Testing $DESC configuration: "
        if test_nginx_config; then
            echo "$NAME."
        else
            exit $?
        fi
        ;;

    status)
        status_of_proc -p /var/run/$NAME.pid "$DAEMON" nginx && exit 0 || exit $?
        ;;
    *)
        echo "Usage: $NAME {start|stop|restart|reload|force-reload|status|configtest}" >&2
        exit 1
        ;;
esac

exit 0




/opt/nginx/conf/nginx.confを編集します。
最小構成でざっくりこんな感じ。


user www-data;
worker_processes 1;

pid        /var/run/nginx.pid;

events {
    worker_connections 1024;
}


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

    sendfile        on;
    keepalive_timeout 65;

    server {
        listen     80;
        server_name localhost;

        #charset koi8-r;

        #access_log logs/host.access.log main;

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


    }

}




/etc/init.d/nginxに実行許可を付与して、起動してみます。


# chmod +x /etc/init.d/nginx
# /etc/init.d/nginx start



ブラウザで、http://[サーバーIP]/が表示できればOKです。






ngx_small_lightの設定



ちょっと大きめの画像が欲しかったので、こちらのサンプルでリサイズを試してみます。
http://www.yunphoto.net/jp/photobase/hr/hr3502.html

/var/www/img/sample.jpgという名前で保存しました。
権限を付与しておきます。


# chown -R www-data:www-data /var/www/img




サンプルのままですが、/opt/nginx/conf/nginx.confを編集。


user www-data;
worker_processes 1;

pid        /var/run/nginx.pid;

events {
    worker_connections 1024;
}


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

    sendfile        on;
    keepalive_timeout 65;
    
    server {
        listen     80;
        server_name localhost;
        root /var/www;
        
        # small_lightを有効化
        small_light on;
        small_light_pattern_define msize dw=500,dh=500,da=l,q=95,e=imagemagick,jpeghint=y;
        small_light_pattern_define ssize dw=120,dh=120,da=l,q=95,e=imlib2,jpeghint=y;

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


    }

}




nginxを再起動。


# /etc/init.d/nginx restart




http://[サーバーIP]/small_light([オプション])/[画像パス]という形式でアクセスします。


http://192.168.1.101/small_light(p=msize)/img/sample.jpg

596_01.png


http://192.168.1.101/small_light(p=ssize)/img/sample.jpg

596_02.png


http://192.168.1.101/small_light(dw=250,dh=250,da=l,q=95,e=imagemagick,jpeghint=y)/img/sample.jpg

596_03.png


いい感じです。

次は、オプションの詳細や高速化について考えてみたいと思います。




関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2015/03/13(金) 21:16:44|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<nginx + ngx_small_lightの高速化対応 | ホーム | EC2 + PHPで構築したサイトにアップロードしたファイルをAmazonS3に保存する>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1690-d8afc38d
この記事にトラックバックする(FC2ブログユーザー)