Dynamic image transformation server Okara BETA

Transcript

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

   View Slide

2. 自己紹介
   矢野 哲平 （@yano3 / やのさん）
   ● EC事業部（少し前までカラメル）
   ● バックエンド寄り中心にいろいろ
   ○ Solr（全文検索エンジン）
   ○ 動的画像変換
   

   View Slide

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

   View Slide

4. 動的画像変換とは
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. メリット
    ● デザインの自由度
    ○ いつでも画像サイズの変更を伴うデザインの変更ができ
    る
    ○ 大量の画像（例えばカラメル1800万商品）の再変換は
    すごく大変！！
    ● Retina ディスプレイ等の新しいデバイスへの対
    応が容易
    

    View Slide

11. メリット
    ● 適正な転送量
    ○ 転送コストの削減
    ■ 負荷（大事）
    ■ お金（すごく大事）
    ○ ユーザビリティ向上（読み込み速い！）
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. ngx_small_light
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

24. ngx_mruby
    

    View Slide

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 より引用
    

    View Slide

26. ngx_mruby
    ● Nginx を mruby スクリプトで制御
    ● mruby は軽量な Ruby 実装
    ● CRuby すべての機能は持たないが mrbgem
    で拡張可能
    

    View Slide

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

    View Slide

28. ngx_mruby
    URL 変換（おから → ngx_small_light）
    ● Nginx の設定ファイルで実現するのは辛い
    ● mruby なら正規表現等使ってラクラク
    

    View Slide

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

    View Slide

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

    View Slide

31. ngx_mruby
    URL の有効性の確認
    ● http_secure_link_module 等もあるがハッシュ
    関数が md5 固定だったり制限あり
    ● mruby ならハッシュ関数もいろいろ使える
    

    View Slide

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

    View Slide

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

    View Slide

34. まとめ
    

    View Slide

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

    View Slide