WordPressのCDN化

WordPressのCDN化
高速化とセキュリティ
WordCamp Tokyo 2016
2016年9月17日
鍋島公章
株式会社Jストリーム
© 2015 J-Stream Inc. All Rights Reserved. 1
REV:20160915

自己紹介
• 鍋島公章（なべしままさあき）
• 国産CDN (J-Stream CDNext)やってます
• 大抵の機能（HTTP/2、動的ファイルのキャッシュ、CDN API、…）は実装
• 値段はCloudFrontの半額程度
• 代理店募集中
• 無料アカウントの発行
• エンジニア向けCDN教育(1日コース)
• 担当SEのアサイン
• WordCampにブースも出しています
• セキュリティCDN（Incapsula)も売ってます
• DDoS対策＋WAF＋CDN＋セキュリティオペレーションセンタ

はじめに
• 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/

目次
• CDNについて
• メリット
• トラブルシュート
• WordPressのCDN設定
• レベル1：イメージ配信
• レベル2：イメージ＋HTML配信
• レベル3：イメージ＋HTML配信＋wp-admin秘匿化
• TIPS

Part 1
• CDNについて

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

CDNとは
• 配信のアウトソース
• 地理分散
オリジンサーバ
CDNサーバクライアント
7

CDNとは
• メリット
種別用途
国際配信アクセスの高速化
国内配信ピーク対策、コスト削減
プロトコル変換 SSL化、HTTP/2化、WebSocket化等
セキュリティ対策 DDoS対策、WAF

CDNのメリット：高速化
• TCPの速度制限
• 前提：ショートセッション
• ロングセッションはTCPウィンドウの自動拡張により速度改善
• 後進国
• 不十分な国際リンク
距離 RTT 最高速度
東京・沖縄間 0.04秒 12.5Mbps
日米間 0.10秒 5.0Mbps
日欧間 0.20秒 2.5Mbps

CDNのメリット：ピーク対策
• ピーク例
• CDNの効果
ピーク同時接続ピーク帯域
キャンペーン通常の数～数十倍
メディア露出同時接続：数千数百Mbps
TV連動同時接続：数十万～数十Gbps～
仮定：1ページあたり10オブジェクト、1オブジェクトたり20KB
CDNなし
CDNあり
オリジン
トラフィック

CDNのメリット：プロトコル変換
• プロトコル変換
• オリジンサーバ
• HTTP/1.1
• CDNサーバ（変換後の主要プロトコル）
• TLS
• HTTP/2
• WebSocket
11
オリジンサライアント
HTTP/2
HTTP
CDNサーバ
© 2016 J-Stream Inc. All Rights Reserved.

CDNのメリット：WAF
• Web Application Firewall
• 攻撃リクエストを落とす
セキュリティCDN オリジンサーバ
ボット
スパマー
正当なトラフィック
WAF
Load Balancing
Performance
DDoS
Mitigation
ハッカー
DDoS
出典：Incapsulaセールス資料

CDNのメリット：DDoS対策
• 通常のCDN
• レイヤ3以下の物量攻撃に対応(大量配信＝大量受信)
• UDP大量パケット攻撃(DNSリフレクション)など
• レイヤ4(TCP)以上の攻撃には弱い
• TCP SYNアタック、HTTPリロードアタックなど
• DDoS本格対応CDN
• CDN＋スクラビングセンター＋SOC
• スクラビングセンター
• 物量攻撃への対策強化
• レイヤ4以上の攻撃に対応
• ボット排除(クッキー、チャレンジの挿入)
• SOC(セキュリティ・オペレーション・センタ)
• インシデントに迅速対応
70%のボットはクッキー未対応
99%のボットはチャレンジ(Javascript)未対応

CDNトラブルシュート
• 4大トラブル
• CDNが外れる
• オリジンサイトへ飛ばされる
• (Webアプリケーションの)動作がおかしい
• CDNを入れたらWebアプリケーションの動作が変になった
• キャッシュされない
• すべてのリクエストがオリジンに届く
• キャッシュが古い
• 古いコンテンツが配信される
• 管理画面が機能しない
• その他
• CDN導入したら遅くなった、アクセス解析がおかしい、…

CDNが外れる
• 症状
• アクセス中にオリジンサイトに誘導される
• 原因
• HTTPヘッダにオリジンサーバのFQDNが含まれる
• Location, Refresh
• オリジンサイトのFQDNが含まれるリンクがある
• <a href=http://www-orig.example.jp/sub.html..>
• WordPress
• デフォルトはFQDNを含むフルパスを生成
• リンクをたどると、オリジンサイトに誘導

