速さの鍵を握る! Fastly で実現する CDN の力

Hibiya.Tech #4「初心者歓迎！使ってみた技術LT大会」登壇資料です。

Transcript

1. 速さの鍵を握る! 
 Fastly で実現する CDN の力
 クラスメソッド株式会社 AWS事業本部 | 平木 佳介
 1
2. 自己紹介 2 ~$ whoami
 平木佳介 (Hiraki Keisuke)
 ~$
 ~$ jobs
 [2]+ 実行中 クラスメソッド(株) AWS事業本部 コンサルティ ング部
 ~$
 ~$ groups
 ソリューションアーキテクト | AWS Community Builder
 ~$
 ~$ cat 平木佳介.conf | grep 趣味
 趣味： 旅行/推し事
 ~$
 ~$ cat 平木佳介.conf | grep 最近ハマっているサービス
 最近ハマっているサービス： Canva

3. 3 みなさんはwebサイトを立ち上げたことをあり ますか？

4. 4 多くの人たちに見てもらえるwebサイトを目指す！
 ⇓
 SEO対策

5. 5 SEO対策とCDNに何の関連が？

6. 6 Google 検索の基本事項（旧ウェブマスター向けガイドライン）
 <引用>
 Google 検索では、AMP ページをインデックスに登録することによって、信頼性に優れ た高速なウェブ エクスペリエンスを実現しています。
 （略）
 AMP であるかどうかが直接 Google 検索のランキングに影響することはありません が、スピードはランキングに影響します。

7. 7 Google 検索セントラル ブログ
 <引用>
 2018 年 7 月より、ページの読み込み速度を
 モバイル検索のランキング要素として使用することになりました。

8. 8 Webページの配信を高速化したい！
 ⇓
 CDN

9. 9 トピック CDNとは
 01
 02
 04
 03
 CDNの仕組みやメリット
 Fastlyとは
 Fastlyの魅力

10. 10 CDNとは
 Content
 
 コンテンツ
 HTML,CSS,MP3
 etc...
 Delivery
 
 
 配信する
 Network
 
 
 ネットワーク
 多くの種類のコンテンツをネットワークを介して
 配信（デリバリー）するシステムや仕組みのこと

11. 11 CDNの仕組み
 クライアント
 （日本）
 クライアント
 （米）
 インターネット
 IXP
 インターネット
 オリジン
 （オリジンサーバー）
 エッジ
 （サーバー）
 DNS
 （サーバー）
 日本
 米
 CDN

12. 12 CDNの仕組み
 クライアント
 （日本）
 クライアント
 （米）
 インターネット
 IXP
 インターネット
 オリジン
 （オリジンサーバー）
 エッジ
 （サーバー）
 DNS
 （サーバー）
 日本
 米
 CDN
 example.com

13. 13 CDNの仕組み
 クライアント
 （日本）
 クライアント
 （米）
 インターネット
 IXP
 インターネット
 オリジン
 （オリジンサーバー）
 エッジ
 （キャッシュサーバー） 
 DNS
 （サーバー）
 日本
 米
 CDN
 example.com
 CDNの配信サーバ拠点は PoP（Point of Presence） と呼ぶ キャッシュ

14. 14 CDNの仕組み
 クライアント
 （日本）
 クライアント
 （米）
 インターネット
 IXP
 インターネット
 オリジン
 （オリジンサーバー）
 エッジ
 （キャッシュサーバー） 
 DNS
 （サーバー）
 日本
 米
 CDN
 example.com
 最新のキャッシュがない場合、 配信元のサーバーから取得 キャッシュ

15. 15 CDNの仕組み
 クライアント
 （日本）
 クライアント
 （米）
 インターネット
 IXP
 インターネット
 オリジン
 （オリジンサーバー）
 エッジ
 （キャッシュサーバー） 
 DNS
 （サーバー）
 日本
 米
 ここの領域を CDN
 example.com
 キャッシュ

16. 16 CDNのメリット
 配信速度 の短縮
 安全性
 の向上
 オリジンの
 負荷軽減
 CDNを活用することで様々な負担をオフロードできる

17. 17 CDNの代表的なサービス
 Ⓡ Akamai
 Ⓡ Fastly
 Ⓡ Cloudflare
 Amazon CloudFront

18. 18 Fastlyとは
 Fastly（ファストリー）は、
 インターネットのパフォーマンスと
 セキュリティを向上させる
 エッジクラウドプラットフォーム。
 FastlyのCDNにはVarnishをベースに作ら れているため、
 VCL（Varnish Configuration Language)という設定 言語で柔軟に設定が可能。

19. 19 Fastlyの魅力
 特徴
 画像： https://www.yoshinoya.com/special/100years/ 

20. 20 Fastlyの魅力
 特徴
 画像： https://www.yoshinoya.com/special/100years/ 

21. 21 Fastlyの魅力
 特徴
 は や い か ん た ん や す い
22. 22 Fastlyの魅力
 はやい
23. 23 Fastlyの魅力
 かんたん 様々なオプションの機能を細かい設定をせずに簡単に利用可能。
 画像最適化
 
 Image Optimizer
 WAF
 
 次世代WAF
 （Next-Gen WAF）
 compute
 
 
 Fastly Computing

24. 24 Fastlyの魅力
 やすい アカウントの契約形態は無料アカウントと有料アカウントがある。
 
 - 無料アカウント・・・開発向け。月額50ドル相当のトラフィック分利用可能。
 - 有料アカウント・・・本番向け。Fastly CDNについては、最初の10TBが「$0.19/1GB」 という従量課金というベースにある（要問い合わせ）
 
 従量課金以外にも月額定額のプランも提供している。

25. 25 まとめ