pixivの画像アップロードシステム

56
pixivの画像アップロードシステム Tatsuhiko Kubo [email protected]

Upload: tatsuhiko-kubo

Post on 24-Jun-2015

18.207 views

Category:

Technology


9 download

DESCRIPTION

pixivの画像アップロードシステム

TRANSCRIPT

Page 1: pixivの画像アップロードシステム

pixivの画像アップロードシステム

Tatsuhiko [email protected]

Page 2: pixivの画像アップロードシステム

自己紹介•氏名:久保 達彦• H.N:bokko / @cubicdaiya• pixivのインフラ兼ソフトウェアエンジニア• 2010年10月入社• HP:http://cccis.jp

Page 3: pixivの画像アップロードシステム

普段はC++でdiffのライブラリとか作ってます

http://code.google.com/p/dtl-cpp

Page 4: pixivの画像アップロードシステム

今日お話すること

Page 5: pixivの画像アップロードシステム

入社して最初の仕事

Page 6: pixivの画像アップロードシステム

画像アップロードの高速化

Page 7: pixivの画像アップロードシステム

従来のアップロードの問題点

• 大量のサムネイル生成処理• 全部同期的に処理される• アップロードが集中すると全体的に重くなる• とにかく遅い・重い

Page 8: pixivの画像アップロードシステム

従来のアップロードの問題点

• 大量のサムネイル生成処理• 全部同期的に処理される• アップロードが集中すると全体的に重くなる• とにかく遅い・重い

手元にあった2MBのJPG画像をアップロードしようとしたら20秒弱かかった

Page 9: pixivの画像アップロードシステム

これはいけない

Page 10: pixivの画像アップロードシステム

新しいアップロードシステムの設計・開発に取りかかることに

Page 11: pixivの画像アップロードシステム

制作:bokko監修:kamipoさん

Page 12: pixivの画像アップロードシステム

冗談抜きで、当時僕が書いたアップロードまわりのコードの8~9割ぐらいはkamipoさんにレビューされてます。

Page 13: pixivの画像アップロードシステム

pixivの画像アップロードフロー

ファイル選択画面 情報入力画面 完了画面

Page 14: pixivの画像アップロードシステム

pixivの画像アップロードフロー

ファイル選択画面 情報入力画面 完了画面

Page 15: pixivの画像アップロードシステム

pixivの画像アップロードフロー

ファイル選択画面 情報入力画面 完了画面

全てのサムネイル生成はここの画面遷移時に同期的に行われる

Page 16: pixivの画像アップロードシステム

pixivの画像アップロードフロー

ファイル選択画面 情報入力画面 完了画面

全てのサムネイル生成はここの画面遷移時に同期的に行われるユーザにはとても遅く感じる(そして実際遅い)

Page 17: pixivの画像アップロードシステム

pixivの画像アップロードフロー

ファイル選択画面 情報入力画面 完了画面

Page 18: pixivの画像アップロードシステム

pixivの画像アップロードフロー

ファイル選択画面 情報入力画面 完了画面

Page 19: pixivの画像アップロードシステム

pixivの画像アップロードフロー

ファイル選択画面 情報入力画面 完了画面

Page 20: pixivの画像アップロードシステム

pixivの画像アップロードフロー

ファイル選択画面 情報入力画面 完了画面

実はユーザが一番時間を使う箇所

Page 21: pixivの画像アップロードシステム

情報入力画面

Page 22: pixivの画像アップロードシステム

情報入力画面

キャプションやタグを一生懸命入力する傾向が強い

Page 23: pixivの画像アップロードシステム

サムネイル生成はユーザが情報を入力している間に非同期で行う

 なので、

Page 24: pixivの画像アップロードシステム

ファイル選択画面 情報入力画面 完了画面

・サムネイル生成に必要な情報をエンキュー・ロックファイル作成

ロックファイルが削除されるまでポーリング

サムネイル生成ジョブをデキュー サムネイル生成 ロックファイルを削除

サムネイル生成ジョブをデキュー

サムネイル生成ジョブをデキュー

サムネイル生成

サムネイル生成

ロックファイルを削除

ロックファイルを削除

サムネイル生成プロセスをひたすらフォーク最大同時実行プロセス数:5

・・・

・・・

・・・

プロセス終了

プロセス終了

プロセス終了

バックエンドの処理

フロントエンドの処理こんな感じ

Page 25: pixivの画像アップロードシステム

続いて、システム構成について

Page 26: pixivの画像アップロードシステム

アップロード処理の特徴

•CPUバウンド•メモリバウンド

サムネイル生成は非常に重いタスク

Page 27: pixivの画像アップロードシステム

Load Balancer ・・・

APサーバ APサーバ APサーバ・・・ ・・・

従来はアップロード処理もAP(アプリケーション)サーバが担当

Load Balancer

Page 28: pixivの画像アップロードシステム

Load Balancer ・・・

APサーバ APサーバ APサーバ・・・ ・・・

Load Balancer

Page 29: pixivの画像アップロードシステム

Load Balancer ・・・

APサーバ APサーバ APサーバAP(upload only)

Q4Mworker_upload

・・・ ・・・

