centosのnginxでHTTP/2通信を設定する。HTTP通信の効率化でサイト表示速度を向上。

2018/10/05 CentOS, Nginx, サーバー構築

nginx-http2-top
nginxに関する前回の記事
「ウェブサイトを爆速に!nginxのFastCGIキャッシュで100倍以上の処理速度を」
でnginxの環境でFastCGIキャッシュと呼ばれるウェブサイトの処理速度を向上させるためのキャッシュ機能の設定までを紹介しました。今回はその環境にHTTPの拡張プロトコルであるHTTP/2の設定を行ってみます。
HTTP/2はHTTPの通信を効率よく行うことができるように、従来のHTTP/1.1をバージョンアップしたHTTPの通信規格にです。HTTP/1.1の場合1つのリクエストが終了するまで、次のリクエストを送ることができません。これが大きな通信速度遅延の要因のひとつでした。HTTP/2通信規格では、複数の要求を1つの接続で行うことができるため、サイトの速度向上に期待が出来ます。

スポンサーリンク

多少、分かり難い説明だと思います。実際の動きについては、以下のサイトで視覚的に確認が出来ます。
http://www.httpvshttps.com/
nginx-http2-1

またHTTP/2プロトコルについて、更に詳しく知りたい方には以下のサイトがオススメです。
HTTP/2 Frequently Asked Questions
https://http2.info/faq.html

HTTP/2 の概要
https://developers.google.com/web/fundamentals/performance/http2/?hl=ja

本記事と合わせて参考にしてみて下さい。
尚、HTTP/2については、現在、HTTPS通信でしか利用することができません。その為、本記事の設定を行う場合には、事前にサイトのSSL化が必要となる点にご注意下さい。nginxでサイトをSSL化するための手順は、記事
「CentOS 7のnginxでSSLを設定。Let’s Encryptで安全なウェブサイトを構築する。」
で詳しく紹介しています。SSL化を行っていない場合は参考にして下さい。それではHTTP/2を利用するための具体的な手順を紹介していきます。

1.HTTP/2を設定する環境

HTTP/2を設定する環境はnginx環境へFastCGIキャッシュの設定手順を紹介した記事
「ウェブサイトを爆速に!nginxのFastCGIキャッシュで100倍以上の処理速度を」
でも紹介していますが、確認の意味で再度纏めておきます。基本的な環境は以下の通りです。

  • OSのバージョンはCentOSで最新のバージョン7.5を利用しています。(2016年7月現在)
  • ウェブサーバーとしてnginx1.15.0がインストールされています。(2018年7月現在、mainline最新版)
  • nginxは基本的な設定が完了して、バーチャルホストが二つ設定されています。
  • バーチャルホストは”www.testdom.com”と”www.testdom2.com”になります。
  • phpとphp-fpmの7.2系がインストールされて、テスト用のwordpressサイトが表示されています。
  • phpアクセラレータとしてOPcacheとAPCuがインストールされています。
  • Let’s Encrypytを利用してHTTPS通信の機能を有効化しています。
  • サーバーはインターネットへ接続されており、グローバルIPアドレスが一つ、割り当てられています。
  • ファイアウォールとしてfirewalldを設定しています。
  • nginxのキャッシュ機能としてFastCGIキャッシュを設定しています。

この環境を前提にHTTP/2の設定を進めていきます。

2.バーチャルホストへのHTTP/2設定

本環境ではnginxでバーチャルホストを設定しています。その為、設定手順としてはバーチャルホストで利用するという前提で手順を紹介します。まずHTTP/2をバーチャルホストで利用するために設定が必要なファイルは”/etc/nginx/sites-available”ディレクトリに含まれるバーチャルホスト用の設定ファイル”ドメイン名”.confになります。以下が現状のディレクトリとファイルの構成です。

上記ディレクトリツリー上の”sites-available”ディレクトリに含まれる設定ファイル

  • www.testdom.com.conf
  • www.testdom2.com.conf

が今回の設定対象です。

2-1.www.testdom.com.conf設定ファイルのバックアップ

HTTP/2通信に関する設定はバーチャルホスト用設定ファイルであるwww.testdom.com.confに行います。先ずはこのファイルをバックアップします。以下の手順でバックアップを行います。

コピーされたバックアップファイルが存在することを確認します。

コピーしたファイル”www.testdom.com.conf.org4”があることが確認できました。

2-2.www.testdom.com.conf 設定ファイルの編集

ファイルのバックアップが完了しましたので”www.testdom.com.conf”を編集していきます。FastCGIキャッシュの設定までが完了している、変更前の設定ファイルの内容は以下のようになります。

上記の記載内容で、変更が必要な部分は、serverディレクティブのlisten設定になります。現在の設定は

となっているlisten設定にhttp2を追加します。具体的には以下のように変更します。

2-3.HTTP/2設定変更後のバーチャルホスト用設定ファイル

HTTP/2を利用するように変更した設定ファイル全体は以下のようになります。

これで設定ファイルの変更は完了です。変更したファイルを保存します。

2-4.www.testdom2.com.conf設定ファイルのバックアップ

同様の設定を、もう一つのバーチャルホスト用設定ファイルであるwww.testdom2.com.confに行います。先ずはこのファイルをバックアップします。
以下の手順でコピーを行います。

コピーされたバックアップファイルが存在することを確認します。

コピーしたファイル”www.testdom2.com.conf.org4”があることが確認できました。

