Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Dynamic image transformation server Okara BETA
Teppei Yano
April 19, 2015
1
5.1k
Dynamic image transformation server Okara BETA
Teppei Yano
April 19, 2015
Tweet
Share
More Decks by Teppei Yano
See All by Teppei Yano
PEPABO EC tech conference ngx_mruby 2020
yano3
1
770
okara updates
yano3
0
64
create puppet module
yano3
0
44
let me introduce you
yano3
0
53
next stage infrastructure
yano3
1
13k
calamel-okara-beta
yano3
1
11k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
6
3.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
8
3.2k
The Mythical Team-Month
searls
210
40k
Mobile First: as difficult as doing things right
swwweet
213
7.8k
How to train your dragon (web standard)
notwaldorf
66
4.2k
Embracing the Ebb and Flow
colly
75
3.6k
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.2k
Automating Front-end Workflow
addyosmani
1351
200k
Building Adaptive Systems
keathley
27
1.3k
Navigating Team Friction
lara
176
12k
Transcript
おから(仮) ngx_small_light と ngx_mruby で作る動的画像変換サーバ 2015-04-19 第1回ペパボテックカンファレンス @yano3
自己紹介 矢野 哲平 (@yano3 / やのさん) • EC事業部(少し前までカラメル) • バックエンド寄り中心にいろいろ
◦ Solr(全文検索エンジン) ◦ 動的画像変換
目次 • 動的画像変換とは • 動的画像変換導入のメリット • 動的画像変換サーバおから(仮)
動的画像変換とは
従来の(よくある)画像変換 アップロード時に S, M, L のように数パターンのリ サイズ済み画像を作成(静的)
例 35689801_large.jpg 35689801_thumb.jpg 35689801_small.jpg
動的画像変換 • アップロード時は変換しないでそのまま ◦ もしくは十分な解像度を保った1サイズだけ変換 • リクエストのタイミングで必要なサイズの画像を 作成 • 同サイズに再度リクエストが来る場合に備えて
キャッシュ
例 ブラウザ 動的画像変換サーバ 300x300px 150x150px 50x50px オリジナル画像
動的画像変換のメリット
メリット • デザインの自由度 ◦ いつでも画像サイズの変更を伴うデザインの変更ができ る ◦ 大量の画像(例えばカラメル1800万商品)の再変換は すごく大変!! •
Retina ディスプレイ等の新しいデバイスへの対 応が容易
メリット • 適正な転送量 ◦ 転送コストの削減 ▪ 負荷(大事) ▪ お金(すごく大事) ◦
ユーザビリティ向上(読み込み速い!)
動的画像変換サーバ おから(仮)
おから(仮) 動的画像変換サーバ(プロキシ) • 幅、高さを指定してリサイズ • 画像形式の変換(jpeg, png, webp) • 品質の指定(不可逆圧縮な形式の場合)
• 他...
おから(仮) URL 例 http://d3ndjch8hfnps9.cloudfront. net/calamel/product/300x300cq80/92d05e13ff804d006ee4e 8a2960d0dc85ea0cf5d.jpg/img17.shop-pro. jp/PA01149/951/product/35689801.jpg
おから(仮) 変換コマンド(サイズ等) http://d3ndjch8hfnps9.cloudfront. net/calamel/product/300x300cq80/92d05e13ff804d006ee4 e8a2960d0dc85ea0cf5d.jpg/img17.shop-pro. jp/PA01149/951/product/35689801.jpg
おから(仮) 秘密のハッシュ値(後述) http://d3ndjch8hfnps9.cloudfront. net/calamel/product/300x300cq80/92d05e13ff804d006ee4 e8a2960d0dc85ea0cf5d.jpg/img17.shop-pro. jp/PA01149/951/product/35689801.jpg
おから(仮) 画像形式 http://d3ndjch8hfnps9.cloudfront. net/calamel/product/300x300cq80/92d05e13ff804d006ee4e 8a2960d0dc85ea0cf5d.jpg/img17.shop-pro. jp/PA01149/951/product/35689801.jpg
おから(仮) オリジナル画像の URL http://d3ndjch8hfnps9.cloudfront. net/calamel/product/300x300cq80/92d05e13ff804d006ee4e 8a2960d0dc85ea0cf5d.jpg/img17.shop-pro. jp/PA01149/951/product/35689801.jpg
おから(仮) 使っている技術 • Nginx • ngx_small_light • ngx_mruby • CDN
ngx_small_light
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
ngx_small_light Nginx に ngx_small_light を組み込んでビルドす るだけで動的画像変換サーバを作れるが...
ngx_small_light サービスの一部として提供するにあたっての問題 点 • URL の仕様変えたい • URL をいじって誰でも自由に変換できてしまう のはマズい
ngx_mruby
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 より引用
ngx_mruby • Nginx を mruby スクリプトで制御 • mruby は軽量な Ruby
実装 • CRuby すべての機能は持たないが mrbgem で拡張可能
ngx_mruby 問題点のおさらい • URL の仕様変えたい • URL をいじって誰でも自由に変換できてしまう のはマズい
ngx_mruby URL 変換(おから → ngx_small_light) • Nginx の設定ファイルで実現するのは辛い • mruby
なら正規表現等使ってラクラク
ngx_mruby コード例(簡略化し ています)
ngx_mruby • 正規表現 • mattn/mruby-onig-regexp
ngx_mruby URL の有効性の確認 • http_secure_link_module 等もあるがハッシュ 関数が md5 固定だったり制限あり •
mruby ならハッシュ関数もいろいろ使える
ngx_mruby コード例(簡略化し ています)
ngx_mruby • sha1 ダイジェストの計算 • iij/mruby-digest
まとめ
まとめ • 動的画像変換でサービス提供者もユー ザーも幸せ • ngx_small_light 簡単動的画像変換 • ngx_mruby で便利に拡張