WordPressの画像をNginxのリバースプロキシでキャッシュする

WordPress と Nginx のメモです。

既に運用中の WordPress で後から画像だけを外部サーバで処理したいと思ったのでちょっと試してみました。

具体的にやりたい事はこんな感じ。

• 画像サーバ導入後もWordPressの操作感は現状を維持する
• DBに保存されているWordPressの過去データはそのまま使う
• 画像サーバにNginxを使うが実データ (画像) は持たない

勿論、既に投稿済みの WordPress データには面倒なので触りたくないし、画像サーバを使う事で今までの操作性が失われるのも論外。(メディアライブラリはそのまま使いたい)

画像サーバを建てるのであれば画像データも Nginx が稼働するサーバにコピーしなくてはいけませんが、同期の手間が面倒臭いのでこれもなし。

代わりにキャッシュ機能を使って、キャッシュがない時だけ WordPress にリクエストさせるような感じです。

ちなみに、WordPress が出力する HTML 自体は逆にキャッシュしたくないので今回は画像のみをキャッシュします。

とりあえず、下記の順番で作業していきます。

1. 画像用に Nginx のリバースプロキシを設定
2. WordPress側の画像 URL 変換処理

スポンサーリンク

画像用に Nginx のリバースプロキシを設定

まずは Nginx から。

画像サーバとして使うようにセットアップしていきます。

今回使った Nginx は下記の記事で設定したものをまんま流用しています。

このブログのドメイン名を例に設定した場合はこんな感じ。

WordPress → worklog.be
画像サーバ → img.worklog.be

server {

	listen       80;
	server_name  img.worklog.be;

	set $wp_dom worklog.be;

	access_log  /var/log/nginx-access.log;
	error_log   /var/log/nginx-error.log warn;

	proxy_set_header    X-Real-IP       $http_x_forwarded_for;
	proxy_set_header    Host            $http_host;
	proxy_redirect      off;
	proxy_max_temp_file_size    0;

	set $do_not_cache 0;
	set $proxy_cache_key "$scheme://$host$request_uri";

	location / {
		proxy_cache cache1;
		include /usr/local/etc/nginx/conf.d/wordpress.conf;
		proxy_pass http://192.168.0.101:80;
		proxy_set_header host $wp_dom;
	}

}

前回書いた wordpress.conf にモバイル用のキャッシュ設定が入っていますがコレは不要。

基本的には普通のキャッシュ用の設定ですが、proxy_set_header に WordPress 自体のドメイン名を指定するのがポイント。下記のようになる。

後は Nginx をリロードすれば OK。画像サーバ用のドメイン名を Nginx に向けておくのもお忘れなく。

WordPress側の画像 URL 変換処理

次は WordPress 側の img タグを書き換える処理。

下記記事で書いた方法を利用する。

WordPress テーマの functions.php に下記のようなものを追加。

function domain_replace_content( $content ) {

	$dom1 = '/worklog.be/';
	$dom2 = 'img.worklog.be';

	$content = preg_replace( $dom1, $dom2, $content );
	return $content;

}
add_filter( 'the_content', 'domain_replace_content' );

この処理は不完全で、the_content で出力される部分にしか効かないし、ざっくり置換なのでこのままだと意図しない部分も書き換えられる可能性があると思います。(今はテストなのでとりあえずという事で)

これで準備は OK。

HTML ソースを確認すると本文内の画像 URL が書き換えられて Nginx 経由になっていると思います。

データ同期の必要もないので気軽に画像サーバを追加する事も可能です。

キャッシュ時間は負荷と相談しながらブラウザキャッシュも併用したりすれば良さそうです。

実用に耐えうるかどうかって部分についてはまだ試してないけど、初回のみ Nginx を経由するだけなのでまあ大丈夫かなとは思います。というより、物理的にサーバが分かれるので余裕で大丈夫なはず。

これは後で使ってみて何か問題がないか等を確認する予定です。

とりあえず今日はここまで！