O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

WordPressのCDN化

WordPressのHTMLファイルCDN化のテクニック

  • Entre para ver os comentários

WordPressのCDN化

  1. 1. WordPressのCDN化 高速化とセキュリティ WordCamp Tokyo 2016 2016年9月17日 鍋島 公章 株式会社Jストリーム © 2015 J-Stream Inc. All Rights Reserved. 1 REV:20160915
  2. 2. 自己紹介 • 鍋島 公章 (なべしま まさあき) • 国産CDN (J-Stream CDNext)やってます • 大抵の機能(HTTP/2、動的ファイルのキャッシュ、CDN API、…)は実装 • 値段はCloudFrontの半額程度 • 代理店募集中 • 無料アカウントの発行 • エンジニア向けCDN教育(1日コース) • 担当SEのアサイン • WordCampにブースも出しています • セキュリティCDN(Incapsula)も売ってます • DDoS対策+WAF+CDN+セキュリティオペレーションセンタ © 2016 J-Stream Inc. All Rights Reserved. 2
  3. 3. はじめに • WordPressのCDN化 • イメージのみのCDN化(CDNオブジェクト配信) • プラグインで簡単に設定できる • html生成ボトルネックが残る(同時接続X百程度でギブアップ) • HTMLファイルのCDN化(CDN全サイト配信) • 設定にはコツがある • きちんと設定すれば高ピーク(同時接続X万~)に耐える • WordPress・SQLサーバチューニング、メモリDB導入等は不必要 • セキュリティ対策(WAF、DDoS防御)に必須 • 本資料の目的 • WordPress HTMLファイルのCDN化を「きっちり」説明 • 各CDNにおける設定例は以下に置きました • https://tech.jstream.jp/blog/meeting/wordcamptokyo2016/ © 2016 J-Stream Inc. All Rights Reserved. 3
  4. 4. 目次 • CDNについて • メリット • トラブルシュート • WordPressのCDN設定 • レベル1:イメージ配信 • レベル2:イメージ+HTML配信 • レベル3:イメージ+HTML配信+wp-admin秘匿化 • TIPS © 2016 J-Stream Inc. All Rights Reserved. 4
  5. 5. Part 1 • CDNについて © 2016 J-Stream Inc. All Rights Reserved. 5
  6. 6. CDN:Content Delivery Network • コンテント・デリバリー・ネットワーク/英語読み • Content (デジタルデータ/不可算名詞) • Not Contents(入れ物/可算名詞) • Delivery (配達):コンテントをクライアントに届けること • Not Distribution(流通):コンテンツを配信網内に分散させる • Network (実際には仮想ネットワーク) • Not 配信専用の物理Tire1ネットワーク(昔はあった) 6 © 2016 J-Stream Inc. All Rights Reserved. Contents Delivery Network Content
  7. 7. CDNとは • 配信のアウトソース • 地理分散 © 2016 J-Stream Inc. All Rights Reserved. 7 オリジンサーバ CDNサーバクライアント 7
  8. 8. CDNとは • メリット © 2016 J-Stream Inc. All Rights Reserved. 8 種別 用途 国際配信 アクセスの高速化 国内配信 ピーク対策、コスト削減 プロトコル変換 SSL化、HTTP/2化、WebSocket化等 セキュリティ対策 DDoS対策、WAF
  9. 9. CDNのメリット:高速化 • TCPの速度制限 • 前提:ショートセッション • ロングセッションはTCPウィンドウの自動拡張により速度改善 • 後進国 • 不十分な国際リンク © 2016 J-Stream Inc. All Rights Reserved. 9 距離 RTT 最高速度 東京・沖縄間 0.04秒 12.5Mbps 日米間 0.10秒 5.0Mbps 日欧間 0.20秒 2.5Mbps
  10. 10. CDNのメリット:ピーク対策 • ピーク例 • CDNの効果 © 2016 J-Stream Inc. All Rights Reserved. 10 ピーク同時接続 ピーク帯域 キャンペーン 通常の数~数十倍 メディア露出 同時接続:数千 数百Mbps TV連動 同時接続:数十万~ 数十Gbps~ 仮定:1ページあたり10オブジェクト、1オブジェクトたり20KB CDNなし CDNあり オリジン トラフィック
  11. 11. CDNのメリット:プロトコル変換 • プロトコル変換 • オリジンサーバ • HTTP/1.1 • CDNサーバ(変換後の主要プロトコル) • TLS • HTTP/2 • WebSocket 11 オリジンサライアント HTTP/2 HTTP CDNサーバ © 2016 J-Stream Inc. All Rights Reserved.
  12. 12. CDNのメリット:WAF • Web Application Firewall • 攻撃リクエストを落とす © 2016 J-Stream Inc. All Rights Reserved. 12 セキュリティCDN オリジンサーバ ボット スパマー 正当なトラフィック WAF Load Balancing Performance DDoS Mitigation ハッカー DDoS 出典:Incapsulaセールス資料
  13. 13. CDNのメリット:DDoS対策 • 通常のCDN • レイヤ3以下の物量攻撃に対応(大量配信=大量受信) • UDP大量パケット攻撃(DNSリフレクション)など • レイヤ4(TCP)以上の攻撃には弱い • TCP SYNアタック、HTTPリロードアタックなど • DDoS本格対応CDN • CDN+スクラビングセンター+SOC • スクラビングセンター • 物量攻撃への対策強化 • レイヤ4以上の攻撃に対応 • ボット排除(クッキー、チャレンジの挿入) • SOC(セキュリティ・オペレーション・センタ) • インシデントに迅速対応 © 2016 J-Stream Inc. All Rights Reserved. 13 70%のボットはクッキー未対応 99%のボットはチャレンジ(Javascript)未対応
  14. 14. CDNトラブルシュート • 4大トラブル • CDNが外れる • オリジンサイトへ飛ばされる • (Webアプリケーションの)動作がおかしい • CDNを入れたらWebアプリケーションの動作が変になった • キャッシュされない • すべてのリクエストがオリジンに届く • キャッシュが古い • 古いコンテンツが配信される • 管理画面が機能しない • その他 • CDN導入したら遅くなった、アクセス解析がおかしい、… © 2016 J-Stream Inc. All Rights Reserved. 14
  15. 15. CDNが外れる • 症状 • アクセス中にオリジンサイトに誘導される • 原因 • HTTPヘッダにオリジンサーバのFQDNが含まれる • Location, Refresh • オリジンサイトのFQDNが含まれるリンクがある • <a href=http://www-orig.example.jp/sub.html..> • WordPress • デフォルトはFQDNを含むフルパスを生成 • リンクをたどると、オリジンサイトに誘導 © 2016 J-Stream Inc. All Rights Reserved. 15
  16. 16. 動作がおかしい • 症状 • CDNを導入したらWebアプリケーションの動作が変 • 原因 • CDNがURLパラメータを削除する • index.php&pram=hoge.. • CDNがクッキーを削除する(ユーザ追跡できない) • WordPress • URLパラメータ • バージョン管理(例:xxx.js?ver=20160206) • /wp-admin/で使用 • クッキー • /wp-admin/で使用 © 2016 J-Stream Inc. All Rights Reserved. 16
  17. 17. キャッシュされない • 症状 • コンテンツがキャッシュされず、すべてのアクセスがオリジン に届く • CDNの意味がなくなる • 原因 • オリジンサイト(CMS)がno-cacheを付けている • WordPress • すべての記事(htmlファイル)にno-cacheを付ける © 2016 J-Stream Inc. All Rights Reserved. 17
  18. 18. キャッシュが古い • 症状 • 古いオブジェクトが配信される • Web管理ページが正常に動作しない • 原因 • ファイルにno-cache等を付けていない • CDNがクッキー付セッションをキャッシュする • WordPress • /wp-admin/以下ではクッキーを使用 • キャッシュされるべきでない © 2016 J-Stream Inc. All Rights Reserved. 18
  19. 19. Part 2 • WordPressのCDN化 © 2016 J-Stream Inc. All Rights Reserved. 19
  20. 20. アプローチ比較 © 2016 J-Stream Inc. All Rights Reserved. 20 レベル1 レベル2 レベル3 CDN化対象 イメージ サイト全体 (イメージ+HTML) wp-adminへの アクセス オリジン CDN経由 オリジン ピーク対策 △ ○ セキュリティ対策 (WAF、DDoS) × ○ セキュリティ対策 (wp-admin防御) × △ ○ 設定の容易さ ○ プラグイン使用 △ テクニック必要 × URL書き換え必要
  21. 21. CDN化レベル1:概要 • プラグイン利用によるイメージファイルのCDN配信 • イメージのURLをCDN化されたURLに書換 • 元:http://example.jp/wordpress/wp-content/uploads/a.png • 後:http://d3awb7d4.cdnext.net/wordpress/wp- content/uploads/a.png © 2016 J-Stream Inc. All Rights Reserved. 21 d3awb7d4.cdnext.net (CDNサーバ) クライアント www.example.jp <img src=“http://d3awb7d4.cdnext.net/...省略.../a.png> Index.php a.png
  22. 22. CDN化レベル1:詳細 • メリット • 設定が簡単(プラグインの有効化のみ) • デメリット • HTML生成の負荷を下げられない • プラグイン例 • Photon • W3 Total Cache © 2016 J-Stream Inc. All Rights Reserved. 22
  23. 23. CDN化レベル1:Photonプラグイン • 概要 • Jetpackプラグインに含まれるCDN機能 • Automattic社が運用 (国内に配信拠点あり) • 配信ドメイン: i[0-2].wp.com • 機能 • イメージファイル(のみ)をCDN経由で配信、イメージを再圧縮 • HTMLアトリビュート(Width、Height)に合わせる • imgタグを含むURLを自動的にCDN化 • 元URL:http://example.jp/wordpress/wp-content/uploads/2016/04/wp- banner.png • 変換後URL:http://i2.wp.com/example.jp/wordpress/wp- content/uploads/2016/04/wp-banner.png?resize=192%2C160 • 注意点 • キャッシュされたオブジェクトの更新はできない(オブジェクトを変更 した場合、ファイル名の変更が必要) © 2016 J-Stream Inc. All Rights Reserved. 23
  24. 24. CDN化レベル1:W3 Total Cache • 概要 • さまざまなCache機能を提供するプラグイン • 機能 • Minify, Database Cache, Object Cache, Browser Cache等 • CDN: CDN配信の管理 • オブジェクトのURLをCDN配信用に変換する • 対応CDN • Generic Mirror, Akamai, Cloudfront, MaxCDN等 • 一般のCDNもGeneric Mirrorを選ぶことにより使用可能 • CDN化オブジェクト(選択可能) • 添付ファイル, wp-includes、theme等 • URL変換例 • http://www.example.jp/wordpress/wp-content/uploads/2016/04/cdn- wall.png • http://72e79.cdnext.jp/wordpress/wp-content/uploads/2016/04/cdn- wall.png © 2016 J-Stream Inc. All Rights Reserved. 24
  25. 25. サイト全体のCDN化 • 概要 • WordPressサイト全体をCDN化(イメージもCDN配信する) • wp-adminディレクトリの扱いにより設定が異なる • CDN経由→レベル2 • オリジン直接→レベル3 • メリット • html生成の負荷を低減 • セキュリティ対策(WAF、DDoS対策)が可能 • デメリット • 設定が面倒(テクニックが必要) © 2016 J-Stream Inc. All Rights Reserved. 25クライアント www.example.jp (オリジン) Index.php a.png
  26. 26. サイト全体のCDN化(基本設定) • 設定 • オリジン設定変更(必要な場合) • CDN設定 • DNS設定変更 • 動作 © 2016 J-Stream Inc. All Rights Reserved. 26 CDN GSLB (DNSサーバ) ISP DNSサーバ www.example.jp example.jp DNS設定 www.example.jp cname umx89j.cdnext.net CDN会社から払いだされた FQDN umx89j.cdnext.net CDNサーバ 203.0.113.2203.0.113.2 203.0.113.2 203.0.113.2
  27. 27. 管理ディレクトリへのアクセス • wp-admin • レベル2:CDN経由 • レベル3:オリジン直接 • CDNがダウンしてもwp-adminを操作可能 • wp-admin防御の強化 • CDN経由のwp-adminアクセスは禁止(オリジンのホスト名を知らないとア クセス不可) © 2016 J-Stream Inc. All Rights Reserved. 27 オリジン Index.php /wp-admin/xxx レベル2 レベル3 www-6yjn3dg.example.jp 乱数による秘匿化
  28. 28. レベル2とレベル3比較 • 比較表 © 2016 J-Stream Inc. All Rights Reserved. 28 レベル2 レベル3 wp-adminの保護(秘匿化) × ○ wp-adminの保護(ディレクトリ保護) △ ○ CDNに障害が発生した場合のwp-adminへの アクセス ×※1 ○ 設定の容易さ ○ × オリジンサーバの設定変更 不必要 必要 ログ解析系プラグイン(StatPress等)※2 △ ×※3 wp-adminを上手く処理できないCDNへの対応 × ○ ※1:CDNを無効化すればアクセス可能 ※2:オリジンサーバへリクエストが届かなくなるため基本的に使用できなくなる ※3:URL書換の影響でページ解析等は動かない
  29. 29. レベル2設定:概要 • 概要 • wp-admin • CDN経由 • オリジンサーバの設定 • www.example.jpとして設定(CDNなしの場合と同じ設定) © 2016 J-Stream Inc. All Rights Reserved. 29 www.example.jp /wp-admin/xxx www.example.jp
  30. 30. レベル2設定:オリジン設定 • 変更なし(CDNを使用しない設定のまま) • Apache • バーチャルホスト:www.example.jp • WordPress • WordPressアドレス:http://www.example.jp/wordpress • サイトアドレス: http://www.example.jp/wordpress • DNS設定 • www-orig.example.jpを追加 © 2016 J-Stream Inc. All Rights Reserved. 30
  31. 31. レベル2設定:CDN設定 • オリジン指定 • ホスト指定 • www-orig.example.jp or IPアドレス • www.example.jpはCDNに向いているため • カスタム (HTTP HOST)ヘッダ • www.example.jp • バーチャルホストが使用されている場合 © 2016 J-Stream Inc. All Rights Reserved. 31 CDNサーバ オリジンサーバ GET index.html HTTP/1.1 …. HOST=www.example.jp TCP接続:www-orig.example.jp 異なる
  32. 32. レベル2設定:CDN設定 • キャッシュ設定 © 2016 J-Stream Inc. All Rights Reserved. 32 パス 設定項目 設定しない場合 /wordpress/wp-admin/* Postの有効化 エラー(操作できない) Cookieのスルー ログインできない クエリ文字列の有効化 画面が崩れる(操作できない) /wordpress/wp-login.php Cookieスルー ログインできない /wordpress/* クエリ文字列の有効化 バージョン管理(ver=x.x.x)できない cache-control無視 (TTL=60) キャッシュされない Postの有効化 コメントできない
  33. 33. レベル3設定:概要 • 概要 • wp-admin • 直接 • オリジンサーバの設定 • WordPress: www-orig.example.jpとして設定 • Apache:www-orig.example.jpとして設定 • OutPutFilter設定(www-orig.example.jpをwww.example.jpに変換) © 2016 J-Stream Inc. All Rights Reserved. 33 www.example.jp /wp-admin/xxx www-orig.example.jp OutPutFilter
  34. 34. レベル3設定:オリジン設定 • レベル3用のカスタム設定 • WordPress • WordPressアドレス:http://www-orig.example.jp/wordpress • サイトアドレス: http://www-orig.example.jp/wordpress • Apache • バーチャルホスト • www-orig.example.jp • OutputFilter指定 • 次ページ © 2016 J-Stream Inc. All Rights Reserved. 34
  35. 35. レベル3設定:オリジンOutPutFilter • apache.conf • <Location “/wordpress/”> • AddOutputFilter SUBSTITUTE .php .xml • SUBSTITUTE “s|//www-orig.example.jp|//www.example.jp|n” • SUBSTITUTE “s|¥/¥/www-orig.example.jp|¥/¥/www.example.jp|n” • SUBSTITUTE “s|%2F%2Fwww- orig.example.jp|%2F%2Fwww.example.jp|n” • </Location> • <Location “/wordpress/wp-admin/”> • RemoveOutputFilter SUBSTITUTE .php • </Location> • <Location “/wordpress/wp-login.php”> • RemoveOutputFilter SUBSTITUTE .php • </Location> © 2016 J-Stream Inc. All Rights Reserved. 35
  36. 36. レベル3設定:CDN設定 • オリジン指定 • ホスト指定 • www-orig.example.jp • カスタムヘッダ • 不要(デフォルトでHOSTが付与される) © 2016 J-Stream Inc. All Rights Reserved. 36 CDNサーバ オリジンサーバ TCP接続:www-orig.example.jp GET index.html HTTP/1.0 …. HOST=www-orig.example.jp 同じ
  37. 37. レベル3設定:CDN • キャッシュ設定 © 2016 J-Stream Inc. All Rights Reserved. 37 パス 設定項目 設定しない場合 /wordpress/wp-admin/* アクセス拒否 /wordpress/wp-login.php アクセス拒否 /wordpress/* クエリ文字列の有効化 バージョン管理(ver=x.x.x)できない cache-control無視 (TTL=60) キャッシュされない Postの有効化 コメントできない
  38. 38. TIPS • CDNの組合せ利用 • 無料CDN • DDoS対策 • マルチCDN • 記事の更新とAPI • WordPress向けCDNの比較ポイント © 2016 J-Stream Inc. All Rights Reserved. 38
  39. 39. TIPS:組合せ利用 無料CDN • 無料CDN • CloudFlare • HTMLの強制キャッシュはできない(と思われる) • 安定性に大課題 • Incapsula • HTMLの強制キャッシュ対応 • 大きなファイルのキャッシュは非対応 • ある程度以上のピークトラフィックを記録すると、「有料プランへの移 行」のお願いが来る • Photon • イメージ専用CDN • 組み合わせ利用 • HTML:Incapsula • イメージ:プラグイン経由でPhoton © 2016 J-Stream Inc. All Rights Reserved. 39
  40. 40. TIPS:組合せ利用 DDoS対策 • DDoS対策 • 手軽で安いのはDDoS対策付CDN • 例:Incapsula 10万円/月~ • ただし、CDNとしては高い(ピーク上限20Mbps) • 組合せ利用 • HTML:Incapsula • きちんと守る • レベル2 or レベル3設定 • イメージ:通常のCDN • 通常の攻撃対象はHTMLファイルのみ • プラグイン使用 © 2016 J-Stream Inc. All Rights Reserved. 40 2TB、200万PV/1MBページ
  41. 41. TIPS:組合わせ利用 マルチCDN • マルチCDN • ISP単位、国単位で最速のCDNを選択 • 10月19日開催セミナー • 【東京・無料】マルチCDN:コンテンツ配信の可視化とCDNの最適活用 • https://page.stream.co.jp/seminar_161019cdn.html © 2016 J-Stream Inc. All Rights Reserved. 41 CDN-a CDN-a CDN-c CDN-b CDN-b CDN-b CDN-d
  42. 42. TIPS:記事の更新 • キャッシュのTTL(有効期間) • 60秒程度に設定 • 超えるとCDNは最新版かどうか確認する • CDN Purge API • WordPressプラグインとの連携 © 2016 J-Stream Inc. All Rights Reserved. 42 Purge API 記事更新 プラグイン 記事更新 CDN WordPress
  43. 43. TIPS:WordPress向けCDN比較ポイント • HOSTヘッダの追加 • レベル2設定(TCPアクセス:www-orig.example.jp、HTTPアクセ ス:www.example.jp)に必要 • HTMLのキャッシュ • No-cacheを無視したキャッシュ • クエリ文字列(foo.css?ver=1234)を含めたキャッシュ • 古いキャッシュの消去 • CDN Purge API • シングルファイルパージが早い(ワイルドカード(*)パージは関係ない) • WordPress用プラグインの提供 • キャッシュの有効期間切れ • ファイル再取得でなく、最新性のチェック(If-Modified-Since) • ただし、WordPressのphpは毎回生成なのでIMS効かない © 2016 J-Stream Inc. All Rights Reserved. 43
  44. 44. おわりに • サポートページ • https://tech.jstream.jp/blog/meeting/wordcamptokyo2016/ • サイト構成 • WordPress + CDNext (レベル3適用) • コンテンツ • 設定サンプル(CDNext、Cloudfrontその他) • 参考文献 • その他 • WordCamp J-Streamブース • ご質問等お待ちしております © 2016 J-Stream Inc. All Rights Reserved. 44

×