WordPressをNginxのProxy Cacheで高速化する

nginx_proxy_cache

Nginx高速化の第2段はProxy Cacheを試してみました。前回はgzipを利用してpng,jpeg,cssなどの静的ファイルの読み込みを早くさせましたが、Proxy CacheはPHPを経由せずにページ読み込みをすることで読み込み速度を向上させます。

Proxy Cache無し

まずはProxy Cacheを適用しないときのサーバー応答時間をChromeのデベロッパーツールで計測しました。
ブラウザキャッシュが効かないようにプライベートモードにして計測しました。

サーバー応答時間は1.58秒、ページ読み込み時間は5.28秒もかかっています。

Proxy Cache有り

そこでProxy Cacheを有効にして同様に測定したところ・・

サーバー応答時間は0.11秒、ページ読み込み時間は3.68秒になりました。
サーバー応答時間は93%短縮という結果になりました!
以下設定項目です。

Proxy Cacheを使えるようにする

今回も以下のサイトを参考にしました。ありがとうございました。

1. nginx/cacheディレクトリを作成

nginx用にキャッシュディレクトリをサーバに作成します。以下のコマンドでOkです。

mkdir -p /var/cache/nginx/cache

Chefの場合は以下をレシピに追加します。詳しくはこちら

directory "/var/cache/nginx/cache" do
  owner "root"
  group "root"
  mode 00755
  recursive true
end

2. nginx.conf編集

nginx.confのhttpブロックに以下のproxy_cacheの設定を追加します。

http {
  # 省略
      
  proxy_cache_path /var/cache/nginx/cache levels=1 keys_zone=zone:4m inactive=7d max_size=50m;

  # 省略
}

ここではキャッシュゾーンの設定、キャッシュの保存時間、キャッシュメモリなどの設定をしています。

3. sites-available/default編集

sites-available/defaultを以下のように変更しました。

upstream backend {
	server 127.0.0.1:8080;
}

server {
	listen 80;
	server_name www.<%= node['wp_install']['server_name'] %>;
	rewrite ^ http://<%= node['wp_install']['server_name'] %>$request_uri? permanent;
}

server {
	listen   80;
	server_name <%= node['wp_install']['server_name'] %>;
	root <%= node['wp_install']['server_root'] %>;
	index index.php index.html index.htm
	charset utf-8;

	access_log /var/log/nginx/front_access.log combined;
	error_log /var/log/nginx/front_error.log warn;

	location / {
		proxy_pass http://backend;
		proxy_cache zone;
		proxy_cache_key $scheme$proxy_host$uri$is_args$args;
		proxy_cache_valid  200 1d;
	}

	location /wp-admin {
		proxy_pass http://backend;
	}
	location /wp-login.php {
		proxy_pass http://backend;
	}

	location ~ /\.ht {
		deny all;
	}
}

server {
	listen 8080;
	server_name <%= node['wp_install']['server_name'] %>;
	root <%= node['wp_install']['server_root'] %>;
	index index.php index.html index.htm;
	charset utf-8;

	access_log /var/log/nginx/fastcgi_access.log combined;
	error_log /var/log/nginx/fastcgi_error.log warn;

	location / {
		if (!-e $request_filename) {
			rewrite ^.+?($/-.*) $1 last;
			rewrite ^.+?(/.*\.php)$ $1 last;
			rewrite ^ /index.php last;
		}
	}

	location ~ \.php$ {
		fastcgi_pass 127.0.0.1:9000;
		fastcgi_index index.php;
		fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
		include fastcgi_params;
		fastcgi_pass_header "X-Accel-Redirect";
		fastcgi_pass_header "X-Accel-Expires";
	}
}

このファイルをChefのtemplateにしているので、server_nameとrootの部分はVagrantfileで渡したホスト名とサーバルートの変数が入るようになっています。
フロントエンド設定の部分では、wp-admin, wp-login.php以外のページではキャッシュを有効させるようになっています。
フロントエンドとバックエンドでアクセスログを定義しているので、キャッシュがきいているのかどうかをチェックすることが出来ます。
パーマリンク用のrewrite設定は、バックエンド側で設定すればOkです。

前回のgzipモジュールを使った高速化と合わせて読み込み速度がかなり改善されました!
今後はさらにProxyCache設定を調べてチューニングしていきたいです!