第33回「ネットワーク パケットを読む会 (仮) 」(https://atnd.org/events/70866)での発表資料です。

1. nginxに追加された
新モジュール
それが
33第 回
#pakeana
@furandon_pig
です

2. • Twitter ID： @furandon_pig
• 家ではNetBSDを使っています
• 興味ドリブンで勉強会開催しています
• ECMA-262 Edition5.1読書会
• https://ecma262reading.doorkeeper.jp/
• 「理論から学ぶ データベース実践入門」読書会
• http://riron-db.connpass.com
• ゆるいUNIX勉強会〜ゆるゆに〜
• https://yry2.doorkeeper.jp/
• Live2Dで遊ぶ会
• https://enjoying-live2d.doorkeeper.jp/
自己紹介

3. nginxのHTTP2モジュールの話です
「ご注文はうさぎですか??」的な
風味と共にお送ります
本日の発表内容

4. HTTPの新バージョン
（2015年に標準化）
いくつかのWebサーバでサポート
されている
nginx-1.9.5でHTTP/2をサポート
多重化された単一コネクション
HTTP/2？

5. HTTP/2モジュールを含めてビルド
テスト環境
サーバ
CentOS 7
nginx-1.9.5
クライアント
Windows10
firefox
172.16.0.53 172.16.0.52

6. HTTP/2モジュールを含めてビルド
nginx-1.9.5のビルド
$ sudo yum install gcc pcre-devel zlib-devel openssl-devel
$ curl -O http://nginx.org/download/nginx-1.9.5.tar.gz
$ tar zxvf nginx-1.9.5.tar.gz
$ cd nginx-1.9.5
$ ./configure --prefix=/opt/nginx-1.9.5 --with-http_v2_module
$ make
$ sudo make install

7. テスト用にサーバ証明書を作成
オレオレ証明書の作成
$ openssl genrsa 2048 > gochiusa.key
$ openssl req -new -key gochiusa.key > gochiusa.csr
$ openssl x509 -days 3650 -req -signkey
gochiusa.key < gochiusa.csr > gochiusa.crt
【参照】オレオレ証明書をopensslで作る（詳細版） - ろば電子が詰まっている
http://d.hatena.ne.jp/ozuma/20130511/1368284304
/opt/nginx-1.9.5/confに配置する
$ sudo cp server.key server.crt /opt/nginx-1.9.5/conf/

8. nginx.confに記述する
nginxのHTTP/2設定(1/2)
server {
listen 443 ssl http2 default_server;
server_name localhost;
ssl_certificate gochiusa.crt;
ssl_certificate_key gochiusa.key;
ssl_ciphers "ECDHE-RSA-AES128-GCM-SHA256";
ssl_session_cache off;
location / {
root html;
index index.html index.htm;
}
}

9. nginxの起動・停止
nginxの起動と設定リロード
$ sudo /opt/nginx-1.9.5/sbin/nginx
$ sudo /opt/nginx-1.9.5/sbin/nginx -s stop
設定リロード
$ sudo /opt/nginx-1.9.5/sbin/nginx -s reload

10. firefoxの開発者ツールから確認
HTTP/2での接続確認(1/2)

11. nginxのアクセスログから確認
HTTP/2での接続確認(2/2)
"GET /gochiusa_icon/00000231.png HTTP/2.0" 200 177113 "https://172.16.0.53/gochiusa.html"
HTTP/2.0

12. nginx.confの設定例
HTTP/2での接続確認
コネクションの多重化
ごちうさベンチマーク（仮）
HTTP/1.xとHTTP/2の性能比較
動作デモ

13. JSON風の形式でデータを保存
HAR形式(1/2)

14. “timings”に送受信時間のデータ
HAR形式(2/2)
"request": {
"bodySize": 0,
"method": "GET",
"url": "https://172.16.0.53/gochiusa_icon/00000141.png",
"httpVersion": "HTTP/2.0",
...中略...
"cache": {},
"timings": {
"blocked": 0,
"dns": 0,
"connect": 0,
"send": 0,
"wait": 9,
"receive": 16
},
"serverIPAddress": "172.16.0.53",
"connection": "443"

15. ワンライナーでデータ切り出し
HARから送受信データ切り出し
# blocked, dns, connect, send, wait, receive
grep -A6 timings $1
| sed -e "s/[t ]//g"
| paste - - - - - - - -
| sed -e "s/:/ /g" -e "s/,//g"
| awk '{ print $4 "," $6 "," $8 "," $10 "," $12 "," $14 }'
$ grep -A6 timings $1
| sed -e "s/[t ]//g"
| paste - - - - - - - -
| sed -e "s/:/ /g" -e "s/,//g"
| awk '{ print $4 "," $6 "," $8 "," $10 "," $12 "," $14 }’
0,0,0,0,567,360
実行例

16. 大量の画像データ受信時間で比較
HTTP/1.xとHTTP/2の比較
0 250 500 750 1000
HTTP/1.x
HTTP/2
blocked dns 接続 送信 待機 受信
単位：ミリ秒

17. HTTP/1.xと比べて一割ほど速い
接続にかかる時間が小さい
コネクションの多重化
待機・受信時間がHTTP/1.xより
大きい
HTTP/2からみた比較結果

18. nginx-1.9.5のHTTP/2モジュール
HTTP/2のデモと動作確認
ブラウザとアクセスログで確認
ごちうさベンチマーク（仮）
HTTP/1.xとHTTP/2の性能比較
まとめ