Dynamic image transformation server Okara BETA

5a2b3cc2950f3ee86d535e561ffd72a5?s=47 Teppei Yano
April 19, 2015
4.7k

Dynamic image transformation server Okara BETA

5a2b3cc2950f3ee86d535e561ffd72a5?s=128

Teppei Yano

April 19, 2015
Tweet

Transcript

  1. おから(仮) ngx_small_light と ngx_mruby で作る動的画像変換サーバ 2015-04-19 第1回ペパボテックカンファレンス @yano3

  2. 自己紹介 矢野 哲平 (@yano3 / やのさん) • EC事業部(少し前までカラメル) • バックエンド寄り中心にいろいろ

    ◦ Solr(全文検索エンジン) ◦ 動的画像変換
  3. 目次 • 動的画像変換とは • 動的画像変換導入のメリット • 動的画像変換サーバおから(仮)

  4. 動的画像変換とは

  5. 従来の(よくある)画像変換 アップロード時に S, M, L のように数パターンのリ サイズ済み画像を作成(静的)

  6. 例 35689801_large.jpg 35689801_thumb.jpg 35689801_small.jpg

  7. 動的画像変換 • アップロード時は変換しないでそのまま ◦ もしくは十分な解像度を保った1サイズだけ変換 • リクエストのタイミングで必要なサイズの画像を 作成 • 同サイズに再度リクエストが来る場合に備えて

    キャッシュ
  8. 例 ブラウザ 動的画像変換サーバ 300x300px 150x150px 50x50px オリジナル画像

  9. 動的画像変換のメリット

  10. メリット • デザインの自由度 ◦ いつでも画像サイズの変更を伴うデザインの変更ができ る ◦ 大量の画像(例えばカラメル1800万商品)の再変換は すごく大変!! •

    Retina ディスプレイ等の新しいデバイスへの対 応が容易
  11. メリット • 適正な転送量 ◦ 転送コストの削減 ▪ 負荷(大事) ▪ お金(すごく大事) ◦

    ユーザビリティ向上(読み込み速い!)
  12. 動的画像変換サーバ おから(仮)

  13. おから(仮) 動的画像変換サーバ(プロキシ) • 幅、高さを指定してリサイズ • 画像形式の変換(jpeg, png, webp) • 品質の指定(不可逆圧縮な形式の場合)

    • 他...
  14. おから(仮) URL 例 http://d3ndjch8hfnps9.cloudfront. net/calamel/product/300x300cq80/92d05e13ff804d006ee4e 8a2960d0dc85ea0cf5d.jpg/img17.shop-pro. jp/PA01149/951/product/35689801.jpg

  15. おから(仮) 変換コマンド(サイズ等) http://d3ndjch8hfnps9.cloudfront. net/calamel/product/300x300cq80/92d05e13ff804d006ee4 e8a2960d0dc85ea0cf5d.jpg/img17.shop-pro. jp/PA01149/951/product/35689801.jpg

  16. おから(仮) 秘密のハッシュ値(後述) http://d3ndjch8hfnps9.cloudfront. net/calamel/product/300x300cq80/92d05e13ff804d006ee4 e8a2960d0dc85ea0cf5d.jpg/img17.shop-pro. jp/PA01149/951/product/35689801.jpg

  17. おから(仮) 画像形式 http://d3ndjch8hfnps9.cloudfront. net/calamel/product/300x300cq80/92d05e13ff804d006ee4e 8a2960d0dc85ea0cf5d.jpg/img17.shop-pro. jp/PA01149/951/product/35689801.jpg

  18. おから(仮) オリジナル画像の URL http://d3ndjch8hfnps9.cloudfront. net/calamel/product/300x300cq80/92d05e13ff804d006ee4e 8a2960d0dc85ea0cf5d.jpg/img17.shop-pro. jp/PA01149/951/product/35689801.jpg

  19. おから(仮) 使っている技術 • Nginx • ngx_small_light • ngx_mruby • CDN

  20. ngx_small_light

  21. ngx_small_light ngx_small_light is a dynamic image transformation module for nginx.

    https://github.com/cubicdaiya/ngx_small_light より引用 URL 例 • http://localhost/small_light(dw=300,dh=300)/img/image.jpg
  22. ngx_small_light Nginx に ngx_small_light を組み込んでビルドす るだけで動的画像変換サーバを作れるが...

  23. ngx_small_light サービスの一部として提供するにあたっての問題 点 • URL の仕様変えたい • URL をいじって誰でも自由に変換できてしまう のはマズい

  24. ngx_mruby

  25. ngx_mruby ngx_mruby is A Fast and Memory-Efficient Web Server Extension

    Mechanism Using Scripting Language mruby for nginx. https://github.com/matsumoto-r/ngx_mruby より引用
  26. ngx_mruby • Nginx を mruby スクリプトで制御 • mruby は軽量な Ruby

    実装 • CRuby すべての機能は持たないが mrbgem で拡張可能
  27. ngx_mruby 問題点のおさらい • URL の仕様変えたい • URL をいじって誰でも自由に変換できてしまう のはマズい

  28. ngx_mruby URL 変換(おから → ngx_small_light) • Nginx の設定ファイルで実現するのは辛い • mruby

    なら正規表現等使ってラクラク
  29. ngx_mruby コード例(簡略化し ています)

  30. ngx_mruby • 正規表現 • mattn/mruby-onig-regexp

  31. ngx_mruby URL の有効性の確認 • http_secure_link_module 等もあるがハッシュ 関数が md5 固定だったり制限あり •

    mruby ならハッシュ関数もいろいろ使える
  32. ngx_mruby コード例(簡略化し ています)

  33. ngx_mruby • sha1 ダイジェストの計算 • iij/mruby-digest

  34. まとめ

  35. まとめ • 動的画像変換でサービス提供者もユー ザーも幸せ • ngx_small_light 簡単動的画像変換 • ngx_mruby で便利に拡張