2015/12/5(土) Remixing Vol.3 with オールアバウト and LIG https://remixing.doorkeeper.jp/events/34982

1. 国内最大級の総合情報メディア
を支えるVarnish Cache
株式会社オールアバウト
システム部 大原和人(やまと)

2. 自己紹介
•名前
‣ 大原和人(やまと)
•略歴
‣ 2012年4月∼ インフラエンジニア
‣ 2015年4月∼ 開発エンジニア
‣ Team TechBall (技術基盤の検討、改善活動)

4. • 専門家 がガイドする国内最大
級の総合情報サイト
•月間総利用者数：3150万人
•PV数：1億5,000万
（PC：モバイル ＝ 3：7）
•900名の専門家による
1,300テーマにも渡った17万本
の記事

5. アジェンダ
•All Aboutのコンテンツキャッシュの仕組み
•Varnish活用ノウハウ
•その他、Varnishが役に立った事例

6. Varnishについて

7. Varnish

8. ニスではありません！

9. •オープンソースのリバースプロキシ
リクエスト分散、キャッシュなど
•VCLというC言語に似た記述で設定する
•最新バージョンは4.1.0
(2015/12/5現在)
sub vcl_recv {
if (req.http.host == "allabout.co.jp") {
if( req.url == "/test/" ){
set req.backend = web01;
return (pass); # キャッシュしない
}
return (lookup); # キャッシュする
}

10. の良い所
•高速
多少複雑な制御をしてもレスポンス低下しない
•柔軟な制御が可能
VCLによるプログラムライクな設定
•高機能
ヘルスチェック、ESI等

11. •急成長中のスタートアップ
‣ 総額1億3000万ドル調達※
‣ Twitter,GitHub,About.comなどが導入
•Varnishを使ったクラウドCDN
‣ リアルタイムパージ (150ms)
‣ VCLカスタマイズ
※TechCrunch
http://jp.techcrunch.com/2015/08/06/20150805fastly-raises-75m-series-d-round-for-its-real-time-cdn/

12. コンテンツキャッシュの考え方
•静的コンテンツ
‣ 画像、CSS、JS等
•動的コンテンツ
‣ 会員ページ等
•イベント駆動コンテンツ
‣ ニュース速報、在庫情報等
Fastly社に行ってきた ー 動的コンテンツの定義を変えるCDN？
http://apiguy.tokyo/2015/11/04/fastly-visit/

13. オールアバウトにおけるキャッシュルール
•画像、CSS、JS
‣ クラウドCDNでキャッシュ
•会員情報、検索結果等
‣ キャッシュしない (リクエスト分散のためにVarnishを通す場合あり)
•記事HTML
‣ Varnishでキャッシュ → 記事の即時更新を実現
‣ 一部外部フィード記事はクラウドCDNでキャッシュ

14. サーバ構成
HTML等 画像、CSS、JS
Amazon S3Web
/App
Web
/App
Web
/App
Varn
ish
Varn
ish

15. CDP
(Cloud Design Pattern)
http://aws.clouddesignpattern.org/
Cache Proxyパターン Cache Distributionパターン

16. Varnish活用ノウハウ

17. マルチデバイスキャッシュ
Web
/App
Varn
ish
http://allabout.co.jp/newsdig/
hash
= host + URL + PC
UA = PC
UA = PC
PCテンプレ
Web
/App
Varn
ish
hash
= host + URL + SP
UA = SP
UA = SP SPテンプレ

18. マルチデバイスキャッシュ
Web
/App
Varn
ish
http://allabout.co.jp/
hash
= host + URL + PC
UA = PC
UA = PC
PCテンプレ
Web
/App
Varn
ish
hash
= host + URL + SP
UA = SP
UA = SP
302 redirect to
touch.allabout.co.jp
リダイレクトする場合
touch.allabout.co.jp

19. マルチデバイスキャッシュの
ポイント
•Varnishに依存した作りにしない
•VarnishとWebアプリのUA判定を統一する
‣ 差があるとキャッシュのズレが起きる
‣ 各種フレームワーク & VCL対応のライブラリ
https://github.com/serbanghita/Mobile-Detect

20. ロードバランシング
•バランシング方式
‣ round-robin
‣ fallback
‣ client, random, DNS, hash
•ヘルスチェック
‣ 死んでいるサーバにはリクエストさせない
‣ サーバが全滅した場合はTTLを延長する(grace機能)
Web
/App
Varn
ish
fallback
Web
/App
✕
active standby

21. ESI
(Edge Side Includes)
•ページの一部パーツの
みをキャッシュ出来る
機能
(実運用実績はまだあり
ません)
http://blog.xcir.net/wp-content/uploads/
2011/09/VarnishCacheIntroduction_Rev2.pdf
<esi:include src= /esi/block/B.php />

22. VCLの管理
•ほぼプログラムと同じなので、バージョン管理・レ
ビューが必要
•Chef + Bitbucket
‣ バージョン管理、レビューをちゃんとして秘伝のタ
レ化を防ぐ
‣ attributesやincludeを駆使することで、環境ごとに
VCLを切り替えられる

23. VCL反映フロー
B M
ssh
local
chef server
production
pre-production
Work
station
Varn
ish
Varn
ish
Varn
ish

24. その他、Varnishが役
に立った事例

25. ネットワーク輻湊対策
•○○砲でデータセンター
のネットワークが限界
を迎えた
‣ クラウド上にVarnish
を立ててトラフィッ
クを逃がした
Web
/App
Web
/App
Web
/App
Varn
ish
Varn
ish
Varn
ish

26. プロキシとして
•環境移行に便利
‣ URL単位で移行可能(記述もわかりやすい)
‣ 404なら別サーバへ飛ばすという制御も可能
(restart機能)
•疎結合化
‣ URL単位で異なるサーバ環境を使用する

27. プロキシとして
Web
/App
Varn
ish
NFS
Web
/App
All About 1.0 All About 2.0
Web
/App
All About 2.5
Web
/App
All About 3.0
(future)
5.2
5.0
5.5
?
?
/service1
http://allabout.co.jp
/service2 /service3 /service4
5.6
static
html

28. まとめ
•Varnishを使うと従来のクラウドCDNではキャッ
シュしづらかったコンテンツのキャッシュが出来る
•プログラムライクに細やかな制御が可能
‣ プロキシとしても優秀
‣ 環境移行も楽に

29. JOIN US!
•WEBエンジニア
•インフラエンジニア
•UI/UXデザイナー

30. 参考資料
•Varnish関連情報
‣ いわなちゃんさんのブログ (http://blog.xcir.net/)
‣ 入門用資料も公開されています(Varnish3対応)
http://blog.xcir.net/wp-content/uploads/2011/09/
VarnishCacheIntroduction_Rev2.pdf
•Fastly関連情報
‣ https://www.fastly.com/
‣ http://apiguy.tokyo/2015/11/04/fastly-visit/
‣ http://jp.techcrunch.com/2015/08/06/20150805fastly-raises-75m-
series-d-round-for-its-real-time-cdn/