Successfully reported this slideshow.

ngx_small_lightで動的サムネイル生成 #yapcasia2012

5,557 views

Published on

Published in: Technology
  • Be the first to comment

ngx_small_lightで動的サムネイル生成 #yapcasia2012

  1. 1. ngx_small_lightで動的サムネイル生成 Tatsuhiko Kubo cubicdaiya@gmail.com at YAPC::Asia 2012
  2. 2. 自己紹介• 久保 達彦 (bokko)• @cubicdaiya• インフラ兼ソフトウェアエンジニア@pixiv
  3. 3. ngx_small_light• 画像サムネイル生成サーバ with Nginx• サムネイルの生成パターンをURLで指定• mod_small_lightのNginx移植版
  4. 4. URLのパスを変えるだけで いろんなサムネイルを生成♪ /tank.jpg /small_light(p=medium)/tank.jpg /small_light(p=small)/tank.jpgオリジナル Mサイズ Sサイズ
  5. 5. 設定ファイルserver { listen 80; server_name localhost; # small_lightを有効にする small_light on; # 変換パターンを定義 small_light_pattern_define medium dw=500,dh=500; small_light_pattern_define small dw=120,dh=120; location ~ small_light[^/]*/(.+)$ { set $file $1; rewrite ^ /$file; }}
  6. 6. ngx_small_lightのディレクティブ
  7. 7. small_light• ngx_small_lightのon/off(デフォルトはoff)small_light on;
  8. 8. small_light_pattern_define • サムネイル生成パターンに名前を付けるsmall_light_pattern_define medium dw=500,dh=500; 以下の二つのURLは同じレスポンスを返すhttp://localhost/small_light(dw=500,dh=500)/tank.jpghttp;//localhost/small_light(p=medium)/tank.jpg dw, dh:生成するサムネイルの幅と高さ
  9. 9. small_light_material_dir • 合成用素材ディレクトリsmall_light_material_dir /var/materials; • embedicon, ix, iyと組み合わせて使うhttp://localhost/small_light(embedicon=icon.jpg,ix=0,iy=0)/tank.jpg • tank.jpgの座標(0, 0)に/var/materials/icon.jpgを埋め込む
  10. 10. 最後に • ngx_small_lightはgithubで公開中https://github.com/cubicdaiya/ngx_small_light •
  11. 11. おまけ
  12. 12. 僕がngx_small_light をつくったわけ
  13. 13. 去年、某社の技術資料を見た僕の当時の上司が、 サムネイルの動的生成か。 よし、うちもやろう!
  14. 14. 半年後
  15. 15. そういや、そんなことあったなぁ 一から書くの面倒だし、 mod_small_lightってのを使ってみよう
  16. 16. 二日後
  17. 17. 原型留めてないくらい改造したmod_small_lightを見せに行く bokko++ うちでも使えるように改造したよ∼♪
  18. 18. 原型留めてないくらい改造したmod_small_lightを見て・・・ ・・・ ♪ ♪♪
  19. 19. Nginxでやらない?
  20. 20. Nginxでやらない?
  21. 21. Nginxでやらない?
  22. 22. mod_small_lightに約350行の巨大パッチあてた次の日に
  23. 23. mod_small_lightに 約350行の巨大パッチあてた次の日にNginxでやらない?
  24. 24. mod_small_lightに 約350行の巨大パッチあてた次の日にNginxでやらない? 大事なことなので三回言いました
  25. 25. mod_small_lightにあてた 約350行の巨大パッチ
  26. 26. mod_small_lightにあてた 約350行の巨大パッチパッチってレベルじゃねぇ!!!
  27. 27. そもそもの前提として• 当時既にpixiv内のHTTPサーバは大体 ApacheからNginxに置き換わってた
  28. 28. 結局、 そうするか Apacheで いきましょう@cubicdaiya @kamipo
  29. 29. 半年後
  30. 30. ngx_small_lightリリース
  31. 31. 当時の弊社のNginxマスターからの反応
  32. 32. ngx_small_lightはこうして生まれました!
  33. 33. 一部誇張されていますが 概ね事実です!!!
  34. 34. ご静聴ありがとございました

×