NginxのFastCGIキャッシュを使ってワードプレスを高速化

エックスサーバーでホスティングしているワードプレスを、nginx の FastCGI キャッシュを使って運用したらどうなるのか気になったので調べてみました。

利用しているテーマによっては、デザインが綺麗になる反面サイトが重くなる場合もあります。

エックスサーバーにも高速化のオプション機能(PHPのOPcacheやPageSpeedInsightsなど)がいくつかありますが、nginx のキャッシュ機能は利用ができません。

画像ファイルやスタイルシート(css)の読み込みについてはまた別に高速化のテクニックがありますが、今回はワードプレスのページ生成処理を極力減らす対策を行っていきます。

要は、記事ページを生成する際に最初の 1 回目だけワードプレスに処理させて、その後は一定時間ワードプレスに処理させずに同じ html ファイルを返すという方法です。

目次(もくじ)

エックスサーバーからワードプレスデータの移行
ファイルのバックアップ
データベースのバックアップ
nginxのサーバでワードプレスを動かす
ワードプレスのインストール
nginxの設定
キャッシュコントロールのプラグイン

エックスサーバーからワードプレスデータの移行

まずはエックスサーバーからワードプレスのデータをバックアップします。

必要な情報は以下の通りです。

テーマ
プラグイン
画像
データベース

ファイルのバックアップ

エックスサーバーの場合は、FTP または SCP でフォルダごとバックアップしましょう。

対象のフォルダは以下の 3 つです。

wp-content/plugins
wp-content/themes
wp-content/uploads

データベースのバックアップ

エックスサーバーはデータベースのバックアップが簡単にできます。

200 記事で約 4MB くらいのサイズでしたので、圧縮なしのバックアップダウンロードで問題ありません。

サーバ管理メニューから「MySQLバックアップ」をクリックします。

対象のデータベースを選択して「エクスポート実行」ボタンをクリックします。

nginxのサーバでワードプレスを動かす

今回は AWS の EC2 で nginx のサーバを立ててみます。

初めて利用する方は 1 年間の無料枠があるので、自分でサーバを立てて勉強してみたい方にもおススメです。

今回は以下の記事を参考に、PHP5.6 ではなく PHP7.2 に置き換えて進めたいと思います。

AmazonLinuxでnginxを使ったWebサーバを構築するここまでで EC2 へアクセスするための最低限の設定が完了したので、いよいよ Web サーバを構築していきます。今回は、無料枠期間を...

nginx のインストールまでは手順が同じなので上記の記事を参考にしてください。

PHP7.2 をインストールします。

$ yum -y install php72 php72-devel php72-fpm php72-pdo php72-mysqlnd php72-mbstrin php72-gd

1	$ yum -y install php72 php72-devel php72-fpm php72-pdo php72-mysqlnd php72-mbstrin php72-gd

PHP の設定ファイルは /etc/php-fpm-7.2.d/www.conf に置き換えて調整してください。

ワードプレスのインストール

ワードプレスは /var/www 配下にダウンロードします。

$ wget https://ja.wordpress.org/latest-ja.tar.gz
$ tar xzvf latest-ja.tar.gz

1 2	$ wget https://ja.wordpress.org/latest-ja.tar.gz $ tar xzvf latest-ja.tar.gz

データベースは AWS の RDS を利用します。詳しくは「AWSでパラメータグループを設定してからRDS(MySQL5.7)のインスタンス作成をする」の記事を参考にしてください。

AWSでパラメータグループを設定してからRDS(MySQL5.7)のインスタンス作成をするRDS のインスタンスを作成する際、いきなりデータベースを構築すると後々パラメータグループを変更する手間が発生します。それは、デフォ...

以下のファイルでデーターベースの接続情報を調整します。

$ cd wordpress
$ vi wp-config.php

1 2	$ cd wordpress $ vi wp-config.php

この状態で、バックアップしたデータをコピーします。

