mediba advent calendar 2016 14日目の記事です。

サーバサイドpushが出来たり、画像やCSSのダウンロードをするときに順番待ちをしなくて良くなり、表示速度が早くなる！
というHTTP2を今更ながら体感したく、昨日あだちんも紹介してくれた検証/研究用のAWSインスタンスに設定して動作を見てみました。

もちろん今ではCloudFrontを用意してポチッとやればHTTP2通信してくれるようになったわけですが、
そこはフロントエンジニアとはいえど自前で一度くらいは構築しておきたいと、興味本位で実施しました。

環境

サーバ

• AWS t2.small

OS

• AmazonLinux

M/W

• nginx/1.10.1
• OpenSSL 1.0.2j 26 Sep 2016

やったこと

nginxのVerUp

nginxは1.9.5以降HTTP2対応とのことでした。
とりあえず楽にやってしまおうと、
sudo yum search nginx
したところAmazonレポジトリに1.10.1がありました。

しかしHTTP2の動作にはOpenSSL1.0.2以上が必要で、nginxをリンクしてコンパイルする必要があります。
AmazonレポジトリではOpenSSLが1.0.1であり、nginxもこれを使ってコンパイルされていました。
そこでOpenSSLをVerUpすることにしました。

OpenSSLのVerUp

yumではインストール出来ないのでコンパイルしました。

wget https://www.openssl.org/source/openssl-1.0.2-latest.tar.gz
sudo tar -zxf openssl-1.0.2-latest.tar.gz 
    〜略〜
$ openssl version
OpenSSL 1.0.2j  26 Sep 2016

nginxのVerUp（再）

当然、VerUpしたOpenSSLをつかってコンパイルしなくてはなりませんのでyumは使いません。
ソースコードをダウンロードしてコンパイル、上書きインストールしました。

sudo ./configure --prefix=/usr/share/nginx --with-http_ssl_module --with-http_v2_module --with-stream_ssl_module  --with-openssl=/usr/local/src/openssl-1.0.2j 

コンパイルオプションは色々省略しています。

conf書き換え

confでSSLを有効とし、（元から設定済みでした）
HTTP2を設定しました。

HTTP2は仕様上http通信でも有効になるのですが、ブラウザ側でhttpsの場合のみ有効になるように実装されておりSSL設定が必要になります。

server {
    listen       80;
    listen       8080;
    listen       443 ssl http2 default_server;
    server_name  xxxx.mediba.jp;
    #server_name  localhost;

    ssl on;
    ssl_certificate /etc/letsencrypt/live/xxxx.mediba.jp/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/xxxx.mediba.jp/privkey.pem;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';
    〜略〜
}

reload

    $ sudo /etc/init.d/nginx configtest
    $ sudo /etc/init.d/nginx reload
    nginx を再読み込み中:                                      [  OK  ]

動作確認

Protocolがh2（http2）になっていることが確認できました。

思ったより簡単にサーバの設定ができました。
nginxの設定だけなので実際には色々考慮する必要があるのだろうと思います。
コンパイルは久々にやったのでダルかったです。。。

HTTP2の威力を見てみる

画像がたくさんあるページを用意し、アクセスしてみました。

HTTP1.1でアクセス

HTTP２でアクセス

結果

ネットワークやサーバの負荷、環境の違いがありますので単純な速度比較は出来ませんが、
http2では、http1.1で発生しているセッション数上限によるQueueing（透明なところ）がなくなり、
画像を並列にダウンロードしていることがわかります。

今回のアクセスでは最大500msecのQueueingが発生しており、これが無くなるとして単純に0.5秒高速化できるはずです。
かなりの効果が見込めますね！