2018年3月13日火曜日

【備忘録】nginx 1.13.9 で実装された http2_push_preload を WordPress で使ってみよう！

WP-CLI チームメンバーとして有名な宮内氏が作成した

についての情報をキャッチしたので、実際に試してみました。
ちょっと戸惑った点もあったので、本ブログにて備忘録として残しておきます。

準備


  • nginx 1.13.9（CHANGE LOG）
  • PHP 7 以降
  • WordPress 4.9 以降
  • https://◯◯ なサイト
です。準備については割愛します。
また、macOS のターミナルからチェックする方法として、Homebrew をインストールしているなら
  • brew install nghttp2 
として nghttp コマンドをインストールしておくと便利です。

Server PUSH の概要


情報は古いですが、
にわかりやすく解説されているかなぁと思います。
また、
も分かりやすいかも。ようするに、リクエストされたファイル内で別ファイルを読み込んでいると、１ファイルずつやりとりせずに、一括でやってしまえという考え方。

HTTP2_PUSH で動作確認


まずは WordPress 内の１ファイルを対応してみましょう。
別に WordPress 内である必要はありません。

server{
    listen 443 ssl http2;
    ...

    location / {
      ...
      ...
      proxy_buffer_size   128k;
      proxy_buffers   4 256k;
      proxy_busy_buffers_size   256k;
      http2_push_preload on;

      http2_push /wp-content/themes/△△/top_bg.jpg;
      ...
     }
}

nginx の server 直下か、location 内に、ファイルごとに http2_push で指定します。
※ この技術は https かつ HTTP/2.0 を有効にしたサイトじゃないとダメです。
※ WordPress だと管理画面だけ https の場合もあるので、サイトまるごとでなくてもいけるとは思います。

いずれも Chrome の Developer Toolsを開いて、Networkにて確認しています。
その際、キャッシュを無効にするために「Disable cache」にチェックをいれています。


設定前
Intiator = (index)

設定後
Intiator = Push / (index)


もし nghttp をインストールしてしているなら
nghttp  -nv  https://◯◯/  | grep PUSH_PROMISE
のように、サイトトップで読み込まれる https://◯◯/wp-content/themes/△△/top_bg.jpg について、Server Push に対応している表示がされます。

なおディスクキャッシュが優先されるようで、キャッシュされていたら Push は出てきませんね。 

ということで、１ファイルごとの設定は使えたので Server Push は使えてるということになります。あとは、 http2_push_preload のほうを利用できるように WordPress に組み込みます。http2_push_preload のほうは、適切な Link ヘッダーを出せばいいので、それをやってくれるプラグイン「HTTP/2 Server Push」（宮内氏作成）をインストールします。

HTTP/2 Server Push プラグインの概要


このプラグインは、ソースの lib/function.php を見てみると
  1. wp_enqueue_style と wp_enqueue_script で読み込まれた CSS と JavaScript を読み取って Link ヘッダーを出す
  2. フィルタフック「http2_server_preload_items」で指定したファイル
    ※ https://github.com/tarosky/http2-server-push-preload の Customizing 参照
を読み取って LINK ヘッダーを吐き出すようです。
なので、テーマによって style.css に @import とかで CSSを読み込ませていると、「１」には引っかからないので、「２」で個別指定する必要があります。

HTTP/2 Server Push プラグインのインストール


  1. https://github.com/tarosky/http2-server-push-preload/releases より  http2-server-push-preload.zip をダウンロードする
  2. 展開したフォルダを、WordPress のプラグインフォルダへ入れる
  3. WordPress 管理画面より、「Http2 Server Push」 プラグインを「有効化」する

とまぁこれが一般的かと思いますが、composer と WP-CLI が導入されているサーバーだと（※注意：下記の方法だと、 nightly バージョンになりました。管理画面のプラグインやテーマの更新から安定版への更新 0.5.0 が出来ました）

cd WordPressのインストールフォルダ
cd wp-content/plugins
git clone https://github.com/tarosky/http2-server-push-preload
cd http2-server-push-preload
composer install
cd ../../../
wp plugin activate http2-server-push-preload

なんかで、ソースをダウンロードしてインストールして WP-CLI でプラグインを有効化するまでをコマンドラインで出来ます。

動作確認


