Download to read offline
Uploaded byClassmethod,Inc.
Amazon CloudFrontで始めるお手軽簡単CDN
今までCDN（Contents Delivery Network）の導入に躊躇していた方向けに、Amazon CloudFrontを利用したCDNの導入方法や導入時の注意点を解説いたします。
![[AWSマイスターシリーズ] Amazon CloudFront / Amazon Elastic Transcoderによるコンテンツ配信](https://cdn.slidesharecdn.com/ss_thumbnails/20131120aws-medister-regenerate-cloudfrontetspublic-131120181553-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Amazon CloudFrontで始めるお手軽簡単CDN
- 1.
- 2. 2自己紹介 濱田 孝治 • 2017年9月入社 •SIerからクラスチェンジ • 大阪出身、東京勤務 • @hamako9999
- 3. 3自己紹介 濱田 孝治 • 2017年9月入社 •SIerからクラスチェンジ • 大阪出身、東京勤務 • @hamako9999 • 人生福岡初上陸！！
- 4.
- 5.
- 6.
- 7. 7この数字はなんでしょう？ 1秒→3秒 32％↑ 1秒→5秒 90％↑ 1秒→6秒106%↑ 1秒→7秒 113%↑ 1秒→10秒 123%↑
- 8. 8答え 表示速度が１秒からX秒になると 直帰率がY％上昇 New Industry Benchmarksfor Mobile Page Speed - Think With Google https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
- 9.
- 10.
- 11.
- 12.
- 13. 13アジェンダ Webサイトの速度改善戦略 AmazonCloudFrontとは？ 導入ケースの紹介 キャッシュコントロール機能 検証時の注意点 CloudFrontのコスト
- 14.
- 15.
- 16.
- 17.
- 18.
- 19. 19Webサイトの速度改善戦略 1. 処理速度を向上させる 2. 処理を並列化する 3.処理を減らす 手間がかかる 手間がかかる
- 20. 20Webサイトの速度改善戦略 1. 処理速度を向上させる 2. 処理を並列化する 3.処理を減らす 手間がかかる 手間がかかる 簡単！！
- 21. 21Webサイトの速度改善戦略 1. 処理速度を向上させる 2. 処理を並列化する 3.処理を減らす 手間がかかる 手間がかかる 簡単！！
- 22. 22Webサイトの速度改善戦略 1. 処理速度を向上させる 2. 処理を並列化する 3.処理を減らす 手間がかかる 手間がかかる キャッシュ
- 23.
- 24. 24Webアプリケーション階層構造 Client Internet WebApp Database
- 25. 25各層におけるキャッシュ例 Client Internet WebApp Database • ブラウザ キャッシュ • Akamai •CloudFront •Cloud Flare • Nginx • Apache mod_cache • APC（php） • API Gateway response cache • Amazon ElastiCache • redis • Memcached • Amazon DynamoDB Accelerator （DAX）
- 26.
- 27.
- 28.
- 29.
- 30. 30Webサイトの速度改善戦略 1. 処理速度を向上させる 2. 処理を並列化する 3.処理を減らす 手間がかかる 手間がかかる キャッシュ
- 31. 31Webサイトの速度改善戦略 1. 処理速度を向上させる 2. 処理を並列化する 3.処理を減らす 手間がかかる 手間がかかる キャッシュ Amazon CloudFront
- 32.
- 33. 33Amazon Cloud Frontとは？ ContentsDelivery Network（CDN） 画像や動画など容量の大きな情報を インターネットで提供する時 効率よく配信するための仕組み
- 34. 34代表的なContents Delivery Network •Akamai • インターネットトラフィックの２割を捌く最 大手CDN事業者 • CloudFlare • 無料プランがあるCDNサービス。 WordPress等での利用が多い • Amazon CloudFront • AWSマネージドのCDNサービス
- 35.
- 36.
- 37.
- 38.
- 39. 39CloudFront導入ユースケース ① EC2、のみで静的ページをホスティングしている ② EC2、1台とRDSで動的ページをホスティングして いる ③EC2、複数台とRDSで動的ページをホスティングし ている
- 40.
- 41.
- 42. 42導入ケース① CloudFront導入後（仮の姿） Route 53Client www.example.com 静的コンテンツ EC2ELBCloudFront オリジンに対してアクセスがあった コンテンツは全てCloudFrontで キャッシュ →２回め以降は CloudFrontのエッジキャッシュサー バから静的コンテンツを配信 可用性を意識してEC2を２台構成に していたものを1台にするなど検討
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50. 50導入ケース③ • WordPressにおける、画像ファイルのS3 格納対応方法例 • 専用プラグインを使う（StaticPressS3、 WP Offload S3 Lite） • goofys等の、Linux→S3マウントツールを利 用する
- 51. 51導入ケース③ CloudFront導入後 CloudFrontRoute 53Client 静的コンテンツ 動的コンテンツ ELB EC2 RDS S3 www.example.com タイプコンテンツ キャッシュされる？ パス S3 Bucket 画像ファイル、Uploads、CSS、 JavaScript ◯ /wp-includes /wp-content Custom Origin WordPressにより生成される動的な HTMLドキュメント △（部分的に） /login.php /wp-admin Default(*) CloudFrontの設定内容
- 52.
- 53. 53キャッシュコントロール機能 • CDNにおいて、キャッシュヒット率の向 上が最重要 • GET/HEAD/OPTIONのリクエストが対象 •URLパス毎にキャッシュ期間指定が可能 • フォワードオプション機能により、動的ペー ジの配信が可能 • Header / Cookie / Query Strings URLおよび有効化したフォワードオプション機能のパラメータ値の完全一致でキャッシュが再利用される
- 54.
- 55. 55キャッシュコントロール機能（動的コンテンツ） • オリジンサーバに対して、Header、Cookie、 Query Stringsをフォワードすることで動的ページ 配信に対応 •URLパス毎に、細かなキャッシュコントロールが可 能 • Whitelistを利用して、アプリケーション動作に必 要なパラメータのみフォワードすることで、キャッ シュを有効活用 • キャッシュしないコンテンツでも、オリジンとの通 信最適化による配信の高速化が期待できる
- 56. 56キャッシュコントロール機能（参考） • 動的なコンテンツ配信 -Amazon CloudFront • https://aws.amazon.com/jp/cloudfront/dynamic- content/ • CloudFront エッジキャッシュにオブジェクトを保持す る時間の指定（有効期限切れ） • https://docs.aws.amazon.com/ja_jp/AmazonCloudFro nt/latest/DeveloperGuide/Expiration.html • Amazon CloudFrontのキャッシュ期間をコントロール する(2015年6月版) • https://dev.classmethod.jp/cloud/cloudfront-cache- control/
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68. 68まとめ • CDN（Contents DeliveryNetwork）は、Webサ イトの速度向上に非常に有用な手段だ • Amazon CloudFrontを利用することで、静的コン テンツだけではなく、動的コンテンツもキャッシュ 対象とすることができる • クラスメソッドメンバーズに入ると、CloudFront がむちゃくちゃお安く使えますよ！
- 69.
Editor's Notes
- #5 はい。毎年恒例「これはなんでしょう？」のコーナーが始まりました。みなさん、もう流石に眠そうなのでね、ちょっと考えてみてください。
- #6 もし、何か匂った方がいてもですね、とりあえず、微笑んでおいてください。
- #7 もう少し数字でてきます。
- #8 さらにどどんと。 ヒントとしては、今回ワタシがお話させて頂く、CDNの適用領域に関する話題となります。
- #10 まぁこんだけずらずらっとならぶと、なんかちょっと嫌な感じですが、この結果から読み取れる教訓は、次の通り
- #11 「速さは正義」ということです。皆さん、今回参加いただいている皆さんの中で、Webサイトにまったく携わったことが無い！という方は皆無だと思います。 ここで正義とひとことで簡単に言ってしまうと、伝わりにくいんですが、この正義、いろんな意味が含まれています。 例えば、Eコマースサイトであれば、ページスピード速度はそのまま、売上に直結します。コーポレートサイトであれば、情報発信力やブランドイメージにも関わってくるかと思います。技術力への信頼もゆるぎます。また、イントラサイトだとすれば、それはそのまま社員の方の生産性に直結するものであると。 手前味噌で恐縮ですが、developers.ioは、むちゃくちゃ早いです。WordPressの極限を突き詰めてます。 Webサイトの本来の目的を達するための要件として、最重要事項の一つと言って良いです。 というわけで、本日私がここにいる理由はずばりこちら
- #12 Webサイトの高速化手法として、まずは、そもそもの処理速度の向上 Webサーバであれば、ロジックのアルゴリズムの改善、DBだと、SQLのパフォーマンスチューニングなどがあたるかと思いますが、
- #13 喋ること（よみあげ） 喋らないこと（読み上げ） はっきり言って、CloudFrontの機能のうち、３割も喋りません。が、あまり細かな機能をお話するよりも、Webサイトにおいて、CloudFrontを導入すると、わっしょ、こんな良いことがあるよ、というところをお話できれば良いです。
- #14 アジェンダはこんな感じです。
- #16 Webサイトの高速化手法として、まずは、そもそもの処理速度の向上 Webサーバであれば、ロジックのアルゴリズムの改善、DBだと、SQLのパフォーマンスチューニングなどがあたるかと思いますが、
- #17 手間かかりますね。工数かかると思います。もちろん処理の変更だけではなく、それに伴うテストなどを考えると、そんなにポンポン速度改善のためだけにロジックをいじる機会もあまりないかと思います。
- #18 じゃぁ、２つめのアプローチとして、処理を並列化するというやり方もありますね。例えば、フロントエンド側だと、各DOMの要素をAJAXで非同期で呼び出して体感的なレンダリング速度を向上させるであったりとか、サーバー側だと、プロセスを並列実行させて、DBアクセス処理を同時に流すとかがあるかと思いますが、
- #19 まぁこれも同じく手間がかかりますね。並列化したからってなんでも早くなるわけではないですしね。特に書き込みが発生するDBトランザクション処理とか、おいそれと並列化したかって、ACID属性を維持した並列化して高速化しようとしたら、それこそ物理的にテーブルやDBそのものを分けるとかしないと、スケールしませんよね。そんな簡単に並列化して高速化なんていえません。
- #20 じゃ、最後のアプローチとして、そもそも、処理を減らす、これどうでしょう？
- #21 はい簡単です。やること減らすだけなので。
- #22 これぐらい簡単です。むっちゃ簡単そうなニュアンスだけ伝わればOKです。 でですね。これだけみると、「あんた何を言ってはりますん？」という気持ちになる方もおられると思います。 これ、一般的になんて言っているかというと、すごくありふれた用語ですね。
- #23 キャッシュと、言う単語がここに当てはまります。
- #24 キャッシュ的なものをどんどん活用していこうじゃないか、というわけです。 ここで、一般的なWebアプリケーションの構造をおさらいしておきます。
- #25 こんな感じで、左から、クライアント、インターネット、Web（ELB）、アプリケーションサーバ、データベースがあると、いうのが一般的なWebアプリケーションの構造ですと。 で、これに対してですて、各層において、どんなキャッシュ戦略を取りうることが可能か？というのが、次のスライドになります。
- #26 ざらーっと、代表的なところを並べてみました。
- #31 キャッシュと認識していただいてOKです。
- #33 ここまででで、WebシステムにおけるCDNサービスの位置づけ的な話をしてきましたが、Amazon CloudFrontが、実際なんやねんという話をいたします。
- #34 ここで、お伺いしたいんですが、 今まで、何かしらCDNサービスを使われたことがある方って、どのぐらいおられますか？ さらに、じゃ、Amazon CloudFromtを使ったことがあるかたもおられれば。
- #35 手間かかりますね。工数かかると思います。もちろん処理の変更だけではなく、それに伴うテストなどを考えると、そんなにポンポン速度改善のためだけにロジックをいじる機会もあまりないかと思います。 じゃぁ、２つめのアプローチとして、処理を並列化するというやり方もありますね。例えば、フロントエンド側だと、各DOMの要素をAJAXで非同期で呼び出して、体感的なレンダリング速度を向上させるであったりとか、サーバー側だと、プロセスを並列実行させて、DBアクセス処理を同時に流すとかがあるかと思いますが、
- #39 それでは、実際にCloudFront導入するときのユースケースを紹介いたします。
- #40 既存のWebサイトをモデルにして、CloudFrontを導入するユースケースを３つほど挙げさせていただきました。 それぞれをですが、使用前、使用後で比較していただくことで、CloudFrontをどうやって導入して使うことができるんかなぁ？というところを感じていただければと思います。
- #58 それでは、実際にCloudFront導入するときのユースケースを紹介いたします。
- #63 最後ですね。CloudFront、実際いくらぐらいかかんのん？という、コスト面、お答えいたします。
- #66 Webサイトの高速化手法として、おもに３つの戦略が挙げられます。 「（読み上げ）」 まず第一に、処理速度を向上させるというアプローチ。WebサーバからDBサーバへのリクエスト、そのトランザクションの処理内容を改善して、高速化させる。よくあるのが、DBパフォーマンス・チューニング（SQLの改善）であったりとか、Webサーバー側だと、アプリケーション処理の効率化など挙げられますが、
- #67 Webサイトの高速化手法として、おもに３つの戦略が挙げられます。 「（読み上げ）」 まず第一に、処理速度を向上させるというアプローチ。WebサーバからDBサーバへのリクエスト、そのトランザクションの処理内容を改善して、高速化させる。よくあるのが、DBパフォーマンス・チューニング（SQLの改善）であったりとか、Webサーバー側だと、アプリケーション処理の効率化など挙げられますが、
- #68 それでは、実際にCloudFront導入するときのユースケースを紹介いたします。