fastlyでええかんじにサイトリニューアル @ Yamagoya Meetup 2018 / e-kanzi Website renewal with fastly

fastly Yamagoya Meetup 2018で話した資料です。
実際は、GoogleSlideで👇で話しました。
スピーカーノートとかGIFがみれるので、そっちでもどうぞ。

https://docs.google.com/presentation/d/1ifilZuGdOxHPTEqWIWTwqMnQmq2zpR3jsICkMSmu0R4/edit?usp=sharing

Transcript

1. e-kanzi Website renewal with fastly Yamagoya Meetup 2018 10/24 iwanaga kakeru @kakerukaeru
2. どうにゅう
3. とあるサイトを リニューアルしました 今日話す事 CDNレイヤーで ほどほどのやっていきをした 話をします 今日話さない事 originの細かい設計 https://bit.ly/OSSWA2018
4. Amebaニュース • 200X年リリース • ニュースサイト • 認証ページなし • 更新頻度も低く • 回遊性は低く、読み切り型 • SEOに優しいといいでしょう • PC/SP/AMP ｱﾙﾖ • etc... https://news.ameba.jp
5. なぜリニューアル • SEO ◦ ニュースサイト ◦ ある程度育ったドメイン • レガシー ◦ 積み上がった歴史 ◦ 保守性高く直したい ◦ 運用コスト安く https://news.ameba.jp
6. なぜfastly • 使ってみたかった ◦ ﾄﾃﾓﾀﾞｲｼﾞ • Configurationが楽 ◦ API friendly ◦ Integration ◦ tarraform ◦ vcl https://news.ameba.jp
7. Architecture API origin PC origin SP / AMP origin static resource origin
8. fastlyでやっていったこと • debugしやすくする • CacheHit率を上げる • +α
9. fastlyでやっていったこと • debugしやすくする ◦ CacheObjectを理解しよう ◦ logを見やすくしよう ◦ CI/CDを回そう • CacheHit率を上げる • +α
10. Cache Object • CacheObjectを理解する speakerdeck/vary-and-the-future-of-cache-variation docs.fastly.com/manipulating-the-cache-key
11. Cache Object • CacheObjectを理解する • Cache-Key = Method + Host + Path + Vary key speakerdeck/vary-and-the-future-of-cache-variation docs.fastly.com/manipulating-the-cache-key
12. Cache Object • CacheObjectを理解する • Cache-Key = Method + vcl_hash + Vary key • docs.fastly.com/creating-custom-vcl
13. Response X-Cache-Key
14. Response X-Cache-Key
15. logging • CacheKeyは分かった • 集約して可視化したい • 気になりポイント ◦ なるべくリアルタイム ◦ なるべく管理は少なく ◦ なるべく楽したい speakerdeck/vary-and-the-future-of-cache-variation
16. logging docs.fastly.com/log-streaming-syslog • CacheKeyは分かった • 集約して可視化したい • 気になりポイント ◦ なるべくリアルタイム ◦ なるべく管理は少なく ◦ なるべく楽したい syslog
17. logging docs.fastly.com/log-streaming-syslog • CacheKeyは分かった • 集約して可視化したい • 気になりポイント ◦ なるべくリアルタイム ◦ なるべく管理は少なく ◦ なるべく楽したい • 最近正式Integration出た？
18. logging docs.fastly.com/log-streaming-syslog • CacheKeyは分かった • 集約して可視化したい • 気になりポイント ◦ なるべくリアルタイム ◦ なるべく管理は少なく ◦ なるべく楽したい • CacheMISSをあぶり出そう ◦ URL / UA parser
19. logging
20. logging
21. CI/CD • 高速にdebugし、 高速にdeployしよう • CircleCI ◦ for test ▪ mocha + chai ◦ for deploy ▪ terraform ▪ custom vcl www.terraform.io/docs/providers/fastly
22. CI/CD • 高速にdebugし、 高速にdeployしよう • CircleCI ◦ for test ▪ mocha + chai ◦ for deploy ▪ terraform ▪ custom vcl www.terraform.io/docs/providers/fastly
23. CI/CD • 高速にdebugし、 高速にdeployしよう • terraform ◦ workspace ▪ stg/prd 共通のvcl ▪ domain 以外は共通 ◦ deploy ▪ master merge → prd ▪ feature → stg • originはstg/prd 同等構成に。 www.terraform.io/docs/providers/fastly
24. CI/CD • 高速にdebugし、 高速にdeployしよう • test ◦ stg test required before prd apply ◦ prd test ▪ cron trigger www.terraform.io/docs/providers/fastly
25. CI/CD www.terraform.io/docs/providers/fastly • 高速にdebugし、 高速にdeployしよう • test ◦ stg test required before prd apply
26. CI/CD www.terraform.io/docs/providers/fastly • 高速にdebugし、 高速にdeployしよう • test ◦ stg test required before prd apply ◦ prd test ▪ cron trigger
27. CI/CD • check list ◦ Cache-Key ◦ API-Key ◦ CORS & AMP CORS ◦ normalize ▪ Vary / User-Agent ◦ OPTION Method Cache ◦ Negative Cache ◦ etc... www.terraform.io/docs/providers/fastly
28. 準備終わり
29. fastlyでやっていったこと • debugしやすく • CacheHit率を上げる ◦ Cache戦略 ◦ normalize ◦ offload • +α
30. 大体の方針 • Cache ◦ Static / Dynamic Content ◦ Cache the API Resources ◦ Cache Coverage ≒ 100% ◦ Surrogate-Control > max-age • Purge ◦ Instantly purge ◦ Surrogate-Key
31. Cache戦略 • 「目指せCacheHit率100%」 • normalize ◦ QueryParameter ◦ User-Agent ◦ Accept-Encoding • Cache CORS resources • Cache OPTION Method • Cache with API Key • Cache Negative Response • edge side redirect
32. Purge戦略 • 「迅速purgeの準備を」 • Instantly purge • Surrogate-Key ◦ のような単位でグルーピング ▪ entry ▪ image ▪ release
33. Cache / normalize User-Agent
34. Cache / normalize QueryParameter
35. Cache AMP CORS resources
36. Cache OPTION Request その１
37. Cache OPTION Request その２
38. Cache with API Key
39. あともうちょっと
40. fastlyでやっていったこと • debugしやすく • CacheHit率を上げる • +α ◦ 運用 ◦ etc...
41. maintenance Operation
42. Server Timing
43. 開発チームの喜びの声
44. 喜びの声 • Ω「ﾁｮｯﾊﾟﾔ!!」
45. 喜びの声 • Ω「ﾁｮｯﾊﾟﾔ!!」 • Ω「CacheHit率が!!」
46. 喜びの声 • Ω「ﾁｮｯﾊﾟﾔ!!」 • Ω「CacheHit率が!!」 • Ω「時代はDBレス!!(嘘)」
47. ちなみに、最初は... CachaHit率 20%からスタート
48. ちなみに、最初は... ただの勘違いで、 コツコツ対応すればいい感じに
49. Next やっていき • やっていき ◦ SPAでのCache ◦ 認証コンテンツのCache ◦ ちゃんとしたh2の利用 ◦ もっと大量のtrafficをfastlyに流していく • 気になっていき / Internet-Drafts とか ◦ Cache Digest ◦ Early Hints ▪ www.fastly.com/blog/optimizing-http2-server-push-fastly ◦ Variants ▪ tools.ietf.org/draft-ietf-httpbis-variants-04 ◦ TLS 1.3 0-RTT
50. ありがとうございました
51. 使わなかったスライド
52. CyberAgent & Fastly