Dynamic image transformation server Okara BETA

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 で便利に拡張