nginx_image_filterを使って、s3上にある画像を簡単にリサイズしたりクロップしたりするサーバを作る的なお話

画像をリサイズして表示したいことって多々あると思う。
例えばそんな大きい画像を表示しないところでは横320pxやら、サムネイル一覧やら。

けどそれを作ろうとするとなると、基本的にはローカルの画像をごにょごにょしないといけない。
で、ごにょごにょしてheaderを弄って表示するって感じで中々に面倒だし、
ec2を使っているとなるとそもそも静的ファイルはs3に置いてあるからローカルに保存するとか手間だし、
何よりも生成したリサイズ画像を消さないとec2のサーバ容量を圧迫してしまうとか。

けどnginxのimage_filterを使う事で、そんな煩わしい事もないし、
むしろPHPでごにょごにょすることがなく簡単ということで、今日はそのお話をば。

■image_filterを使うためのvirtualhostの設定

nginxが既にインストールされている想定で。
されてなかったら下記のコマンドで一発。

yum -y install nginx

virtual.confとして/etc/nginx/conf/conf.d/virtual.confに作成。
image_filterの公式のドキュメント的なのはこちら

#
# A virtual host using mix of IP-, name-, and port-based configuration
#

server {
  listen 80;
  server_name www.hogehoge.com;
  root /var/www/html/;

  location ~* ^/resize/(\d+)/(.*)$ {
    proxy_pass http://hogehoge.s3.amazonaws.com;

    set $width $1;
    set $file $2;

    image_filter_buffer 5M;
    image_filter resize $width -;
    image_filter_jpeg_quality 100;

    rewrite ^ /img_folder/$file break;
  }

  location ~* ^/crop/(\d+)/(.*)$ {
    proxy_pass http://hogehoge.s3.amazonaws.com;

    set $width $1;
    set $file $2;

    image_filter_buffer 5M;
    image_filter crop $width $width;
    image_filter_jpeg_quality 100;

    rewrite ^ /img_folder/$file break;
  }

  location / {
    proxy_set_header Host               $host;
    proxy_set_header X-RealIP           $remote_addr;
    proxy_set_header X-Forwarded-Host   $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
    proxy_pass  http://localhost:8080;
  }
}

ってな感じでやれば大丈夫。
proxy_passが簡単に使えるのがnginxの特徴で、s3上にあるファイルを引っ張ってくる的な。
www.hogehoge.com/resize/リサイズしたい横幅/ファイル名にアクセスすれば、image_filterを通してs3上のimage_folder上のファイルを表示するっていう感じ。

ただ注意するべき点としては、image_filterを通したい画像よりも、大きくresizeしたい場合は適用されないっていう。
つまり元画像が640pxだった場合に、960pxにしたいと思っても出来ないっていう。
じゃあ拡大するにはどうするのかっていうことだけど、ngx_small_lightを使うとしたいことは出来るよ的な。
それについての記事はこちら

image_filterはec2のnginxリポジトリの標準機能として入っているので、
簡単に画像リサイズサーバーを作りたいっていうときにはimage_filterはかなり楽なのでオススメ的な。