ホーム >  作業効率化 > Docker >  VagrantのDockerにHTTP/2に対応したWebサーバを構築


Posted:2017/09/14 9:00:08 AM|Category : Docker

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サーバを構築

ホスト環境

OS Ubuntu 16.04.1 LTS 64bit
Virtualbox 5.1
Vagrant 1.9.5

ゲスト環境

OS CentOS 7.1.1503
Docker docker-ce.x86_64 17.06.2.ce-1.el7.centos

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
FROM ベースとなるDockerイメージの指定を行います。1から環境を構築する場合、ubuntuやCentOSなどのDockerイメージをベースに必要なアプリケーションを追加しますが、今回はHTTP/2環境の構築に必要なnginx 1.9.6とOpenSSL 1.0.2が既にインストールされている「ehekatl/docker-nginx-http2」のイメージを使用します。
RUN 環境構築をするためのコマンドを指定します。opensslコマンドを使って自己証明書を発行しますが、対話形式のコマンドはエラーになってしまうため、オプションで必要な情報をセットし、対話形式にならないように記述します。
&& これらのコマンドは1つずつRUN命令で書くこともできますが、ビルドする際にRUN命令を実行する履歴として保存されます。そのため、生成されるDockerイメージの容量が肥大化してしまいます。「&&」でコマンドを繋げることで一つのコマンドとして実行されます。
&& openssl x509 -days 3650 -req -signkey server.key 有効期限を10年に設定した自己証明書を発行します。
&& cp server.key /etc/nginx/server.key \ 発行された自己証明書をnginxのディレクトリにコピーしています。
COPY ローカル環境にあるnginxの設定ファイルをコンテナ内に配置します。(nginxの設定ファイルはDockerfileを配置したディレクトリに作成します。)

公式に配布されているnginxのDockerイメージにもOpenSSLはインストールされていますが、バージョンが1.0.1のため、Google ChromeでHTTP/2が有効になりません。Google ChromeでもHTTP/2を有効にするには、OpenSSL1.0.2以降のバージョンがインストールされているDockerイメージを使います。

HTTP/2通信にはSSLが必須です。公開環境であれば「Let’s Encrypt」を使用してSSL証明書を取得できますが、今回のようなローカル環境は、自己証明書を使ってSSLを有効にします。

④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;
  }
}

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

  • vagrant/
  • http2/
  • Dockerfile
  • nginx.conf

⑤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アドレスです。

https://192.168.33.15

⑨今回は自己証明書を使用しているため、アクセス時に証明書のエラーが表示されます。詳細情報を表示し、「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>

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

  • vagrant/
  • http2/
  • Dockerfile
  • nginx.conf
  • html/
  • sample.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を入力します。

https://192.168.33.15/sample.html

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


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告