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.

WordPressのCDN化

10,911 views

Published on

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

Published in: Technology
  • Be the first to comment

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

×