ngx_small_light

6,117 views

Published on

Introduction of ngx_small_light

Published in: Technology

ngx_small_light

  1. 1. 久保達彦 bokko@pixiv.com ngx_small_light 13年7月8日月曜日
  2. 2. 自己紹介 ✦ 久保 達彦(bokko) ✦ @cubicdaiya(twitter, github) ✦ Senior Software Engineer@pixiv Inc. ◎主な担当分野  〇ミドルウェアの開発・運用  〇インフラ  〇その他色々 13年7月8日月曜日
  3. 3. 最近の活動 ◎自分で開発・公開中  〇ngx_small_light  〇ngx_access_token  〇neoagent(Memcached Proxy) ◎開発に参加・パッチ提供等  〇ngx_mruby  〇mod_small_light  〇nginx etc.... 13年7月8日月曜日
  4. 4. ngx_small_light 13年7月8日月曜日
  5. 5. ngx_small_light ✦ nginxモジュール ✦ nginxで動的なサムネイル生成ができる ✦ mod_small_lightをNginxに移植 ✦ ImageMagick、Imlib2、GDをサポート ✦ 今ではmod_small_lightよりも高機能 13年7月8日月曜日
  6. 6. ngx_small_lightでできること ✦ 画像のリサイズ・クロップ・合成 ✦ フォーマット変換(例:PNG -> JPEG) ✦ ブラー・(アン)シャープ加工 ✦ etc 13年7月8日月曜日
  7. 7. Setup And Install 〇 Install 〇 Setup 13年7月8日月曜日
  8. 8. Quick Start # in server context 元画像のURI /img/image.jpg 変換用のURI /small_light(dw=300,dh=300)/img/image.jpg 13年7月8日月曜日
  9. 9. ディレクティブ一覧 small_light ngx_small_lightのOn/Off small_light_pattern_define サムネイル生成パターン名の定義 small_light_material_dir 画像合成用素材の配置ディレクトリ small_light_imlib2_temp_dir テンポラリファイルディレクトリ(Imlib2用) 13年7月8日月曜日
  10. 10. ngx_small_lightを有効にする # in main, server, location context 13年7月8日月曜日
  11. 11. サムネイル生成パターンの定義 # in server context ■以下のURIは同じレスポンス(サムネイル)を返す → 13年7月8日月曜日
  12. 12. small_light_material_dir ■設定 ■URI image.jpg icon.jpg + = (The icon.jpg is in /var/materials.) 13年7月8日月曜日
  13. 13. small_light_imlib2_temp_dir ✦ Imlib2が生成するテンポラリファイルの保存場所 ✦ Imlib2はファイル単位でしか画像を扱えないので このディレクティブが存在する ✦ 設定の書式はproxy_temp_pathと一緒 # default setting 13年7月8日月曜日
  14. 14. 基本的なパラメータ dw, dh 生成するサムネイルの幅と高さ of 生成するサムネイルのフォーマット(jpg,png,gif等) q 画質(quality) da 生成するサムネイルのアスペクト比(da=l ->長辺基準, etc) ds 生成するサムネイルのスケーリング(da=s -> 拡大, etc) p 定義されたサムネイルパターンを代入 e 画像変換ライブラリを指定(imagemagick,imlib2,gd) jpeghint JPEG画像の読み込み時のダウンスケーリングによる最適化を有効にする 13年7月8日月曜日
  15. 15. Configuration Guide https://github.com/cubicdaiya/ngx_small_light/wiki/Configuration 13年7月8日月曜日
  16. 16. オリジナルの開発者による公開資料 http://www.slideshare.net/livedoor/smalllight2 13年7月8日月曜日
  17. 17. オリジナルの開発者による公開資料 http://www.slideshare.net/livedoor/smalllight2 細かい違いはあるけど大体一緒です 13年7月8日月曜日
  18. 18. mod_small_lightとの違い 〇ofが指定されてない場合、入力・出力フォーマットが同じ  ◎mod_small_lightはofがないと常にJPEG 〇pの値を上書きできない  ◎small_light(p=embed,dw=300) ←embedパターン内のdwが優先される 〇X-SmallLight-Descriptionヘッダを吐かない 〇GDサポートの有無(mod_small_lightはImageMagickとImlib2のみ) 〇etc... 13年7月8日月曜日
  19. 19. ngx_small_lightの類似モジュール ✦ Nginx Image Filter(Official Module!) ✦ ngx-gm-filter 13年7月8日月曜日
  20. 20. ngx_small_lightとの違い 〇変換ライブラリがGDまたはGraphicsMagickオンリー 〇変換に必要なパラメータをリクエストパラメータあるいは  Nginxの変数で受け取ってディレクティブに渡す 〇モジュールの実装は簡単にしてnginx.confで頑張る感じ 13年7月8日月曜日
  21. 21. Nginx Image Filterとngx_small_light 13年7月8日月曜日
  22. 22. ユースケースで比較 ✦ /resize/img/${type}/image.jpgでアクセス ✦ ${type}はmsizeとssizeの二種類 ✦ 画像データはlocal(nginxのサーバ内)にある 13年7月8日月曜日
  23. 23. Nginx Image Filter 13年7月8日月曜日
  24. 24. ngx_small_light 13年7月8日月曜日
  25. 25. ngx_small_light(ホントはこう書きたい) 13年7月8日月曜日
  26. 26. Nginx Image Filter ✦ 変数の使い方次第でかなり柔軟な設定ができる ✦ 設定が複雑になりがち(変数だらけになりやすい) ✦ 画像変換エンジンが一種類 ✦ 機能(パラメータ)少なめ 13年7月8日月曜日
  27. 27. ngx_small_light ✦ 比較的シンプルに書ける ✦ 機能(パラメータ)豊富 ✦ 画像変換エンジンが三種類 ✦ 画像データがローカルにあってもproxy_pass  しないといけないケースが(´・ω・`) 13年7月8日月曜日
  28. 28. 最後に 動的サムネイル生成は 基本的に重いので前段で キャッシュするのがマナーです pixivではNginxとApache Traffic Serverで 頑張ってキャッシュしてます 13年7月8日月曜日

×