Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Dynamic image transformation server Okara BETA
Search
Teppei Yano
April 19, 2015
1
5.6k
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
1k
okara updates
yano3
0
72
create puppet module
yano3
0
52
let me introduce you
yano3
0
100
next stage infrastructure
yano3
1
13k
calamel-okara-beta
yano3
1
11k
Featured
See All Featured
Unsuck your backbone
ammeep
668
57k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Fireside Chat
paigeccino
34
3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Designing for Performance
lara
604
68k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
The Cult of Friendly URLs
andyhume
78
6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Become a Pro
speakerdeck
PRO
25
5k
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 で便利に拡張