Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Amazon CloudFrontで始めるお手軽簡単CDN

1,028 views

Published on

今までCDN(Contents Delivery Network)の導入に躊躇していた方向けに、Amazon CloudFrontを利用したCDNの導入方法や導入時の注意点を解説いたします。

Published in: Technology
  • Be the first to comment

Amazon CloudFrontで始めるお手軽簡単CDN

  1. 1. Amazon CloudFrontで始めるお手軽簡単CDN 〜あなたのWebサイトも月○○円で 爆速化できちゃうかも?〜 AWS事業部 ソリューションアーキテクト 濱田孝治 2018/1/16 1
  2. 2. 2自己紹介 濱田 孝治 • 2017年9月入社 • SIerからクラスチェンジ • 大阪出身、東京勤務 • @hamako9999
  3. 3. 3自己紹介 濱田 孝治 • 2017年9月入社 • SIerからクラスチェンジ • 大阪出身、東京勤務 • @hamako9999 • 人生福岡初上陸!!
  4. 4. 4 これなんでしょう?のコーナー
  5. 5. 5この数字はなんでしょう? 1秒→3秒 32%↑
  6. 6. 6この数字はなんでしょう? 1秒→3秒 32%↑ 1秒→5秒 90%↑ 1秒→6秒 106%↑
  7. 7. 7この数字はなんでしょう? 1秒→3秒 32%↑ 1秒→5秒 90%↑ 1秒→6秒 106%↑ 1秒→7秒 113%↑ 1秒→10秒 123%↑
  8. 8. 8答え 表示速度が1秒からX秒になると 直帰率がY%上昇 New Industry Benchmarks for Mobile Page Speed - Think With Google https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
  9. 9. 9答え 表示速度が1秒から3秒に落ちると、直帰率は32%上昇 表示速度が1秒から5秒に落ちると、直帰率は90%上昇 表示速度が1秒から6秒に落ちると、直帰率は106%上昇 表示速度が1秒から7秒に落ちると、直帰率は113%上昇 表示速度が1秒から10秒に落ちると、直帰率は123%上昇
  10. 10. 10 速さは正義
  11. 11. 11本日皆さんにもってかえってもらいたいもの みなさんが現在運営されている Webサイト速度改善のヒント
  12. 12. 12しゃべる事、しゃべらない事 ・CDNとは? ・CloudFrontの特徴 ・代表的なユースケース ・導入時の注意点 ・CloudFrontの詳細な機 能の説明 ・他のCDNとの比較
  13. 13. 13アジェンダ  Webサイトの速度改善戦略  Amazon CloudFrontとは?  導入ケースの紹介  キャッシュコントロール機能  検証時の注意点  CloudFrontのコスト
  14. 14. 14 Webサイトの速度改善戦略
  15. 15. 15Webサイトの速度改善戦略 1. 処理速度を向上させる
  16. 16. 16Webサイトの速度改善戦略 1. 処理速度を向上させる 手間がかかる
  17. 17. 17Webサイトの速度改善戦略 1. 処理速度を向上させる 2. 処理を並列化する 手間がかかる
  18. 18. 18Webサイトの速度改善戦略 1. 処理速度を向上させる 2. 処理を並列化する 手間がかかる 手間がかかる
  19. 19. 19Webサイトの速度改善戦略 1. 処理速度を向上させる 2. 処理を並列化する 3. 処理を減らす 手間がかかる 手間がかかる
  20. 20. 20Webサイトの速度改善戦略 1. 処理速度を向上させる 2. 処理を並列化する 3. 処理を減らす 手間がかかる 手間がかかる 簡単!!
  21. 21. 21Webサイトの速度改善戦略 1. 処理速度を向上させる 2. 処理を並列化する 3. 処理を減らす 手間がかかる 手間がかかる 簡単!!
  22. 22. 22Webサイトの速度改善戦略 1. 処理速度を向上させる 2. 処理を並列化する 3. 処理を減らす 手間がかかる 手間がかかる キャッシュ
  23. 23. 23キャッシュとは 時間のかかる処理は1回だけ 結果を何回も使いまわしする
  24. 24. 24Webアプリケーション階層構造 Client Internet Web App Database
  25. 25. 25各層におけるキャッシュ例 Client Internet Web App Database • ブラウザ キャッシュ • Akamai •CloudFront •Cloud Flare • Nginx • Apache mod_cache • APC(php) • API Gateway response cache • Amazon ElastiCache • redis • Memcached • Amazon DynamoDB Accelerator (DAX)
  26. 26. 26AWS Consoleでの表示 Amazon CloudFrontはEdge層に存在するサービスのため、リージョンの概念が無い
  27. 27. 27CDN導入理由 何故、CloudFrontを推すのか?
  28. 28. 28CDN導入理由 (基本的に)アプリケーション改修が無い 何故、CloudFrontを推すのか?
  29. 29. 29CDN導入理由 (基本的に)アプリケーション改修が無い 簡単・安い・うまい 何故、CloudFrontを推すのか?
  30. 30. 30Webサイトの速度改善戦略 1. 処理速度を向上させる 2. 処理を並列化する 3. 処理を減らす 手間がかかる 手間がかかる キャッシュ
  31. 31. 31Webサイトの速度改善戦略 1. 処理速度を向上させる 2. 処理を並列化する 3. 処理を減らす 手間がかかる 手間がかかる キャッシュ Amazon CloudFront
  32. 32. 32 Amazon CloudFrontとは?
  33. 33. 33Amazon Cloud Frontとは? Contents Delivery Network(CDN) 画像や動画など容量の大きな情報を インターネットで提供する時 効率よく配信するための仕組み
  34. 34. 34代表的なContents Delivery Network • Akamai • インターネットトラフィックの2割を捌く最 大手CDN事業者 • CloudFlare • 無料プランがあるCDNサービス。 WordPress等での利用が多い • Amazon CloudFront • AWSマネージドのCDNサービス
  35. 35. 35Amazon CloudFrontの特徴 大規模アクセスも世界中にあるエッジのキャパシティを 活用して効率的かつ高速にコンテンツ配信が可能 CloudFront オリジンサーバ ClientA ClientB ②コンテンツ取得 ③配信 ①リクエスト ④リクエスト ⑤キャッシュから配信 世界中にエッジロケーションが存在
  36. 36. 36Amazon CloudFrontの特徴 位置情報DBを利用した最適なエッジへの誘導 ClientA ①ドメイン名問い合わせ DNS ②IPアドレス問い合わせ (xxx.cloudfront.net) 位置情報DB DNS ③最適なEdgeアドレス応答 ④最適なEdgeロケーションへのアクセス CloudFront
  37. 37. 37Amazon CloudFrontの特徴 24か国55都市107の接続ポイント
  38. 38. 38 導入ケースの紹介
  39. 39. 39CloudFront導入ユースケース ① EC2、のみで静的ページをホスティングしている ② EC2、1台とRDSで動的ページをホスティングして いる ③ EC2、複数台とRDSで動的ページをホスティングし ている
  40. 40. 40導入ケース① ①EC2、のみで静的ページを ホスティングしている場合
  41. 41. 41導入ケース① CloudFront導入前 Route 53Client www.example.com 静的コンテンツ EC2 ELB
  42. 42. 42導入ケース① CloudFront導入後(仮の姿) Route 53Client www.example.com 静的コンテンツ EC2ELBCloudFront オリジンに対してアクセスがあった コンテンツは全てCloudFrontで キャッシュ → 2回め以降は CloudFrontのエッジキャッシュサー バから静的コンテンツを配信 可用性を意識してEC2を2台構成に していたものを1台にするなど検討
  43. 43. 43導入ケース① CloudFront導入後(真の姿) Route 53Client www.example.com 静的コンテンツ CloudFront CloudFrontで、静的コンテンツの キャッシュを実施。 サイズあたりの料金や、可用性が高 いS3を静的ファイルのホスティング 場所に指定 S3 静的ファイルを、可用性が高いS3に移設。さらにパフォーマンスを追求する(世界中からアクセスがあるよ うなサイト)必要があれば、CloudFrontの導入を検討する。
  44. 44. 44導入ケース② ②EC2、1台とRDSで動的ページを ホスティングしている
  45. 45. 45導入ケース② CloudFront導入前 Route 53Client www.example.com 動的コンテンツ ELB EC2 RDS
  46. 46. 46導入ケース② CloudFront導入後 Route 53Client www.example.com 動的コンテンツ ELB EC2 RDS CloudFrontで、静的ページと、動的ページの一部をキャッシュ。 アクセスパスによりキャッシュ設定を変更する(後述) CloudFront アプリケーション改修の手間を抑えて、手軽にCloudFrontのパフォーマンス改善効果を享受
  47. 47. 47導入ケース③ ③EC2、複数台とRDSで動的ページを ホスティングしている
  48. 48. 48導入ケース③ CloudFront導入前 Route 53Client www.example.com 動的コンテンツ ELB App RDS App App img 画像格納フォルダ(wp- content/uploads/)をNFSマウントし た別EC2インスタンスに格納
  49. 49. 49導入ケース③ CloudFront導入後 CloudFrontRoute 53Client 静的コンテンツ 動的コンテンツ ELB EC2 RDS S3 php jpg png js css www.example.com 静的コンテンツや画像ファイルは、 S3に格納するようにアプリケーショ ン変更し、キャッシュ化 動的コンテンツは、キャッシュパラ メータを適宜設定し、キャッシュ ヒット率を向上させる
  50. 50. 50導入ケース③ • WordPressにおける、画像ファイルのS3 格納対応方法例 • 専用プラグインを使う(StaticPress S3、 WP Offload S3 Lite) • goofys等の、Linux→S3マウントツールを利 用する
  51. 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. 52. 52 キャッシュコントロール機能
  53. 53. 53キャッシュコントロール機能 • CDNにおいて、キャッシュヒット率の向 上が最重要 • GET/HEAD/OPTIONのリクエストが対象 • URLパス毎にキャッシュ期間指定が可能 • フォワードオプション機能により、動的ペー ジの配信が可能 • Header / Cookie / Query Strings URLおよび有効化したフォワードオプション機能のパラメータ値の完全一致でキャッシュが再利用される
  54. 54. 54キャッシュコントロール機能(静的コンテンツ) • キャッシュヒット率 を高めるため、長め のTTLを設定する • HTTPヘッダーや、 クエリストリングや クッキーをフォワー ドしない • 要するに初期設定で OK
  55. 55. 55キャッシュコントロール機能(動的コンテンツ) • オリジンサーバに対して、Header、Cookie、 Query Stringsをフォワードすることで動的ページ 配信に対応 • URLパス毎に、細かなキャッシュコントロールが可 能 • Whitelistを利用して、アプリケーション動作に必 要なパラメータのみフォワードすることで、キャッ シュを有効活用 • キャッシュしないコンテンツでも、オリジンとの通 信最適化による配信の高速化が期待できる
  56. 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. 57. 57 検証時の注意点
  58. 58. 58検証時の注意点(問題点1) 検証環境においてCloudFrontを限られたIPアドレスか らのアクセスのみに制限したい場合、CloudFrontだけ ではそれができない CloudFront Client 動的コンテンツ ELB EC2 RDS CloudFrontにはセキュリティグループを設定できない。 そのため、CloudFrontだけでは、IPアドレス制限を実施 できない
  59. 59. 59検証時の注意点(解決策1) CloudFrontの前段にAWS WAFを導入してIPアドレ ス制限する CloudFront Client 動的コンテンツ ELB EC2 RDS WAFを導入し、ここでIPアドレス制限を実施する WAF
  60. 60. 60検証時の注意点(問題点2) CloudFrontのIPアドレス範囲が広いため、ELB側での セキュリティグループ設定が CloudFront Client 動的コンテンツ ELB EC2 RDS 世界中にエッジロケーションが配置さ れているため、IPアドレス範囲が広い。 WAF ELBのセキュリティグループにおけるIP アドレス制限が難しい。
  61. 61. 61検証時の注意点(解決策2) CloudFront側でカスタムヘッダーを設定。後ろの WAFで、そのカスタムヘッダーのみをELBに通すよう に設定する CloudFront Client 動的コンテンツ ELB EC2 RDS CloudFront側で事前に取り決めた秘密 のカスタムヘッダーをリクエストに付 与 WAF WAFでは、事前に取り消めたカスタム ヘッダーが付与されたリクエストのみ をELBに通す WAF
  62. 62. 62 CloudFrontのコスト
  63. 63. 63利用料金モデル https://aws.amazon.com/jp/cloudfront-cdn/
  64. 64. 64利用料金モデル https://aws.amazon.com/jp/cloudfront-cdn/
  65. 65. 65利用料金モデル https://classmethod.jp/services/members/
  66. 66. 66利用料金モデル https://classmethod.jp/services/members/
  67. 67. 67 まとめ
  68. 68. 68まとめ • CDN(Contents Delivery Network)は、Webサ イトの速度向上に非常に有用な手段だ • Amazon CloudFrontを利用することで、静的コン テンツだけではなく、動的コンテンツもキャッシュ 対象とすることができる • クラスメソッドメンバーズに入ると、CloudFront がむちゃくちゃお安く使えますよ!
  69. 69. 69 ご清聴ありがとうございました

×