Load Balancer

Page 30: pixivの画像アップロードシステム

Load Balancer ・・・

APサーバ APサーバ APサーバAP(upload only)

Q4Mworker_upload

・・・ ・・・ ・・・

Load Balancer

Page 31: pixivの画像アップロードシステム

Load Balancer ・・・

APサーバ APサーバ APサーバAP(upload only)

Q4Mworker_upload

・・・ ・・・ ・・・

Load Balancer

AP(upload only)Q4M

worker_upload

Page 32: pixivの画像アップロードシステム

Load Balancer ・・・

APサーバ APサーバ APサーバAP(upload only)

Q4Mworker_upload

・・・ ・・・ ・・・

Load Balancer

AP(upload only)Q4M

worker_upload

Page 33: pixivの画像アップロードシステム

Load Balancer ・・・

APサーバ APサーバ APサーバAP(upload only)

Q4Mworker_upload

・・・ ・・・ ・・・

Load Balancer

AP(upload only)Q4M

worker_upload

Page 34: pixivの画像アップロードシステム

Load Balancer ・・・

APサーバ APサーバ APサーバAP(upload only)

Q4Mworker_upload

アップロード処理専用のAPサーバを用意

・・・ ・・・ ・・・

Load Balancer

AP(upload only)Q4M

worker_upload

Page 35: pixivの画像アップロードシステム

アップロード専用サーバの構成

AP(upload_only) ・アップロード関連のリクエストを処理・アップロードデータの情報をQ4Mにエンキュー

Q4M ・アップロードデータの情報を格納するキュー

worker_upload ・Q4Mからアップロードデータの情報をデキュー・デキューした情報を元にサムネイル生成

Page 36: pixivの画像アップロードシステム

AP(upload only)

Page 37: pixivの画像アップロードシステム

AP(upload only)

• PHP5.3• ImageMagick6.6.0• imagick3.0.0

Page 38: pixivの画像アップロードシステム

Q4M

Page 39: pixivの画像アップロードシステム

Q4M

• MySQLのストレージエンジン• MySQLのテーブルがキューになる• SQLでエンキュー・デキューができる• サイボウズ・ラボの奥一穂氏が開発

Page 40: pixivの画像アップロードシステム

worker_upload

Page 41: pixivの画像アップロードシステム

worker_upload

• Q4Mと通信してサムネイル生成を行うマルチプロセスデーモン

•所謂ジョブワーカー• daemontoolsでデーモン化• Python製

Page 42: pixivの画像アップロードシステム

worker_uploadを構成するPythonモジュール

•python-prefork• python-q4m• python-worker

後々のことを考えてとっととdebパッケージ化python-prefork以外は自作

Page 43: pixivの画像アップロードシステム

workerがpreforkするjob数を決定する

• preforkするjob数毎にサムネイル生成にかかる時間を計測

• 小さい画像(50KB)と大きい画像(2MB)の合計49枚に対して一斉にサムネイル生成処理を実行

• CPU :Athlon II X4 2.3GHz(4コア)• メモリ:8GB

Page 44: pixivの画像アップロードシステム

すべてのジョブ(サムネイル生成)を実行するのにかかる時間

prefork

prefork

Page 45: pixivの画像アップロードシステム

すべてのジョブ(サムネイル生成)を実行するのにかかる時間

prefork数が5を越えたあたりからスケールしなくなった

prefork

prefork

Page 46: pixivの画像アップロードシステム

各々のジョブ(サムネイル生成)実行にかかる時間

prefork

■ prefork数:1■ prefork数:5■ prefork数:10

Page 47: pixivの画像アップロードシステム

各々のジョブ(サムネイル生成)実行にかかる時間

prefork

prefork数が多すぎるとかえって性能低下

■ prefork数:1■ prefork数:5■ prefork数:10

Page 48: pixivの画像アップロードシステム

workerがpreforkするジョブ数は4~5が適切と判断

Page 49: pixivの画像アップロードシステム

そんな感じでアップロード高速化完了

Page 50: pixivの画像アップロードシステム

さらに、

Page 51: pixivの画像アップロードシステム

libjpeg-turboによる高速化

Page 52: pixivの画像アップロードシステム

libjpeg-turbo

• x86とx86_64用に最適化されたlibjpeg• SIMD命令(MMX, SSE2)を活用• libjpegと簡単に差し替えることが可能• ImageMagickはlibjpegを使ってる

Page 53: pixivの画像アップロードシステム

各々のジョブ(サムネイル生成)実行にかかる時間prefork数:5

■ use libjpeg■ use libjpeg-turbo

Page 54: pixivの画像アップロードシステム

各々のジョブ(サムネイル生成)実行にかかる時間prefork数:5

ライブラリ差し替えるだけで一割以上速くなった

■ use libjpeg■ use libjpeg-turbo

Page 55: pixivの画像アップロードシステム

まとめ

• サムネイル生成処理を非同期化することによってユーザの体感速度を向上させることに成功

• 実際のスピードについても専用サーバやlibjpeg-turboを使うことで高速化できた

Page 56: pixivの画像アップロードシステム

ご静聴ありがとうございました