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

8fb59fed9746bdd17954eacc2e1aab5b?s=47 kakerukaeru
October 26, 2018

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

8fb59fed9746bdd17954eacc2e1aab5b?s=128

kakerukaeru

October 26, 2018
Tweet

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 その1

  37. Cache OPTION Request その2

  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