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

Slide 1

Slide 1 text

e-kanzi Website renewal with fastly Yamagoya Meetup 2018 10/24 iwanaga kakeru @kakerukaeru

Slide 2

Slide 2 text

どうにゅう

Slide 3

Slide 3 text

とあるサイトをリニューアルしました今日話す事 CDNレイヤーでほどほどのやっていきをした話をします今日話さない事 originの細かい設計 https://bit.ly/OSSWA2018

Slide 4

Slide 4 text

Amebaニュース ● 200X年リリース ● ニュースサイト ● 認証ページなし ● 更新頻度も低く ● 回遊性は低く、読み切り型 ● SEOに優しいといいでしょう ● PC/SP/AMP ｱﾙﾖ ● etc... https://news.ameba.jp

Slide 5

Slide 5 text

なぜリニューアル ● SEO ○ ニュースサイト ○ ある程度育ったドメイン ● レガシー ○ 積み上がった歴史 ○ 保守性高く直したい ○ 運用コスト安く https://news.ameba.jp

Slide 6

Slide 6 text

なぜfastly ● 使ってみたかった ○ ﾄﾃﾓﾀﾞｲｼﾞ ● Configurationが楽 ○ API friendly ○ Integration ○ tarraform ○ vcl https://news.ameba.jp

Slide 7

Slide 7 text

Architecture API origin PC origin SP / AMP origin static resource origin

Slide 8

Slide 8 text

fastlyでやっていったこと ● debugしやすくする ● CacheHit率を上げる ● +α

Slide 9

Slide 9 text

fastlyでやっていったこと ● debugしやすくする ○ CacheObjectを理解しよう ○ logを見やすくしよう ○ CI/CDを回そう ● CacheHit率を上げる ● +α

Slide 10

Slide 10 text

Cache Object ● CacheObjectを理解する speakerdeck/vary-and-the-future-of-cache-variation docs.fastly.com/manipulating-the-cache-key

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Cache Object ● CacheObjectを理解する ● Cache-Key = Method + vcl_hash + Vary key ● docs.fastly.com/creating-custom-vcl

Slide 13

Slide 13 text

Response X-Cache-Key

Slide 14

Slide 14 text

Response X-Cache-Key

Slide 15

Slide 15 text

logging ● CacheKeyは分かった ● 集約して可視化したい ● 気になりポイント ○ なるべくリアルタイム ○ なるべく管理は少なく ○ なるべく楽したい speakerdeck/vary-and-the-future-of-cache-variation

Slide 16

Slide 16 text

logging docs.fastly.com/log-streaming-syslog ● CacheKeyは分かった ● 集約して可視化したい ● 気になりポイント ○ なるべくリアルタイム ○ なるべく管理は少なく ○ なるべく楽したい syslog

Slide 17

Slide 17 text

logging docs.fastly.com/log-streaming-syslog ● CacheKeyは分かった ● 集約して可視化したい ● 気になりポイント ○ なるべくリアルタイム ○ なるべく管理は少なく ○ なるべく楽したい ● 最近正式Integration出た？

Slide 18

Slide 18 text

logging docs.fastly.com/log-streaming-syslog ● CacheKeyは分かった ● 集約して可視化したい ● 気になりポイント ○ なるべくリアルタイム ○ なるべく管理は少なく ○ なるべく楽したい ● CacheMISSをあぶり出そう ○ URL / UA parser

Slide 19

Slide 19 text

logging

Slide 20

Slide 20 text

logging

Slide 21

Slide 21 text

CI/CD ● 高速にdebugし、高速にdeployしよう ● CircleCI ○ for test ■ mocha + chai ○ for deploy ■ terraform ■ custom vcl www.terraform.io/docs/providers/fastly

Slide 22

Slide 22 text

CI/CD ● 高速にdebugし、高速にdeployしよう ● CircleCI ○ for test ■ mocha + chai ○ for deploy ■ terraform ■ custom vcl www.terraform.io/docs/providers/fastly

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

CI/CD ● 高速にdebugし、高速にdeployしよう ● test ○ stg test required before prd apply ○ prd test ■ cron trigger www.terraform.io/docs/providers/fastly

Slide 25

Slide 25 text

CI/CD www.terraform.io/docs/providers/fastly ● 高速にdebugし、高速にdeployしよう ● test ○ stg test required before prd apply

Slide 26

Slide 26 text

CI/CD www.terraform.io/docs/providers/fastly ● 高速にdebugし、高速にdeployしよう ● test ○ stg test required before prd apply ○ prd test ■ cron trigger

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

準備終わり

Slide 29

Slide 29 text

fastlyでやっていったこと ● debugしやすく ● CacheHit率を上げる ○ Cache戦略 ○ normalize ○ offload ● +α

Slide 30

Slide 30 text

大体の方針 ● Cache ○ Static / Dynamic Content ○ Cache the API Resources ○ Cache Coverage ≒ 100% ○ Surrogate-Control > max-age ● Purge ○ Instantly purge ○ Surrogate-Key

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Purge戦略 ● 「迅速purgeの準備を」 ● Instantly purge ● Surrogate-Key ○ のような単位でグルーピング ■ entry ■ image ■ release

Slide 33

Slide 33 text

Cache / normalize User-Agent

Slide 34

Slide 34 text

Cache / normalize QueryParameter

Slide 35

Slide 35 text

Cache AMP CORS resources

Slide 36

Slide 36 text

Cache OPTION Request その１

Slide 37

Slide 37 text

Cache OPTION Request その２

Slide 38

Slide 38 text

Cache with API Key

Slide 39

Slide 39 text

あともうちょっと

Slide 40

Slide 40 text

fastlyでやっていったこと ● debugしやすく ● CacheHit率を上げる ● +α ○ 運用 ○ etc...

Slide 41

Slide 41 text

maintenance Operation

Slide 42

Slide 42 text

Server Timing

Slide 43

Slide 43 text

開発チームの喜びの声

Slide 44

Slide 44 text

喜びの声 ● Ω「ﾁｮｯﾊﾟﾔ!!」

Slide 45

Slide 45 text

喜びの声 ● Ω「ﾁｮｯﾊﾟﾔ!!」 ● Ω「CacheHit率が!!」

Slide 46

Slide 46 text

喜びの声 ● Ω「ﾁｮｯﾊﾟﾔ!!」 ● Ω「CacheHit率が!!」 ● Ω「時代はDBレス!!(嘘)」

Slide 47

Slide 47 text

ちなみに、最初は... CachaHit率 20%からスタート

Slide 48

Slide 48 text

ちなみに、最初は... ただの勘違いで、コツコツ対応すればいい感じに

Slide 49

Slide 49 text

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