動作がおかしい
• 症状
• CDNを導入したらWebアプリケーションの動作が変
• 原因
• CDNがURLパラメータを削除する
• index.php&pram=hoge..
• CDNがクッキーを削除する(ユーザ追跡できない)
• WordPress
• URLパラメータ
• バージョン管理(例：xxx.js?ver=20160206)
• /wp-admin/で使用
• クッキー
• /wp-admin/で使用

キャッシュされない
• 症状
• コンテンツがキャッシュされず、すべてのアクセスがオリジン
に届く
• CDNの意味がなくなる
• 原因
• オリジンサイト(CMS)がno-cacheを付けている
• WordPress
• すべての記事(htmlファイル)にno-cacheを付ける

キャッシュが古い
• 症状
• 古いオブジェクトが配信される
• Web管理ページが正常に動作しない
• 原因
• ファイルにno-cache等を付けていない
• CDNがクッキー付セッションをキャッシュする
• WordPress
• /wp-admin/以下ではクッキーを使用
• キャッシュされるべきでない

Part 2
• WordPressのCDN化

アプローチ比較
レベル1 レベル2 レベル3
CDN化対象イメージ
サイト全体
(イメージ＋HTML)
wp-adminへの
アクセス
オリジン CDN経由オリジン
ピーク対策 △ ○
セキュリティ対策
(WAF、DDoS)
× ○
セキュリティ対策
(wp-admin防御)
× △ ○
設定の容易さ
○
プラグイン使用
△
テクニック必要
×
URL書き換え必要

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
d3awb7d4.cdnext.net (CDNサーバ)
クライアント
www.example.jp
<img src=“http://d3awb7d4.cdnext.net/...省略.../a.png>
Index.php
a.png

CDN化レベル1：詳細
• メリット
• 設定が簡単(プラグインの有効化のみ)
• デメリット
• HTML生成の負荷を下げられない
• プラグイン例
• Photon
• W3 Total Cache

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
• 注意点
• キャッシュされたオブジェクトの更新はできない(オブジェクトを変更
した場合、ファイル名の変更が必要)

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

サイト全体の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

