おから(仮)ngx_small_light と ngx_mrubyで作る動的画像変換サーバ2015-04-19第1回ペパボテックカンファレンス@yano3
View Slide
自己紹介矢野 哲平 (@yano3 / やのさん)● EC事業部(少し前までカラメル)● バックエンド寄り中心にいろいろ○ Solr(全文検索エンジン)○ 動的画像変換
目次● 動的画像変換とは● 動的画像変換導入のメリット● 動的画像変換サーバおから(仮)
動的画像変換とは
従来の(よくある)画像変換アップロード時に S, M, L のように数パターンのリサイズ済み画像を作成(静的)
例35689801_large.jpg35689801_thumb.jpg35689801_small.jpg
動的画像変換● アップロード時は変換しないでそのまま○ もしくは十分な解像度を保った1サイズだけ変換● リクエストのタイミングで必要なサイズの画像を作成● 同サイズに再度リクエストが来る場合に備えてキャッシュ
例ブラウザ動的画像変換サーバ300x300px 150x150px 50x50pxオリジナル画像
動的画像変換のメリット
メリット● デザインの自由度○ いつでも画像サイズの変更を伴うデザインの変更ができる○ 大量の画像(例えばカラメル1800万商品)の再変換はすごく大変!!● Retina ディスプレイ等の新しいデバイスへの対応が容易
メリット● 適正な転送量○ 転送コストの削減■ 負荷(大事)■ お金(すごく大事)○ ユーザビリティ向上(読み込み速い!)
動的画像変換サーバおから(仮)
おから(仮)動的画像変換サーバ(プロキシ)● 幅、高さを指定してリサイズ● 画像形式の変換(jpeg, png, webp)● 品質の指定(不可逆圧縮な形式の場合)● 他...
おから(仮)URL 例http://d3ndjch8hfnps9.cloudfront.net/calamel/product/300x300cq80/92d05e13ff804d006ee4e8a2960d0dc85ea0cf5d.jpg/img17.shop-pro.jp/PA01149/951/product/35689801.jpg
おから(仮)変換コマンド(サイズ等)http://d3ndjch8hfnps9.cloudfront.net/calamel/product/300x300cq80/92d05e13ff804d006ee4e8a2960d0dc85ea0cf5d.jpg/img17.shop-pro.jp/PA01149/951/product/35689801.jpg
おから(仮)秘密のハッシュ値(後述)http://d3ndjch8hfnps9.cloudfront.net/calamel/product/300x300cq80/92d05e13ff804d006ee4e8a2960d0dc85ea0cf5d.jpg/img17.shop-pro.jp/PA01149/951/product/35689801.jpg
おから(仮)画像形式http://d3ndjch8hfnps9.cloudfront.net/calamel/product/300x300cq80/92d05e13ff804d006ee4e8a2960d0dc85ea0cf5d.jpg/img17.shop-pro.jp/PA01149/951/product/35689801.jpg
おから(仮)オリジナル画像の URLhttp://d3ndjch8hfnps9.cloudfront.net/calamel/product/300x300cq80/92d05e13ff804d006ee4e8a2960d0dc85ea0cf5d.jpg/img17.shop-pro.jp/PA01149/951/product/35689801.jpg
おから(仮)使っている技術● Nginx● ngx_small_light● ngx_mruby● CDN
ngx_small_light
ngx_small_lightngx_small_light is a dynamic image transformation modulefor nginx.https://github.com/cubicdaiya/ngx_small_light より引用URL 例● http://localhost/small_light(dw=300,dh=300)/img/image.jpg
ngx_small_lightNginx に ngx_small_light を組み込んでビルドするだけで動的画像変換サーバを作れるが...
ngx_small_lightサービスの一部として提供するにあたっての問題点● URL の仕様変えたい● URL をいじって誰でも自由に変換できてしまうのはマズい
ngx_mruby
ngx_mrubyngx_mruby is A Fast and Memory-Efficient Web ServerExtension Mechanism Using Scripting Language mruby fornginx.https://github.com/matsumoto-r/ngx_mruby より引用
ngx_mruby● Nginx を mruby スクリプトで制御● mruby は軽量な Ruby 実装● CRuby すべての機能は持たないが mrbgemで拡張可能
ngx_mruby問題点のおさらい● URL の仕様変えたい● URL をいじって誰でも自由に変換できてしまうのはマズい
ngx_mrubyURL 変換(おから → ngx_small_light)● Nginx の設定ファイルで実現するのは辛い● mruby なら正規表現等使ってラクラク
ngx_mrubyコード例(簡略化しています)
ngx_mruby● 正規表現● mattn/mruby-onig-regexp
ngx_mrubyURL の有効性の確認● http_secure_link_module 等もあるがハッシュ関数が md5 固定だったり制限あり● mruby ならハッシュ関数もいろいろ使える
ngx_mruby● sha1 ダイジェストの計算● iij/mruby-digest
まとめ
まとめ● 動的画像変換でサービス提供者もユーザーも幸せ● ngx_small_light 簡単動的画像変換● ngx_mruby で便利に拡張