Slide 1
Slide 1 text
トラベルブックの
Fastly導入事例
トラベルブック株式会社
岩倉誠徳 (Masanori Iwakura)
Slide 2
Slide 2 text
アジェンダ
- 自己紹介
- はじめに
- 導入した経緯
- トラベルブックの構成紹介
- 設定例紹介
- 失効済みコンテンツの配信
- Brotliの設定
- HTTP/3(QUIC )の設定
- まとめ
Slide 3
Slide 3 text
自己紹介
岩倉 誠徳 (いわくら まさのり)
バックエンドメインのWEBエンジニア
GitHub: MasanoriIwakura
好きなFastlyの機能：失効済みコンテンツの配信 ※後述
Slide 4
Slide 4 text
はじめに
2021年11月、トラベルブックはFastlyを導入しました👏👏👏
Brotli, HTTP/3(QUIC)と言った比較的新しい技術も導入したので
最後までお付き合いいただけますと幸いです
Slide 5
Slide 5 text
導入した経緯
● 元々はVarnishをEC2に入れてキャッシュ管理
● 日に日にキャッシュ対象のパスやページが増加
● Varnishサーバーが単一障害点となるリスク
冗長化したい！！！
スケールを自動化したい！！！
Slide 6
Slide 6 text
構成紹介
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
管理方法
構成管理：Terraform
● AWSの構成管理でも使用している
● サービスをソース管理したい
サービス管理：VCL
● Varnishで使用した実績がある
● Varnishからの移行が比較的容易そう
Slide 9
Slide 9 text
管理方法
死活・ログ監視：Datadog
● 既存のシステムでも使用している
● ログの表示がとても優秀
Slide 10
Slide 10 text
設定例紹介
Slide 11
Slide 11 text
Terraformを使用した管理
プロジェクト構成
● modules
○ VCLの管理
○ ログフォーマット管理
○ (Compute@Edgeの導入も検討)
● production
● staging
Slide 12
Slide 12 text
Terraformを使用した管理
参考: https://registry.terraform.io/providers/fastly/fastly/latest/docs
● Fastlyの設定画面で行えることは、ほぼ可能
● 管理画面で存在するのにTerraformから行えない設定には遭遇していない
Slide 13
Slide 13 text
Datadogへのログ送信
TerraformでDatadogへの送信設定を追加 Fastlyの変数を埋め込み可能
Slide 14
Slide 14 text
Datadogへのログ送信
Fastlyからログを送信することにより、リアルタイムに状況を可視化
例として、
- 200系レスポンスの割合
- エラーレスポンスの割合
- キャッシュのヒット率
- アクセスしているブラウザ
OSの割合
などをダッシュボードで確認が可能
Slide 15
Slide 15 text
Datadogへのログ送信
フィルター機能で任意のIPで絞り込んだり、任意のパスで絞り込んだりすることが可能
リアルタイムにログを確認することができるため
障害発生時や攻撃を受けている時の調査に有効的
Slide 16
Slide 16 text
Staleについて
Staleなし
Staleあり
TTL+Staleの期間内は常にキャッシュが返却される
Slide 17
Slide 17 text
Staleの設定で苦戦したポイント
[苦戦ポイント]
Staleの期間内なのにキャッシュがHITしない？
[原因]
1. TTLの時間が3700秒未満に設定されていた
2. オリジンシールドのStaleを無効化し、POPだけでStaleを有効化していた
メモリ持ちになってしまうため LRUが
発生しやすい
Slide 18
Slide 18 text
改善前の設定
アクセスするPOPによってキャッシュのHIT/MISSが変わる
Slide 19
Slide 19 text
改善後の設定
オリジンシールドのStaleが適用される
Slide 20
Slide 20 text
Purgeについて
● All Purge →サービス全体のキャッシュ削除
● URL Purge →指定したURLだけキャッシュ削除
● Surrogate-Key Purge →独自で指定したキーでキャッシュ削除
Slide 21
Slide 21 text
Purgeについて
hotelのキーを指定→ホテルに関するページ全てのキャッシュを削除
hotel-item-1を指定→特定のページのみ削除
Slide 22
Slide 22 text
カスタムエラーページについて
参考：https://docs.fastly.com/ja/guides/creating-error-pages-with-custom-responses
Slide 23
Slide 23 text
カスタムエラーページの実現方法
AWSのS3に配置したHTMLを参照するように設定
Fastly側でHTMLを管理する必要なく、最小限の修正でカスタムエラーページを実現
Slide 24
Slide 24 text
失効済みコンテンツの配信
Slide 25
Slide 25 text
失効済みコンテンツの配信
参考：https://docs.fastly.com/ja/guides/serving-stale-content
Slide 26
Slide 26 text
失効済みコンテンツの配信
次のアクセス時には
キャッシュが適用
Slide 27
Slide 27 text
失効済みコンテンツの配信
ユーザーにはエラーを
認識させない！！
Slide 28
Slide 28 text
Brotliの設定
Slide 29
Slide 29 text
Brotli(ブロトリ)とは
● Googleが開発した圧縮方式
● 他の圧縮形式と比べて高い圧縮率
● Edge, Firefox, Chrome, Safariなど主要ブラウザで対応している
Slide 30
Slide 30 text
Brotliの実験
実際にどれくらい圧縮されるのか、トラベルブックのトップページで実験
Slide 31
Slide 31 text
Brotliの実験 ※curlコマンドで検証
圧縮なし
Gzip圧縮
Brotri圧縮
Slide 32
Slide 32 text
Brotliの実験結果
約130KB
約19KB (86%圧縮)
約13KB (90%圧縮)
参考：https://tech.travelbook.co.jp/posts/introducing-fastly/
ページによって結果が異なる場合があるため、あくまでも参考
Brotliの勝利！！
Slide 33
Slide 33 text
Brotli設定手順
1. FastlyサポートにBrotliを有効化していただく
2. VCLでBrotli圧縮を有効化
対応ブラウザ以外では他の圧縮形式にし
たいため、Accept-Encodingで判定して
未対応の場合はgzip圧縮
Slide 34
Slide 34 text
HTTP/3の設定
Slide 35
Slide 35 text
HTTP/3(QUIC)とは？
● HTTP/2に続く新バージョン
● Googleが開発したQUICを使用することで高速化(UDP通信)
Slide 36
Slide 36 text
HTTP/2(TCP+TLS)とHTTP/3(QUIC)の対比
やり取りが少ない！
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
HTTP/3の設定確認
対応ブラウザからアクセスし、確認
h3(HTTP/3)になっている
Slide 39
Slide 39 text
まとめ
Slide 40
Slide 40 text
まとめ
● Fastlyを導入することでVarnish冗長化問題を解決できた
● 失効済みコンテンツの配信が素晴らしい
● Datadogと連携したログ監視が素晴らしい
● BrotliやHTTP/3(QUIC)に触れる機会を作れた
● Fastlyのサポートが神
Slide 41
Slide 41 text
ご静聴ありがとうございました！