VagrantのDockerにHTTP/2に対応したWebサーバを構築

VagrantのDockerに、HTTP/2に対応したWebサーバーを構築します。

HTTP/2を使いたい

HTTP/2とは、Webサイトの通信を高速化するための仕組み（通信プロトコル）です。これまではHTTP/1.1が主流でした。HTTP/1.1は、同時には6つのファイルのリクエストしか送れません。そのため、CSSスプライトを使って画像を1つにまとめてファイル数を減らす工夫をして表示の高速化を図っていました。HTTP/2では、100個以上のリクエストを同時に送れるようになったため、Webサイトの表示を高速化できます。（CSSスプライトが無意味になります。）

以下のサイトを参考にします。

→HTTP/2に対応したウェブサーバーを簡単に構築！

Dockerで簡単にHTTP/2を使う

HTTP/2を使うには、Dockerを利用します。インフラ整備が面倒なフロントエンドエンジニアさんは、ぜひDockerで作ってテストに使いましょう。

Dockerfileを使う

DockerHubには様々なDockerイメージが配布されています。しかし、お目当ての環境がない場合がありますので、Dockerイメージをカスタマイズ・新規作成してオリジナルの環境を構築します。今回は、Dockerfile（インフラ環境をコード化したファイル）を使ってオリジナルの環境を構築し、HTTP/2に対応したWebサーバーを使えるようにします。

準備

Vagrantでゲスト環境（仮想環境）を作ります。

①Virtualboxをインストールします。Virtualboxのインストールまでで結構です。

→VirtualBoxをインストールする for Ubuntu

②Vagrantをインストールします。centos7環境を作りますので、Vagrantのインストールのみ済ませてください。

→Vagrantをインストールしてテスト環境を作る for Ubuntu

Vagrantのcentos7環境の詳細を調べる場合は以下のように確認します。

→VagrantのCentOS7の環境を確認（lsb_releaseコマンドなど）

③Vagrantのcentos7にDockerをインストールします。

→VagrantのCentOS7にDockerをインストール

④VagrantのDockerにWebサーバを構築します。

→VagrantのDockerにWebサーバを構築

ホスト環境

ゲスト環境

Vagrantへログイン

①【ホスト環境】端末を開き、前回構築したVagrantのディレクトリまで移動します。

cd vagrant/django_apps/

②【ホスト環境】仮想マシンを起動します。

vagrant up

③【ホスト環境】ログインします。

vagrant ssh

Dockerでhttp2のWebサーバーを構築

①作業が面倒なので、ルートでログインしておきます。

su -

②「/vagrant」に以下のようにディレクトリとファイルを作成します。

cd /vagrant
mkdir http2
cd http2
touch Dockerfile

③Dockerfileを編集します。

vi  Dockerfile

以下のような内容を記述します。

# FROM nginx:1.9.6
FROM ehekatl/docker-nginx-http2
 
# 作成者名を記載
MAINTAINER UserName
 
# 自己証明書を発行
RUN openssl genrsa 2048 > server.key \
&& openssl req -new -key server.key -subj "/C=JP/ST=Tokyo-to/L=Minato-ku/O=ICS inc./OU=/CN=ics.media" > server.csr \
&& openssl x509 -days 3650 -req -signkey server.key < server.csr > server.crt \
&& cp server.key /etc/nginx/server.key \
&& cp server.crt /etc/nginx/server.crt
 
# 設定ファイルをコンテナ内に配置
COPY nginx.conf /etc/nginx/nginx.conf

④Dockerfileと同じディレクトリにnginx.confという名前で作成します。ここに、発行した自己証明書を設定します。

vi  nginx.conf

⑤以下のように内容を記述します。

worker_processes  1;
 
events {
  worker_connections  1024;
}
 
http {
  server {
    listen       80;
    listen       443 ssl http2;
 
    server_name  localhost;
 
    ssl_certificate      /etc/nginx/server.crt;
    ssl_certificate_key  /etc/nginx/server.key;
    ssl_session_timeout 1d;
    ssl_session_cache shared:SSL:50m;
 
    # intermediate configuration. tweak to your needs.
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
 
    root  /usr/local/nginx/html;
    index index.html index.htm;
  }
}

以下のような構造になります。

⑤Dockerfileをビルドします。Dockerイメージを作成Dockerfileのあるフォルダに移動し「docker build」コマンドでイメージの作成を行います。

docker build -t icsmedia/nginx-http2 .

⑥Dockerイメージが作成されていることを確認します。

docker images

REPOSITORY                   TAG                 IMAGE ID            CREATED              SIZE
icsmedia/nginx-http2         latest              eb5d06dfd5cf        About a minute ago   478MB

⑦作成したDockerイメージからコンテナを「docker run」コマンドで起動します。

docker run -p 80:80 -p 443:443 -d icsmedia/nginx-http2

⑧コンテナが起動したら、ホスト環境のブラウザから以下のURLを入力します。「192.168.33.15」はvagrantのipアドレスです。

⑨今回は自己証明書を使用しているため、アクセス時に証明書のエラーが表示されます。詳細情報を表示し、「192.168.33.15にアクセスする（安全ではありません）」のリンクから強制的にアクセスしてください。

⑩nginxの初期画面が表示されます。Google Chromeのデベロッパーツールを使ってHTTP/2で通信されているか確認します。デベロッパーツールはF12キーで起動できます。

⑪[Network]タブを開き表の見出し部分を右クリックし、メニューから[Protocol]を選択しチェックをいれます。

⑫ブラウザをリロードすると、デベロッパーツールに通信内容が表示されます。表示されているプロトコル欄に「h2」と表示されていれば、HTTP/2で通信できています。

Webサーバーに任意のファイルをアップする

①先ほど作成したコンテナを一度停止し、削除します。

docker stop [コンテナ名 or コンテナID]
docker rm [コンテナ名 or コンテナID]

②Dockerイメージも削除します。

docker images
docker rmi [IMAGE ID]

③Dockerfileを編集します。

vi  Dockerfile

以下のように、最下行に「COPY文」を追記します。

# FROM nginx:1.9.6
FROM ehekatl/docker-nginx-http2
 
# 作成者名を記載
MAINTAINER UserName
 
# 自己証明書を発行
RUN openssl genrsa 2048 > server.key \
&& openssl req -new -key server.key -subj "/C=JP/ST=Tokyo-to/L=Minato-ku/O=ICS inc./OU=/CN=ics.media" > server.csr \
&& openssl x509 -days 3650 -req -signkey server.key < server.csr > server.crt \
&& cp server.key /etc/nginx/server.key \
&& cp server.crt /etc/nginx/server.crt
 
# 設定ファイルをコンテナ内に配置
COPY nginx.conf /etc/nginx/nginx.conf
COPY ./html /usr/local/nginx/html

④sample.htmlの内容を編集します。

mkdir html
cd html
vi sample.html

以下の内容を記述します。

<html>
<body>
<h1>hello!</h1>
</body>
</html>

以下のような構造になります。

⑤再度Dockerfileをビルドします。

cd ../
docker build -t icsmedia/nginx-http2 .

⑥作成したDockerイメージからコンテナを「docker run」コマンドで起動します。

docker run -p 80:80 -p 443:443 -d icsmedia/nginx-http2

⑦ホスト環境のブラウザから、以下のURLを入力します。

ブラウザに「hello!」と表示されればOKです。