$30 off During Our Annual Pro Sale. View Details »

Dynamic image transformation server Okara BETA

Teppei Yano
April 19, 2015
5.4k

Dynamic image transformation server Okara BETA

Teppei Yano

April 19, 2015
Tweet

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