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