NginxでWordPress

Nginx上でWordPressを動かす。

PHP環境の設定、WordPressの稼働から、Apache + WordPress環境とのベンチマークテストまで行う。

 

1. php-fpmのインストール

Nginxとphpの連携は、php-fpmデーモンによって行う。

php-fpmは、php 5.3.3からコンパイル時のオプションによって簡単にインストールすることができる。RPMで利用する場合には、php-fpmをインストールすればよい。

php-fpmがデフォルトのyumリポジトリに含まれていない場合、まずはレポジトリの追加から行う。

remiのリポジトリを追加。

$ rpm -Uvh http://rpms.famillecollet.com/enterprise/5/remi/i386/remi-release-5-8.el5.remi.noarch.rpm

php-fpmのインストール。

$ yum install php-fpm --enablerepo=remi

 

2. Nginxの設定

/usr/local/nginx/conf/nginx.confを開いて下記追記。コメントアウトされているだけの場合もあるので、コメントを外してもいい。

location ~ \.php$ {
    fastcgi_pass 127.0.0.1:9000;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param PAHT_INFO $fastcgi_script_name;
    include fastcgi_params;
}

これで、拡張子がphpへのリクエストがphp-fpmに転送されることになる。

 

3. php-fpmの設定変更

/etc/php-fpm.d/www.confを編集。

まずは、ユーザとグループを変更。これがNginxのワーキングプロセスの実行ユーザ、グループと合致していないと、ブラウザで*.phpにアクセスした際に、「File Not Found」と表示される。
user = nginx
group = nginx
待ち受けポート番号(デフォルト9000)を必要に応じて変更。
listen = 127.0.0.1:9000
接続可能クライアントのIPアドレスを制限。
listen.allowed_clients = 127.0.0.1
 php-fpmの実行。
$ service php-fpm start
 
4. 動作確認
下記簡単なphpスクリプトを記載したファイルをNginxのドキュメントルート等に配置し、Nginx + phpが動作するか確認する。
<?php phpinfo(); ?>
 ブラウザでアクセスして、phpの情報が表示されれば正常。
 
5. ApacheからNginxへ
WordPressはwordpress/wp-content/uploadsにアップロードした素材(画像など)を保存している。
Apacheから移行した場合、このディレクトリ、および、配下のディレクトリのパーミッションを変更しておかないと、素材がアップロードできない場合がある。
所有者をNginxに変更するか、パーミッションを777にしておく。
あとは、Apacheを止めて、Nginxを稼働して移行完了。 
 

6. ベンチマーク

JMterで現在のWebサーバ(apache)のベンチマークをとる。

ベンチマークをとるクライアントのMac OS Xに、JMeterのインストール。

$ brew install jmeter

インストール後、このサイトを参考にJMeterでベンチマークをとる。

動的ページ(WordPressのトップページ)、静的ページの表示にかかった平均時間は以下の通り。

WordPress トップページ 単一静的ページ
Nginx 424 [ms] 21 [ms]
Apache 819 [ms] 65 [ms]

Nginxの方がApacheに比較して、動的ページで2倍、静的ページで3倍、表示が高速化している。

Fig. ベンチマーク(Nginx, Dynamic)

 

Fig. ベンチマーク(Apache, Dynamic)

 

Fig. ベンチマーク(Nginx, Static)

 

Fig. ベンチマーク(Apache, Static)

 

■参考文献


半透明PNGの作成

GIMPを使って半透明PNGを作成する。サンプルは完全透過だが、半透明も可能。

(元の画像) → (透過画像)

1. 元のファイルを読み込み

 

2. ファジー選択(自動選択)ツールで背景色を選択

 

3. 後で使うので選択領域をチャネルに保存しておく

 

4. レイヤーマスクを追加

読み込んだ元の画像にレイヤーマスクを追加する。

レイヤーマスク上の色により、

  • 黒 → 完全に透明
  • 白 → 不透明

となるので、灰色に塗った部分は、半透明にすることができる。

レイヤーマスクを作成する際に、3.で保存したチャネル(選択領域)を使うと、選択していた領域を不透明にして、選択していなかった領域を透明にすることができる。

今回は、選択していなかった猫(?)の部分を不透明なまま残すので、レイヤーマスクを作成する際のオプションで「マスク反転」をチェックして、白黒を逆転する。

 

5. レイヤーマスクが追加されて結合された画像が半透明になる

サンプルは、黒と白の単なる透過。

 

6. 完成した画像をPNG形式で保存

 

Appendix. 縁を半透明にする場合

  1. 画像を読み込み
  2. レイヤーを複製
  3. 複製したレイヤーで背景をファジー選択。閾値は10.0程度。
  4. [ 選択 ] – [ 選択範囲を拡大 ]。1程度拡大する。
  5. [ 選択 ] – [ 選択範囲を反転 ]
  6. 半透明にしない内部を黒で塗りつぶす。(背景色を黒にして、deleteキー)
  7. Ctrl + Aでレイヤー全体を選択後、[ 色 ] – [ 明度を反転 ]
  8. Ctrl + A, Ctrl + Cで複製したレイヤー全体をクリップボードにコピー
  9. 元の画像を選択して、[ レイヤーマスクの追加 ] – [ 完全不透明(白) ]
  10. Ctrl + Vでクリップボードの画像をレイヤーマスクにペースト
  11. レイヤーパレットで、フローティング選択範囲を選択して、[ レイヤーを固定 ]
  12. 複製したレイヤーを選択して、削除
  13. 上記同様に保存

 

■参考

カテゴリー: GIMP