※ここでは、macOS 10.13.3 にいれた valet 環境を使って WordPress をインストールし、試しています（ https://demo.test ）。

brew upgrade nginx
sudo brew services restart nginx 

として、nginx 1.13.9 をインストールして nginx を再起動しておいてください。
そして、 $HOME/.valet/Nginx/demo.test の server セクションに
  
のように、 
      proxy_buffer_size   128k;
      proxy_buffers   4 256k;
      proxy_busy_buffers_size   256k;
      http2_push_preload on;  
を追加しておきます。
そして
sudo brew services restart nginx 
をして nginx を再起動しておきます。
※ valet については【備忘録】 wp valet new コマンドで Error establishing a database connection が出る あたりを参考にしてみてください。


Chromeで サイトにアクセスして、Developer Tools を開きます。
Network タグで「Disable cache」にチェックをいれて、サイトを読み込み直します（Command+r）。
すると、下図のように CSSやJavaScript ファイルの Intiator が「Push」となっていたらOK。


そして、http2-server-push-preload プラグインを無効にすると下図のように、Push ではないことが確認できるはずです。


ただし、テーマによって style.css に直書きとか、@import を使ってCSSを読み込んでいると、このプラグインの対象外になります。その場合には、管理画面で試してみて下さい。大抵のプラグインは、CSSやJavaScriptを読み込む時に、正しい手順をしていると思うので、うまくいくはずです。まぁ最悪サイトそのものには適用できなくても、管理画面は適用できて速くなる！ってことはあるかもしれませんね。

2018年3月13日 @kimipooh

投稿者 時刻: 0 件のコメント:
ラベル: , ,

2018年3月12日月曜日

【備忘録】 wp valet new コマンドで Error establishing a database connection が出る

WordCamp Kyoto 2017 に参加して #wckyoto2017 で Valet + WP-CLI によって、手軽に手持ち macOS に WordPress のテストサイトを立ち上げる環境を構築したのですが、

wp valet new demo

などと https://demo.dev を作成しようとすると、

Error: Error establishing a database connection. This either means that the username and password information in your `wp-config.php` file is incorrect or we can’t contact the database server at `localhost`. This could mean your host’s database server is down.

というエラーがでてまともにインストールできなくなってしまいました。筆者だけの環境でそんなようなことが起こる可能性もありますが、何かのトラブルシューティングに使えるかもしれませんので、どういう対策をしたのか備忘録として残します。

準備


macOS に Valet や WP-CLI を導入する方法は割愛します
WordCamp Kyoto 2017 に参加して #wckyoto2017 あたりや他のサイトをチェックしてみてください。

.dev ドメインのままなら、 .test ドメインに変更しておくこと
  • valet domain test
すると
$HOME/.valet/config.json 
"domain": "test" 
$HOME/.valet/dnsmasq.conf 
address=/.test/127.0.0.1

と変更されているはず。

wp-config.php の DB_HOST の値を 127.0.0.1 にする


define( 'DB_HOST', 'localhost' );

だとエラーがでて、

define( 'DB_HOST', '127.0.0.1' );

だとうまくいくので、これを直して WordPress をインストールするといけるということ。wp valet new では、DB_HOSTの設定はいじれないので、ちょっと工夫が必要。

https://demo.test の作成手順


便宜上、Valet のインストールフォルダは、$HOME/valet とする

cd $HOME/valet
valet park
valet secure demo
wp valet new demo
cd demo
rm -f  wp-config.php
wp core config --dbhost="127.0.0.1" --dbname="wp_demo" --dbuser="root" --dbpass=""
wp core install --url="https://demo.test" --admin_user="admin" --admin_password="admin" --admin_email="sample@example.com" --title="demo"


という一連のコマンドでもって、 https://demo.test に WordPress を導入できます。
wp valet new コマンドで、WordPress 本体のダウンロードまでは出来るけれど、WordPress のインストールでエラーになります。そこで、valet によって作成された wp-config.php を削除して、wpコマンドで改めて作成し、WordPressをインストールするとうことです。
valet は、データベースのパスワードはなし（初期）なので、同じようにしてます。
また説明上、WordPressのログイン ユーザー名とパスワードは共に admin にしてます。

2018年3月12日 @kimipooh
投稿者 時刻: 0 件のコメント:
ラベル: ,
登録: 投稿 (Atom)