NginxをリバースプロキシとしてWordPressのレスポンスにExpireを付ける

NginxをWordPressのフロントに置く

独自ドメインで運用されているWordPressのフロントにNginxを置いてレスポンスにExpireを付加をします。これは、クライアント側でキャッシュする期間をしているするものです。長期間変更されないような画像やCSSやJSなどに適応する事でサーバからダウンロードをしません。

環境構築

今回はMacbookのローカル環境では行わず、Amazon EC2に環境を構築します。サクッと進めます。

EC2が提供するドメイン名だと一時的かつ長いので独自ドメインを割り当てます。Route53を用います。設定にはR53Foxを用いました。EC2インスタンスにはElasticIPを割り当てて、www.akari.netのAレコードにそのIPを指定しました。ブラウザで確認してください。

まずはApache、PHP、WordPress、MySQL、Nginxをインストールして連携させます。Amazon Linux 64bitをMicroインスタンスで立ち上げました。手順は省略します。

       __|  __|_  )
       _|  (     /   Amazon Linux AMI
      ___|\___|___|

See /usr/share/doc/system-release/ for latest release notes.
No packages needed for security; 1 packages available
$ sudo yum update
$ sudo yum install httpd nginx mysql-server
$ sudo yum install php-devel php-gd php-mbstring php-mysql php-pdo
$ sudo service httpd start
$ sudo chkconfig httpd on
$ sudo service mysqld start
$ sudo chkconfig mysqld on
$ wget http://ja.wordpress.org/wordpress-3.2.1-ja.zip
$ unzip wordpress-3.2.1-ja.zip 
$ sudo mv wordpress /var/www/html

とんでもなく簡単ですね。続いて設定です。

$ mysql -u root

mysql> create database wordpress;
mysql> grant all privileges on wordpress.* to wordpress@localhost identified by '********';
mysql> \q

$ cd wordpress
$ cp wp-config-sample.php wp-config.php
$ vi wp-config.php

/** WordPress のためのデータベース名 */
define('DB_NAME', 'wordpress');

/** MySQL データベースのユーザー名 */
define('DB_USER', 'wordpress');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', '********');

$ sudo service httpd restart

ブラウザからアクセスしてみるとWordPressインストール画面になりますが、まだセットアップしません。といいますかしないでください。WordPressの特徴なのですが、一回インストールするとそのときのパスが絶対パスで残ります。

Nginxをプロキシサーバに設定する

ApacheとNginxはポート80番がデフォルト設定になっています。今回は、Apacheを8880番、Nginxを80に設定します。

$ cd /etc/httpd/conf
$ sudo vi httpd.conf

Listen 8880

$ sudo service httpd restart
$ cd /etc/nginx/
$ sudo vi nginx.conf

user              nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    upstream backend {
        server localhost:8880;
    }

    server {
        listen 80;
        root /var/www/html/;

        location / {
            proxy_pass http://backend;
        }    
    }
    include /etc/nginx/conf.d/*.conf;
}

$ sudo service nginx restart

改めましてWordPressのセットアップ画面へと戻ります。画面の指示の通り入力すれば、あっさりと環境構築完了します。

ExpiresとGzipを付ける

最後にnginx.confにExpiresとGzipを付けます。これは、画像などの長い期間変更されない情報にExpiresを付けることによって有効期限を設定し、テキスト情報などの圧縮して転送量を減らせる情報にGzipを設定します。

user              nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    gzip on;
    gzip_http_version 1.1;
    gzip_types text/plain
               text/xml
               text/css
               application/xml
               application/xhtml+xml
               application/rss+xml
               application/javascript
               application/x-javascript;
    gzip_buffers 4 8k;
    gzip_min_length 1000;
    gzip_comp_level 1;
    gzip_proxied off;
    gzip_disable "MSIE [1-6]\."  "Mozilla/4";
    gzip_vary off;

    upstream backend {
        server localhost:8880;
    }

    server {
        listen 80;
        server_name www.akari7.net;
        root /var/www/html/;

        location / {
            proxy_pass http://backend;
        }
        location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico)$ {
            expires 1h;
        }
    
    }
    include /etc/nginx/conf.d/*.conf;
}

まとめ

これで設定完了かなと思いきや、そうでもありません。HTMLのキャッシュをどうするかです。静的なHTMLであれば画像やCSSと同じように使ってよいですが、動的に生成される情報はどうでしょうか。商品検索などGETパラメターをキーにしてコンテンツをキャッシュするのはアリですよね。ただし、ユーザがログイン状態にあるときのキャッシュは注意が必要です。他人のキャッシュ情報が見れてしまう可能性があります。これについては次回以降にご紹介します。nginxによるリバースプロキシの動作を確認してキャッシュについて理解を深めましょう！

参考情報

Nginx – How to set expires headers for images

HttpGzipModule

Using Nginx as a caching proxy with WordPress+Apache