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
retty_image-optimizer_yamagoya2018
Search
jp_taku2
October 24, 2018
Technology
2
1.3k
retty_image-optimizer_yamagoya2018
jp_taku2
October 24, 2018
Tweet
Share
More Decks by jp_taku2
See All by jp_taku2
Retty tech night 2017 Infra
jp_taku2
0
1k
Rettyの分析基盤について --データ分析基盤Night #1--
jp_taku2
6
4.7k
Other Decks in Technology
See All in Technology
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
140
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
240
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
210
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
170
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
630
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
540
How Community Opened Global Doors
hiroramos4
PRO
1
120
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
地図も、未来も、オープンに。 〜OSGeo.JPとFOSS4Gのご紹介〜
wata909
0
110
Prox Industries株式会社 会社紹介資料
proxindustries
0
280
M3 Expressiveの思想に迫る
chnotchy
0
100
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
RailsConf 2023
tenderlove
30
1.1k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
How to train your dragon (web standard)
notwaldorf
93
6.1k
Rails Girls Zürich Keynote
gr2m
94
14k
How to Ace a Technical Interview
jacobian
277
23k
A better future with KSS
kneath
239
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Unsuck your backbone
ammeep
671
58k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
Rettyにおける画像変換について Takumi Suzuki (@jp_taku2)
自己紹介 Retty すずたく @jp_taku2 2014.4 オールアバウト 新卒入社 2016.8 Retty 入社
インフラを主にやっています。
日本最大級の実名グルメサービス「Retty」 実名グルメサービス「 Retty」は、「信頼できる人からお店探しができる」グルメサービスとして、 2011年6月サービス開始以降、 利用者に実際行ったお店のオススメ情報を投稿していただく形で運営しています。 実名制の投稿、オススメの口コミ、周囲への拡散の仕組み など、スマートフォン時代のグルメサービスのスタンダードとしての特徴を兼ね備えたサービスとなっております。 (ご参考)Rettyのサービスコンセプト → https://retty.me/announce/philosophy/
スマホ時代の実名グルメサービス「Retty」 月間利用者数3,000万人突破
好みの合う人や達人のオススメ、 近くの人気店から探せるアプリとして支持を拡大
agenda 1. Rettyにおける画像利用 a. 従来の画像変換について b. 移行検討になった課題 2. サービス比較 a.
Image Optimizer b. ImageFlux c. Image Manager 3. 移行 a. 方法 b. 結果 4. まとめ
Rettyにおける画像利用
• web ◦ 店舗ページ ◦ エリアページ ◦ まとめページ • app
◦ タイムライン ◦ 店舗ページ ほぼ全てのページで利用 Origin画像数:約1500万枚 Rettyで使用されている画像
従来の画像変換について
従来の画像変換 第1期 ▪ 4つのテンプレートサイズの画像を用意 ▪ 原則全てのページでこれを使用する。
従来の画像変換 第2期 ▪ ImageMagick+Nginxで画像変換を行う ▪ webの一部のみ適用
従来の画像変換 第3期 ▪ 第3期 ✓ webをJavaScriptによる動的画像サイズ指定に変更 ✓ 第2期のものをWeb全展開(サーバー台数:4台→45台) ✓ アプリ全展開
✓ webp対応
発生した問題① ▪ 想定されていない利用による高負荷 ✓ 全展開して使用したことにより発生 ▪ 変換対象画像の多様化 ✓ JavaScriptにより動的画像サイズ変更により発生 ▪
画像レスポンス速度の低下 ✓ 多様なサイズ変更・高負荷によりレスポンス速度低下
発生した問題② ▪ コストの爆増 ✓ c4.largeが4台→45台 ▪ 運用コストが増えた ✓ アラートが毎週なるように鳴った。 ✓
なるはいいが対応が暫定対応しかできなくなってきた。 ▪ 改善の余地がなくなった ✓ Nginx + ImageMagickのシンプルな構造のためプログラムで
サービス比較
比較したサービス ▪ Image Optimizer ✓ Fastlyによって提供されている画像配信サービス ▪ ImageFlux ✓ さくらインターネット株式会社とピクシブ株式会社が
共同で開発、提供しているクラウド画像変換サービス ▪ Image Manager ✓ アカマイ・テクノロジーズの画像変換サービス
比較項目 ▪ 変換機能の充実度 ✓ 基本:crop / resize ✓ 何かサービスに活かせそうな機能 ▪
対応URL ✓ Origin 3種 ✓ 提携サイトの画像 ▪ 移行コスト ▪ 運用コスト ✓ アラートの数が増加 ✓ アップデートによる工数増加 ▪ 費用コスト ✓ 現状よりは下げたい
比較表 サービス名 従来の画像 変換 Image Optimizer (Fastly) ImageFlux (Sakura) Image
Manager (Akamai) 機能充実度 3 4 5 3 対応URL数 5 5 3 1 フォーマット 3 4 5 3 移行コスト 5 3 1 運用コスト 3 5 5 1 費用コスト 2 3 2 5 Total 3.2 4.3 3.5 2.3 ※1 (悪い) < … < 5(良い)
Image Optimizerがmatchした点 ▪ resizeの長編・短編合わせが設定できた ▪ Slackでの相談ができ、サポートが手厚かった ▪ 設定をVCLベースでGit管理にできる ▪ VCLにより、従来のPathを変更することがないため、
開発側の移行工数がテストのみで終わることができた。
移行について
移行方法 1. Custom VCLを使用して、既存のPathと新規に発生するPathを 共存させそのまま使用できるように設定した 2. 画像テスト用のページを作成し、サイト内で使用されているドメイン から、全て正常に返っているかのテストを行った 3. 全チームにテストを行ってもらい、期待通りの返り値が返っているか
テストを行った 4. DNS切り替え
移行方法① ▪ Custom VCLを使用して、既存のPathと新規に発生するPathを 共存させそのまま使用できるように設定した
移行方法② ▪ 画像テスト用のページを作成し、サイト内で使用されているドメイン から、全て正常に返っているかのテストを行った
移行方法③ ▪ 開発者にもテストを行ってもらい、期待通りの返り値が返っているか テストを行った
移行方法④ ▪ DNS切り替え ▪ DNSの設定ミスで切り替え失敗。。。 ▪ 深夜にリトライ
移行結果 1. 従来の画像変換サーバーではWebpを使用したい場合、明示的 にパラメータを渡しておく必要があったが、Fastlyを使用する事 により、UAによりAutoでwebpを返せるようになった。 2. 画像変換の変換速度によるボトルネックが消え、投稿後反映に かかる時間が小さくなった 3. 画像容量と一部レスポンス速度が改善した
移行結果① ▪ 従来の画像変換サーバーではWebpを使用したい場合、明示的にパ ラメータを渡しておく必要があったが、Fastlyを使用する事により、 UAによりAutoでwebpを返せるようになった。
移行結果② ▪ 画像変換の変換速度によるボトルネックが消え、投稿後反映にかか る時間が小さくなった ▪ 画像容量とレスポンス速度が安定しました
発生した課題
課題だった所 ▪ 最近、当初の予定よりトラフィックが多かったため、 再見積もりが必要になった。 ▪ Originアクセスが想定より多くなってしまい、 コストが余分に発生してしまった。
解決方法 ▪ 意図しないサイズで画像を使用していた場所を修正 ▪ Fastlyとの契約変更 ✓ 迅速に対応して頂き、当月適用してもらえた。
まとめ
まとめ ▪ Fastlyの移行までのサポートが手厚かった。 ✓ 開発途中だったAPIを提供して頂けた ▪ 従来よりはコストが下がった。 ✓ ちょっと見積もりが甘かったので手放しで喜ぶほど下がらなかった。 ▪
画像クオリティ・レスポンス・容量が向上した。 ▪ 運用コストが激減した。 ✓ アラートがならずに安眠ができて最高
ご清聴ありがとうございました.