/var/www/wordpress/wp-content/plugins
/var/www/wordpress/wp-content/themes
/var/www/wordpress/wp-content/uploads

ディレクトリの権限を調整しておきます。

$ chown -R nginx:nginx /var/www/wordpress

1	$ chown -R nginx:nginx /var/www/wordpress

最後にバックアップしたデータベースのデータを反映します。

$ mysql --defaults-extra-file=/etc/.my.cnf [データベース名] < [バックアップファイル(sql)]

1	$ mysql --defaults-extra-file=/etc/.my.cnf [データベース名] < [バックアップファイル(sql)]

MySQL クライアントの設定は「AmazonLinuxにMySQLクライアントをインストールする」の記事を参考にしてください。

AmazonLinuxにMySQLクライアントをインストールするAWS でデータベースを使う際、MySQL サーバを立てるよりも RDS(MySQL)を使う方が楽です。ただし、データベースのメンテ...

nginxの設定

nginx の VirtualHost の設定例です。

SSL のサーバ証明書は Let’s Encrypt で取得した前提としています。詳しくは「AmazonLinuxでnginxを使ったWebサーバを構築する」をご覧ください。

fastcgi_cache_path /var/run/wp-cache levels=1:2 keys_zone=wp:256m max_size=512m inactive=1d;
fastcgi_cache_valid 200 1d;
server {
listen 80;
server_name [ドメイン名];
return 301 https://$host$request_uri;
}
server {
listen       443;
ssl          on;
server_name  [ドメイン名];
ssl_protocols TLSv1.2;
ssl_certificate      /etc/letsencrypt/live/[ドメイン名]/fullchain.pem;
ssl_certificate_key  /etc/letsencrypt/live/[ドメイン名]/privkey.pem;
add_header Strict-Transport-Security 'max-age=31536000';
charset UTF-8;
access_log  /var/log/nginx/access_wp.log  main;
location = /ok.html {
empty_gif;
access_log off;
break;
}
location / {
root   /var/www/wordpress;
index  index.php ok.html;
if (-f $request_filename) {
break;
}
if (!-e $request_filename) {
rewrite ^(.*)$ /index.php?$1 last;
}
}
location ~ .*\.(html?|jpe?g|gif|png|css|js|ico|swf|inc)$ {
root /var/www/wordpress;
expires 10d;
access_log off;
}
fastcgi_cache_methods GET;
fastcgi_cache_min_uses 1;
add_header Fastcgi-Cache $upstream_cache_status;
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
location ~ \.php$ {
root   /var/www/wordpress;
fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;
fastcgi_index  index.php;
fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
fastcgi_param  SCRIPT_NAME     $fastcgi_script_name;
fastcgi_param  PATH_INFO       $fastcgi_script_name;
include        fastcgi_params;
# cache
set $is_cache 0;
if ($request_method !~ ^(GET)$) {
set $is_cache 1;
}
if ($request_uri ~* "/wp-admin/|/xmlrpc.php|wp-.*.php|/feed/|index.php|sitemap(_index)?.xml") {
set $is_cache 1;
}
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_no_cache|wordpress_logged_in") {
set $is_cache 1;
}
set $sp '';
if ($http_user_agent ~* '(iPhone|Mobile|Android|Kindle|BlackBerry|Opera Mini|Opera Mobi)') {
set $sp 'sp.';
}
fastcgi_no_cache      $is_cache;
fastcgi_cache_bypass  $is_cache;
fastcgi_cache_key "$request_uri$request_method$sp";
fastcgi_cache  wp;
fastcgi_cache_valid 200 1d;
}
#error_page  404              /404.html;
# redirect server error pages to the static page /50x.html
#
error_page   500 502 503 504  /50x.html;
location = /50x.html {
root   /var/www/wordpress;
}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
location ~ /\.ht {
deny  all;
}
}

