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

34
ngx_small_lightで 動的サムネイル生成 Tatsuhiko Kubo [email protected] at YAPC::Asia 2012

Upload: tatsuhiko-kubo

Post on 23-Jun-2015

4.472 views

Category:

Technology


0 download

TRANSCRIPT

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

ngx_small_lightで動的サムネイル生成

Tatsuhiko [email protected] YAPC::Asia 2012

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

自己紹介• 久保 達彦 (bokko)• @cubicdaiya• インフラ兼ソフトウェアエンジニア@pixiv

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

ngx_small_light

•画像サムネイル生成サーバ with Nginx• サムネイルの生成パターンをURLで指定• mod_small_lightのNginx移植版

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

URLのパスを変えるだけでいろんなサムネイルを生成♪

/tank.jpg /small_light(p=medium)/tank.jpg /small_light(p=small)/tank.jpg

オリジナル Mサイズ Sサイズ

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

設定ファイル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; }}

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

ngx_small_lightのディレクティブ

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

small_light

• ngx_small_lightのon/off(デフォルトはoff)small_light on;

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

small_light_pattern_define

•サムネイル生成パターンに名前を付ける

以下の二つのURLは同じレスポンスを返す

small_light_pattern_define medium dw=500,dh=500;

dw, dh:生成するサムネイルの幅と高さ

http://localhost/small_light(dw=500,dh=500)/tank.jpghttp;//localhost/small_light(p=medium)/tank.jpg

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

small_light_material_dir

• 合成用素材ディレクトリ

• embedicon, ix, iyと組み合わせて使う

small_light_material_dir /var/materials;

tank.jpgの座標(0, 0)に/var/materials/icon.jpgを埋め込む

http://localhost/small_light(embedicon=icon.jpg,ix=0,iy=0)/tank.jpg

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

最後に

•ngx_small_lightはgithubで公開中

https://github.com/cubicdaiya/ngx_small_light

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

おまけ

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

僕がngx_small_lightをつくったわけ

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

去年、某社の技術資料を見た僕の当時の上司が、

サムネイルの動的生成か。よし、うちもやろう!

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

半年後

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

そういや、そんなことあったなぁ

一から書くの面倒だし、mod_small_lightってのを使ってみよう

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

二日後

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

原型留めてないくらい改造したmod_small_lightを見せに行く

うちでも使えるように改造したよ~♪

bokko++

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

原型留めてないくらい改造したmod_small_lightを見て・・・

♪ ♪♪

・・・

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

Nginxでやらない?

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

Nginxでやらない?

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

Nginxでやらない?

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

mod_small_lightに約350行の巨大パッチあてた次の日に

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

Nginxでやらない?

mod_small_lightに約350行の巨大パッチあてた次の日に

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

Nginxでやらない?

mod_small_lightに約350行の巨大パッチあてた次の日に

大事なことなので三回言いました

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

mod_small_lightにあてた約350行の巨大パッチ

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

mod_small_lightにあてた約350行の巨大パッチ

パッチってレベルじゃねぇ!!!

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

そもそもの前提として

•当時既にpixiv内のHTTPサーバは大体ApacheからNginxに置き換わってた

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

結局、

Apacheでいきましょう

そうするか

@kamipo@cubicdaiya

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

半年後

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

ngx_small_lightリリース

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

当時の弊社のNginxマスターからの反応

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

ngx_small_lightはこうして生まれました!

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

一部誇張されていますが概ね事実です!!!

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

ご静聴ありがとございました