Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introducting the Fastly to TravelBook

Introducting the Fastly to TravelBook

トラベルブック(TrabelBook)のFastly導入事例

43e21f1367ccb31a93394ce1799bca1b?s=128

Masanori Iwakura

March 30, 2022
Tweet

Other Decks in Technology

Transcript

  1. トラベルブックの Fastly導入事例 トラベルブック株式会社 岩倉誠徳 (Masanori Iwakura)

  2. アジェンダ - 自己紹介 - はじめに - 導入した経緯 - トラベルブックの構成紹介 -

    設定例紹介 - 失効済みコンテンツの配信 - Brotliの設定 - HTTP/3(QUIC )の設定 - まとめ
  3. 自己紹介 岩倉 誠徳 (いわくら まさのり) バックエンドメインのWEBエンジニア GitHub: MasanoriIwakura 好きなFastlyの機能:失効済みコンテンツの配信 ※後述

  4. はじめに 2021年11月、トラベルブックはFastlyを導入しました👏👏👏 Brotli, HTTP/3(QUIC)と言った比較的新しい技術も導入したので 最後までお付き合いいただけますと幸いです

  5. 導入した経緯 • 元々はVarnishをEC2に入れてキャッシュ管理 • 日に日にキャッシュ対象のパスやページが増加 • Varnishサーバーが単一障害点となるリスク 冗長化したい!!! スケールを自動化したい!!!

  6. 構成紹介

  7. None
  8. 管理方法 構成管理:Terraform • AWSの構成管理でも使用している • サービスをソース管理したい サービス管理:VCL • Varnishで使用した実績がある •

    Varnishからの移行が比較的容易そう
  9. 管理方法 死活・ログ監視:Datadog • 既存のシステムでも使用している • ログの表示がとても優秀

  10. 設定例紹介

  11. Terraformを使用した管理 プロジェクト構成 • modules ◦ VCLの管理 ◦ ログフォーマット管理 ◦ (Compute@Edgeの導入も検討)

    • production • staging
  12. Terraformを使用した管理 参考: https://registry.terraform.io/providers/fastly/fastly/latest/docs • Fastlyの設定画面で行えることは、ほぼ可能 • 管理画面で存在するのにTerraformから行えない設定には遭遇していない

  13. Datadogへのログ送信 TerraformでDatadogへの送信設定を追加 Fastlyの変数を埋め込み可能

  14. Datadogへのログ送信 Fastlyからログを送信することにより、リアルタイムに状況を可視化 例として、 - 200系レスポンスの割合 - エラーレスポンスの割合 - キャッシュのヒット率 -

    アクセスしているブラウザ OSの割合 などをダッシュボードで確認が可能
  15. Datadogへのログ送信 フィルター機能で任意のIPで絞り込んだり、任意のパスで絞り込んだりすることが可能 リアルタイムにログを確認することができるため 障害発生時や攻撃を受けている時の調査に有効的

  16. Staleについて Staleなし Staleあり TTL+Staleの期間内は常にキャッシュが返却される

  17. Staleの設定で苦戦したポイント [苦戦ポイント] Staleの期間内なのにキャッシュがHITしない? [原因] 1. TTLの時間が3700秒未満に設定されていた 2. オリジンシールドのStaleを無効化し、POPだけでStaleを有効化していた メモリ持ちになってしまうため LRUが

    発生しやすい
  18. 改善前の設定 アクセスするPOPによってキャッシュのHIT/MISSが変わる

  19. 改善後の設定 オリジンシールドのStaleが適用される

  20. Purgeについて • All Purge →サービス全体のキャッシュ削除 • URL Purge →指定したURLだけキャッシュ削除 •

    Surrogate-Key Purge →独自で指定したキーでキャッシュ削除
  21. Purgeについて hotelのキーを指定→ホテルに関するページ全てのキャッシュを削除 hotel-item-1を指定→特定のページのみ削除

  22. カスタムエラーページについて 参考:https://docs.fastly.com/ja/guides/creating-error-pages-with-custom-responses

  23. カスタムエラーページの実現方法 AWSのS3に配置したHTMLを参照するように設定 Fastly側でHTMLを管理する必要なく、最小限の修正でカスタムエラーページを実現

  24. 失効済みコンテンツの配信

  25. 失効済みコンテンツの配信 参考:https://docs.fastly.com/ja/guides/serving-stale-content

  26. 失効済みコンテンツの配信 次のアクセス時には キャッシュが適用

  27. 失効済みコンテンツの配信 ユーザーにはエラーを 認識させない!!

  28. Brotliの設定

  29. Brotli(ブロトリ)とは • Googleが開発した圧縮方式 • 他の圧縮形式と比べて高い圧縮率 • Edge, Firefox, Chrome, Safariなど主要ブラウザで対応している

  30. Brotliの実験 実際にどれくらい圧縮されるのか、トラベルブックのトップページで実験

  31. Brotliの実験 ※curlコマンドで検証 圧縮なし Gzip圧縮 Brotri圧縮

  32. Brotliの実験結果 約130KB 約19KB (86%圧縮) 約13KB (90%圧縮) 参考:https://tech.travelbook.co.jp/posts/introducing-fastly/ ページによって結果が異なる場合があるため、あくまでも参考 Brotliの勝利!!

  33. Brotli設定手順 1. FastlyサポートにBrotliを有効化していただく 2. VCLでBrotli圧縮を有効化 対応ブラウザ以外では他の圧縮形式にし たいため、Accept-Encodingで判定して 未対応の場合はgzip圧縮

  34. HTTP/3の設定

  35. HTTP/3(QUIC)とは? • HTTP/2に続く新バージョン • Googleが開発したQUICを使用することで高速化(UDP通信)

  36. HTTP/2(TCP+TLS)とHTTP/3(QUIC)の対比 やり取りが少ない!

  37. HTTP/3の設定方法 1. FastlyサポートにHTTP/3(QUIC)を有効化していただく 2. Alt-SvcヘッダーをVCLで追加 → h3.alt_svc() 3. HTTP/3用のDNSに切り替え 0RTT

    enabled? IPv4 and IPv6 dual stack routing IPv4-only routing Yes dualstack.n.sni.global.fastly.net n.sni.global.fastly.net No dualstack.m.sni.global.fastly.net m.sni.global.fastly.net
  38. HTTP/3の設定確認 対応ブラウザからアクセスし、確認 h3(HTTP/3)になっている

  39. まとめ

  40. まとめ • Fastlyを導入することでVarnish冗長化問題を解決できた • 失効済みコンテンツの配信が素晴らしい • Datadogと連携したログ監視が素晴らしい • BrotliやHTTP/3(QUIC)に触れる機会を作れた •

    Fastlyのサポートが神
  41. ご静聴ありがとうございました!