2-5.www.testdom2.com.conf 設定ファイルの編集

ファイルのバックアップが完了しましたので”www.testdom2.com.conf”を編集していきます。FastCGIキャッシュの設定までが完了している、変更前の設定ファイルの内容は以下のようになります。

上記の記載内容で、変更が必要な部分は、serverディレクティブのlisten設定になります。現在の設定は

となっているlisten設定にをhttp2を追加します。具体的には以下のように変更します。

スポンサーリンク

2-6.変更後のバーチャルホスト用設定ファイル

変更後の設定ファイル全体は以下のようになります。

これで設定ファイルの変更は完了です。変更したファイルを保存します。

2-7.設定ファイルの確認

設定ファイルの作成と配置が完了したら、間違いや問題がないかを確認します。nginxに”-t”オプションを付けて実行することで設定ファイルの間違いをチェックできます。設定変更後には実行することをお勧めします。
以下のように実行します。

上記のように、”test is successful”と表示されていればファイルには問題ありません。

3.設定の有効化

設定ファイルの変更を行った場合には、ファイル再読み込みとして、nginxの再起動が必要になります。systemctlコマンドでnginxを再起動します。

エラーが出力されなければ、正常に再起動は完了しています。これでHTTP/2設定の有効化は完了です。

4.HTTP/2プロトコルの動作確認

「項目3.設定の有効化」まででHTTP/2の設定が完了しました。ここからは実際にブラウザでサイトへ接続して、正常にHTTP/2通信が動作していることを確認していきます。利用しているブラウザはGoogle Chromeになります。

4-1.HTTP/2通信の確認 www.testdom.com

Google Chromeのデベロッパーツール(その他のツール=>デベロッパーツール)を起動します。[Network]を選択して、ページをリロードします。
nginx-http2-4-1-1
表示される[Name]などのカラムを右クリックすると、表示項目の追加メニューが表示されます。
[Protocol]にチェックを入れます。
nginx-http2-4-1-2
再度ページをリロードすると、接続プロトコルが表示されます。本環境では以下のように”h2”と表示されることから、HTTP/2通信が行われていることが確認できました。
nginx-http2-4-1-3

4-2.HTTP/2通信の確認 www.testdom2.com

続いて”www.testdom2.com”でもHTTP/2通信を確認します。確認方法は項目4-1.で記載した手順と同じで、ページを取得した際の通信プロトコルをデベロッパーツールから確認します。
nginx-http2-4-2
上記のようにProtocolが”h2”になっていれば、HTTP/2通信は有効になっています。これで確認は完了です。

5.パフォーマンスの比較

ここまででHTTP/2の設定と動作確認が完了しました。実際のどの程度、パフォーマンスが向上したかをApacheに付属しているApache Benchコマンド、”ab”で測定してみます。abはApacheを導入すると同時にインストールされます。ここでは環境として、別のサーバーから、HTTP/2を有効にしたnginxサーバーを測定するようにしています。

5-1.HTTP/2 設定前のテスト

先ずはHTTP/2が有効になっていないサイトに対してテストを行います。(FastCGIキャッシュは有効)abコマンドにはオプションとして”-n”と”-c”を指定します。-nはリクエスト総数を指定します。-cは同時接続数になります。本記事では、リクエスト数と同時接続数をやや増やして、300リクエストを同時接続20ユーザーを前提としてテストを実行しました。
結果は以下のようになりました。
HTTP/2 設定前のテスト

本テストでは以下の項目に注目しました。

  • Time taken for tests: 0.528 seconds
  • Requests per second: 568.34 [#/sec] (mean)

”Time taken~”はテストの所要時間、”Requests per~”は秒間でどれだけのリクエストを処理できたかを示す項目になります。上記から従来の構成では、テストの所要時間は約0.5秒で、1秒間に処理できたリクエストは約570になります。

5-2.HTTP/2設定後のテスト

続いて、同じ条件でHTTP/2設定後のnginxサーバーについてテストを行います。結果は以下のようになりました。
HTTP/2設定後のテスト

本テストでは以下の項目に注目しました。

  • Time taken for tests: 0.544 seconds
  • Requests per second: 551.47 [#/sec] (mean)

”Time taken~”はテストの所要時間、”Requests per~”は秒間でどれだけのリクエストを処理できたかを示す項目になります。上記から従来の構成では、テストの所要時間は約0.5秒で、1秒間に処理できたリクエストは約550になります。
本テスト環境ではHTTP/2通信が行われていますが、HTTP/1.1の場合と比較して、やや遅くなっていることが確認できました。
HTTP/2通信においては、一つのリクエストで複数の要求を対応できるようになっていますが、サイトの作りや、ファイル数に影響されるように見受けられます。その為、必ずしも速度が向上するという結果ではありませんでした。

6.まとめ

最近のnginxでは、比較的、簡単にHTTP/2通信を行うように設定することができます。HTTPSを含めてHTTP/2は今後のHTTPプロトコルの主流になっていくかと思います。
速度の向上という面では、それ程までには実感はできませんが、HTTP通信を効率よく処理できることは間違いありませんので、nginxをご利用の場合は、是非、設定を行ってみて下さい。

関連する記事


Facebookでのご購読が便利です。

Twitter・Feedlyでもご購読できます。

Twitterでフォローする Feedlyでフォローする

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  • スポンサーリンク