サイト全体のCDN化(基本設定)
• 設定
• オリジン設定変更(必要な場合）
• CDN設定
• DNS設定変更
• 動作
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

管理ディレクトリへのアクセス
• wp-admin
• レベル2：CDN経由
• レベル3：オリジン直接
• CDNがダウンしてもwp-adminを操作可能
• wp-admin防御の強化
• CDN経由のwp-adminアクセスは禁止(オリジンのホスト名を知らないとア
クセス不可)
オリジン
Index.php
/wp-admin/xxx
レベル2
レベル3
www-6yjn3dg.example.jp
乱数による秘匿化

レベル2とレベル3比較
• 比較表
レベル2 レベル3
wp-adminの保護（秘匿化） × ○
wp-adminの保護（ディレクトリ保護） △ ○
CDNに障害が発生した場合のwp-adminへの
アクセス
×※1 ○
設定の容易さ ○ ×
オリジンサーバの設定変更不必要必要
ログ解析系プラグイン(StatPress等)※2 △ ×※3
wp-adminを上手く処理できないCDNへの対応 × ○
※1：CDNを無効化すればアクセス可能
※2：オリジンサーバへリクエストが届かなくなるため基本的に使用できなくなる
※3：URL書換の影響でページ解析等は動かない

レベル2設定：概要
• 概要
• wp-admin
• CDN経由
• オリジンサーバの設定
• www.example.jpとして設定(CDNなしの場合と同じ設定)
www.example.jp
/wp-admin/xxx
www.example.jp

レベル2設定：オリジン設定
• 変更なし(CDNを使用しない設定のまま）
• Apache
• バーチャルホスト：www.example.jp
• WordPress
• WordPressアドレス：http://www.example.jp/wordpress
• サイトアドレス: http://www.example.jp/wordpress
• DNS設定
• www-orig.example.jpを追加

レベル2設定：CDN設定
• オリジン指定
• ホスト指定
• www-orig.example.jp or IPアドレス
• www.example.jpはCDNに向いているため
• カスタム (HTTP HOST)ヘッダ
• www.example.jp
• バーチャルホストが使用されている場合
CDNサーバ
GET index.html HTTP/1.1
….
HOST=www.example.jp
TCP接続：www-orig.example.jp
異なる

• キャッシュ設定
パス設定項目設定しない場合
/wordpress/wp-admin/*
Postの有効化エラー(操作できない)
Cookieのスルーログインできない
クエリ文字列の有効化画面が崩れる(操作できない)
/wordpress/wp-login.php Cookieスルーログインできない
/wordpress/*
クエリ文字列の有効化バージョン管理(ver=x.x.x)できない
cache-control無視
(TTL=60)
Postの有効化コメントできない

レベル3設定：概要
• 概要
• wp-admin
• 直接
• オリジンサーバの設定
• WordPress: www-orig.example.jpとして設定
• Apache:www-orig.example.jpとして設定
• OutPutFilter設定(www-orig.example.jpをwww.example.jpに変換)
www.example.jp
/wp-admin/xxx
www-orig.example.jp
OutPutFilter

レベル3設定：オリジン設定
• レベル3用のカスタム設定
• WordPress
• WordPressアドレス：http://www-orig.example.jp/wordpress
• サイトアドレス: http://www-orig.example.jp/wordpress
• Apache
• バーチャルホスト
• www-orig.example.jp
• OutputFilter指定
• 次ページ

レベル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>

• オリジン指定
• ホスト指定
• www-orig.example.jp
• カスタムヘッダ
• 不要（デフォルトでHOSTが付与される）
CDNサーバ
TCP接続：www-orig.example.jp
GET index.html HTTP/1.0
….
HOST=www-orig.example.jp
同じ

レベル3設定：CDN
• キャッシュ設定
パス設定項目設定しない場合
/wordpress/wp-admin/* アクセス拒否
/wordpress/wp-login.php アクセス拒否
/wordpress/*
クエリ文字列の有効化バージョン管理(ver=x.x.x)できない
cache-control無視
(TTL=60)
Postの有効化コメントできない

TIPS
• CDNの組合せ利用
• 無料CDN
• DDoS対策
• マルチCDN
• 記事の更新とAPI
• WordPress向けCDNの比較ポイント

TIPS：組合せ利用無料CDN
• 無料CDN
• CloudFlare
• HTMLの強制キャッシュはできない(と思われる)
• 安定性に大課題
• Incapsula
• HTMLの強制キャッシュ対応
• 大きなファイルのキャッシュは非対応
• ある程度以上のピークトラフィックを記録すると、「有料プランへの移
行」のお願いが来る
• Photon
• イメージ専用CDN
• 組み合わせ利用
• HTML：Incapsula
• イメージ：プラグイン経由でPhoton

TIPS：組合せ利用 DDoS対策
• DDoS対策
• 手軽で安いのはDDoS対策付CDN
• 例：Incapsula 10万円/月～
• ただし、CDNとしては高い(ピーク上限20Mbps)
• 組合せ利用
• HTML：Incapsula
• きちんと守る
• レベル2 or レベル3設定
• イメージ：通常のCDN
• 通常の攻撃対象はHTMLファイルのみ
• プラグイン使用
2TB、200万PV/1MBページ

TIPS：組合わせ利用マルチCDN
• マルチCDN
• ISP単位、国単位で最速のCDNを選択
• 10月19日開催セミナー
• 【東京・無料】マルチCDN：コンテンツ配信の可視化とCDNの最適活用
• https://page.stream.co.jp/seminar_161019cdn.html
CDN-a
CDN-a
CDN-c
CDN-b
CDN-b
CDN-b
CDN-d

TIPS:記事の更新
• キャッシュのTTL(有効期間)
• 60秒程度に設定
• 超えるとCDNは最新版かどうか確認する
• CDN Purge API
• WordPressプラグインとの連携
Purge API
記事更新
プラグイン
記事更新
CDN
WordPress

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効かない

おわりに
• サポートページ
• https://tech.jstream.jp/blog/meeting/wordcamptokyo2016/
• サイト構成
• WordPress + CDNext (レベル3適用)
• コンテンツ
• 設定サンプル(CDNext、Cloudfrontその他)
• 参考文献
• その他
• WordCamp J-Streamブース
• ご質問等お待ちしております

WordPressのCDN化

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (19)

Similaire à WordPressのCDN化

Similaire à WordPressのCDN化 (20)

Plus de J-Stream Inc.

Plus de J-Stream Inc. (14)

Dernier

Dernier (7)

WordPressのCDN化