はじめまして。福岡で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をインストールします。
1 | yum install nginx |
もし、エラーが出る場合はパッケージがリストに入っていないので、レポジトリを追加します。
1 | /etc/yum.repos.d/nginx.repo |
を作成。
1 2 3 4 5 | [nginx] name=nginx repo baseurl=http://nginx.org/packages/centos/6/$basearch/ gpgcheck=0 enabled=1 |
に修正します。OSによってパスは変わります。
apacheの設定変更
1 | /etc/httpd/conf/httpd.conf |
を編集。
Nginxのポート を80 、Apache はポート 8080 を使うように変更します。
httpd.confの以下の部分を8080に変更します。
編集したら、apacheを再起動します。
1 | /etc/rc.d/init.d/httpd restart |
nginxの設定
1 | /etc/nginx/conf.d/default.conf |
リバースプロキシを使い、画像などはnginxで表示するように設定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 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; } } |
Location /wp-adminとしているのは、管理画面内をキャッシュさせないためです。
Mobileうんぬんのところは、例えば先にPCでaaa.htmlを表示したとします。その後に、スマホで同じaaa.htmlを開くと、何も設定していなければ、PCと同じページをキャッシュで表示します。
しかし、本来は同じアドレスでPCとスマホともに違うデザインで表示しています。そのため、アクセス元がPCなのかモバイルなのかをチェックしてキーを変更しています。
nginxの設定変更
1 | /etc/nginx/nginx.conf |
以下を追記。gzipとキャッシュの設定をしています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | #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; |
最後に、nginxを再起動して完了です。
1 | /etc/init.d/nginx restart |
abコマンドを実行すると、0.025秒になりました、大成功です。
実際に稼働をはじめてから、これまでのようにサーバーが止まったりすることもなく、順調に稼働しています。うちのブログもphotoshopVIPさんに負けないよう、頑張りたいと思います。
[info_box]
当サイトでたびたび起こっていた、サーバー障害もなくなり、WordPressをよりスムーズに利用することができるようになりました。サーバーでお困りの方、参考にしてみてはいかがでしょう。
[/info_box]
