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
98
next stage infrastructure
yano3
1
13k
calamel-okara-beta
yano3
1
11k
Featured
See All Featured
Side Projects
sachag
452
42k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Embracing the Ebb and Flow
colly
84
4.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
BBQ
matthewcrist
85
9.3k
A Modern Web Designer's Workflow
chriscoyier
692
190k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
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 で便利に拡張