はじめまして。福岡でiPhoneアプリ開発と、Webサイト制作をしておりますPLUSの入江と申します。このたび、有名なPhotoshop VIPさんに寄稿できる機会をいただけて、とても嬉しく思います。
出会いはひょんなことから。以前うちのブログでWebサイト高速化（http://golog.plus.vc/web/4531/）の記事を書いたことがあるんですが、たまたまPhotoshopVIPさんの目にとまり、連絡いただいたのがはじまりです。なんと場所も同じ福岡ということで、盛り上がりました。
ちょうどその時、Photoshop VIPさんのブログアクセス数がすごいことになっていました。アクセスが多すぎて日中はサーバーが重くなり、サーバーが止まることも…。そんなことがあり、どうにか高速化したいというご相談を受けたのでした。
実際に調べたところ、一つのリクエストに対して平均5〜6秒はかかっていました。表示される分にはまだいいですが、アクセスが多い時間帯だと、何十秒も開かなかったり、固まることも。
そして今回、このような事態を解決すべく、私も実際に自分のブログで試して効果があった、Nginxを使うことにしました。というわけでせっかくですので、Nginxをインストール・設定するまでの作業履歴を公開したいと思います。
私もサーバーの専門家ではないので、もしかしたら間違っている箇所もあるかもしれません。手順を参考にされる場合は自己責任でお願いします。
構成
Webサーバーは、NginxとApacheの両方を使います。静的な画像やCSS等は全てNginxで処理をします。そして、PHPやHTMLはApacheで処理をします。ただし、一度表示したページはNginxのリバースプロキシでキャッシュをしています。そのため、2回目以降の表示スピードが上がります。
nginxのインストール
yumを使ってnginxをインストールします。
[crayon]yum install nginx[/crayon]
もし、エラーが出る場合はパッケージがリストに入っていないので、レポジトリを追加します。
[crayon]/etc/yum.repos.d/nginx.repo[/crayon]
を作成。
[crayon]
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/6/$basearch/
gpgcheck=0
enabled=1
[/crayon]
に修正します。OSによってパスは変わります。
apacheの設定変更
[crayon]
/etc/httpd/conf/httpd.conf
[/crayon]
を編集。
Nginxのポート を80 、Apache はポート 8080 を使うように変更します。
httpd.confの以下の部分を8080に変更します。
編集したら、apacheを再起動します。
[crayon]
/etc/rc.d/init.d/httpd restart
[/crayon]
nginxの設定
[crayon]
/etc/nginx/conf.d/default.conf
[/crayon]
リバースプロキシを使い、画像などはnginxで表示するように設定します。
[crayon]
server {
listen
80;
server_name ドメイン名;
root ディレクトリパス;
location /wp-admin { proxy_pass http://127.0.0.1:8080; }
location ‾ .*¥.(jpg|JPG|gif|GIF|png|PNG|swf|SWF|css|CSS|js|JS|inc|INC|ico|ICO) {
root /var/www/html/photoshop;
index index.html;
ssi on;
break;
}
location / {
set $mobile 0;
if ($http_user_agent ‾* ‘(DoCoMo|J-PHONE|Vodafone|MOT-|UP¥.Browser|DDIPOCKET|
ASTEL|PDXGW|Palmscape|Xiino|sharp pda browser|Windows CE|L-mode|WILLCOM|SoftBank|
Semulator|Vemulator|J-EMULATOR|emobile|mixi-mobile-converter)’) {
set $mobile 1;
}
if ($http_user_agent ‾* ‘(iPhone|iPod|Opera Mini|Android.*Mobile|NetFront|PSP|
BlackBerry)’) {
set $mobile 2;
}
if ($http_cookie ‾* “comment_author_[^=]*=([^%]+)%7C”) {
set $do_not_cache 1;
}
proxy_no_cache $do_not_cache;
proxy_cache_bypass $do_not_cache;
proxy_cache czone;
proxy_cache_key “$scheme://$host$request_uri$is_args$args$mobile”;
proxy_cache_valid 200 301 302 60m;
proxy_cache_valid 404 5m;
proxy_cache_use_stale error timeout invalid_header updating
http_500 http_502 http_503 http_504;
proxy_redirect http://ドメイン名:8080/ /;
proxy_pass http://127.0.0.1:8080;
break;
}
}
[/crayon]
Location /wp-adminとしているのは、管理画面内をキャッシュさせないためです。
Mobileうんぬんのところは、例えば先にPCでaaa.htmlを表示したとします。その後に、スマホで同じaaa.htmlを開くと、何も設定していなければ、PCと同じページをキャッシュで表示します。
しかし、本来は同じアドレスでPCとスマホともに違うデザインで表示しています。そのため、アクセス元がPCなのかモバイルなのかをチェックしてキーを変更しています。
nginxの設定変更
[crayon]
/etc/nginx/nginx.conf
[/crayon]
以下を追記。gzipとキャッシュの設定をしています。
[crayon]
#gzip on;
gzip
on;
gzip_http_version 1.0;
gzip_vary
on;
gzip_comp_level 6;
gzip_types
text/xml text/css application/xhtml+xml application/rss+xml application/
atom_xml application/x-javascript application/x-httpd-php;
gzip_disable
“MSIE [1-6]¥.”;
#reverse proxy
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=czone:4m max_size=50m
inactive=120m;
proxy_temp_path /var/tmp/nginx;
proxy_cache_key “$scheme://$host$request_uri”;
proxy_set_header Host
$host;
proxy_set_header X-Real-IP
$remote_addr;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
[/crayon]
最後に、nginxを再起動して完了です。
[crayon]
/etc/init.d/nginx restart
[/crayon]
abコマンドを実行すると、0.025秒になりました、大成功です。
実際に稼働をはじめてから、これまでのようにサーバーが止まったりすることもなく、順調に稼働しています。うちのブログもphotoshopVIPさんに負けないよう、頑張りたいと思います。
[info_box]
当サイトでたびたび起こっていた、サーバー障害もなくなり、WordPressをよりスムーズに利用することができるようになりました。サーバーでお困りの方、参考にしてみてはいかがでしょう。
[/info_box]
