Dynamic image transformation server Okara BETA

Transcript

1. 1.

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

2. 2.

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

   ◦ Solr（全文検索エンジン） ◦ 動的画像変換
3. 3.

   目次 • 動的画像変換とは • 動的画像変換導入のメリット • 動的画像変換サーバおから（仮）

4. 4.

   動的画像変換とは

5. 5.

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

6. 6.

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

7. 7.

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

   キャッシュ
8. 8.

   例 ブラウザ 動的画像変換サーバ 300x300px 150x150px 50x50px オリジナル画像

9. 9.

   動的画像変換のメリット

10. 10.

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

    Retina ディスプレイ等の新しいデバイスへの対 応が容易
11. 11.

    メリット • 適正な転送量 ◦ 転送コストの削減 ▪ 負荷（大事） ▪ お金（すごく大事） ◦

    ユーザビリティ向上（読み込み速い！）
12. 12.

    動的画像変換サーバ おから（仮）

13. 13.

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

    • 他...
14. 14.

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

15. 15.

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

16. 16.

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

17. 17.

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

18. 18.

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

19. 19.

    おから（仮） 使っている技術 • Nginx • ngx_small_light • ngx_mruby • CDN

20. 20.

    ngx_small_light

21. 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. 22.

    ngx_small_light Nginx に ngx_small_light を組み込んでビルドす るだけで動的画像変換サーバを作れるが...

23. 23.

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

24. 24.

    ngx_mruby

25. 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. 26.

    ngx_mruby • Nginx を mruby スクリプトで制御 • mruby は軽量な Ruby

    実装 • CRuby すべての機能は持たないが mrbgem で拡張可能
27. 27.

    ngx_mruby 問題点のおさらい • URL の仕様変えたい • URL をいじって誰でも自由に変換できてしまう のはマズい

28. 28.

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

    なら正規表現等使ってラクラク
29. 29.

    ngx_mruby コード例（簡略化し ています）

30. 30.

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

31. 31.

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

    mruby ならハッシュ関数もいろいろ使える
32. 32.

    ngx_mruby コード例（簡略化し ています）

33. 33.

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

34. 34.

    まとめ

35. 35.

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