fastcgi_cache_path /var/run/wp-cache levels=1:2 keys_zone=wp:256m max_size=512m inactive=1d;

fastcgi_cache_valid 200 1d;

server {

listen 80;

server_name [ドメイン名];

return 301 https://$host$request_uri;

}

server {

listen 443;

ssl on;

server_name [ドメイン名];

ssl_protocols TLSv1.2;

ssl_certificate /etc/letsencrypt/live/[ドメイン名]/fullchain.pem;

ssl_certificate_key /etc/letsencrypt/live/[ドメイン名]/privkey.pem;

add_header Strict-Transport-Security 'max-age=31536000';

charset UTF-8;

access_log /var/log/nginx/access_wp.log main;

location = /ok.html {

empty_gif;

access_log off;

break;

}

location / {

root /var/www/wordpress;

index index.php ok.html;

if (-f $request_filename) {

break;

}

if (!-e $request_filename) {

rewrite ^(.*)$ /index.php?$1 last;

}

location ~ .*\.(html?|jpe?g|gif|png|css|js|ico|swf|inc)$ {

root /var/www/wordpress;

expires 10d;

access_log off;

}

fastcgi_cache_methods GET;

fastcgi_cache_min_uses 1;

add_header Fastcgi-Cache $upstream_cache_status;

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000

location ~ \.php$ {

root /var/www/wordpress;

fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;

fastcgi_index index.php;

fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

fastcgi_param SCRIPT_NAME $fastcgi_script_name;

fastcgi_param PATH_INFO $fastcgi_script_name;

include fastcgi_params;

# cache

set $is_cache 0;

if ($request_method !~ ^(GET)$) {

set $is_cache 1;

}

if ($request_uri ~* "/wp-admin/|/xmlrpc.php|wp-.*.php|/feed/|index.php|sitemap(_index)?.xml") {

set $is_cache 1;

}

if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_no_cache|wordpress_logged_in") {

set $is_cache 1;

}

set $sp '';

if ($http_user_agent ~* '(iPhone|Mobile|Android|Kindle|BlackBerry|Opera Mini|Opera Mobi)') {

set $sp 'sp.';

}

fastcgi_no_cache $is_cache;

fastcgi_cache_bypass $is_cache;

fastcgi_cache_key "$request_uri$request_method$sp";

fastcgi_cache wp;

fastcgi_cache_valid 200 1d;

}

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html

error_page 500 502 503 504 /50x.html;

location = /50x.html {

root /var/www/wordpress;

}

# deny access to .htaccess files, if Apache's document root

# concurs with nginx's one

location ~ /\.ht {

deny all;

}

キャッシュコントロールのプラグイン

nginx のキャッシュはサーバ上で削除できますが、記事投稿時やサイトのデザイン変更時にクリアさせれると便利です。

この手のプラグインがいくつか提供されていますが、今回は「Nginx Helper」を使ってみます。

Nginx Helper

手動で削除したい場合は「nginxのFastCGIキャッシュを強制的にクリアする」の記事を参考にしてください。

nginxのFastCGIキャッシュを強制的にクリアするリアルタイムに状態が変わるようなサイトでは、部分的にデータをキャッシュすることはあってもページ全体をキャッシュすることはないと思います。...

エックスサーバーからワードプレスデータの移行

ファイルのバックアップ

データベースのバックアップ

nginxのサーバでワードプレスを動かす

ワードプレスのインストール

nginxの設定

キャッシュコントロールのプラグイン

NginxのFastCGIキャッシュで白い画面がキャッシュされる

【アフィンガー】PageSpeedInsightsで90点台のスコアを叩き出す

WordPress(ワードプレス)でinfoレベルのログを出力する

SpringBoot2.1のTomcatにkeepaliveのtimeout設定をする

NginxのHSTS(HTTP Strict-Transport-Security)の設定

ワードプレスでYoutubeの動画埋め込みが表示されない場合の対策