Dockerで作ったWebサーバでページを表示してみる。

Dockerの勉強を始めました。

サーバー構築してApacheとかnginxのデフォルトページを表示するっていう記事が多くて、実際に作ったページをDockerで表示するにはどうするんだろう？と思って調べたことをまとめました。

こんな感じのページをDockerで作ったWebサーバで表示させます。

f:id:cidermitaina:20180905120917p:plain

Dockerのインストール方法などは省略しています。。。

Dockerって？

まずはDockerとは？っていうところを簡単にまとめます。

Dockerとは？

アプリ開発・移動・実行プラットフォーム

開発者が簡単にアプリケーションを動かす環境を作成します。

Dockerを使えば、OSとアプリがインストールされた環境を閉じ込めて保存しておき、いつでもその環境を立ちあげることができます。

例えば、 ApacheやnginxをインストールしたCentOSのような環境を簡単に作成して保存・立ち上げが可能です。

メリット・デメリット

メリット

OS依存がなく、導入が容易
案件ごとに異なる環境を構築できるため、特定のPC依存を回避
ミドルウェア導入や新インフラ環境のテストが各自のPCで可能

デメリット

学習コスト

DockerfileからDocker imageを作成

実際にやってみようと思います。

1. Dockerfileの作成

まずDockerfileを作成します。

Dockerfileとは？

ベースとするDockerイメージに対して実行する内容を記述するファイルです。

Dockerイメージ
OSとアプリがインストールされた環境を閉じ込めたファイル

Dockerfileを作成します。

$ vi Dockerfile

以下の記述を記入します。

# setting base image
FROM centos:centos7

# Author
MAINTAINER cidermitaina

# install Apache http server
RUN ["yum",  "-y", "install", "httpd"]

# start httpd
CMD ["/usr/sbin/httpd", "-D", "FOREGROUND"]

FROM: ベースとするDockerイメージを指定
MAINTAINER: 作成者情報を設定
RUN: 対象のイメージにインストールされているコマンドを実行
CMD: コンテナ起動時に実行するコマンド

2. Dockerfileのビルド

docker buildコマンドでDockerfileをビルドして、dockerイメージを作成します。

$ docker build -t sample:ver01 .

Sending build context to Docker daemon  2.048kB
Step 1/4 : FROM centos:centos7
 ---> 5182e96772bf
Step 2/4 : MAINTAINER cidermitaina
 ---> Using cache
 ---> d5a98e9e0925
Step 3/4 : RUN ["yum",  "-y", "install", "httpd"]
 ---> Using cache
 ---> 47f3833db651
Step 4/4 : CMD ["/usr/sbin/httpd", "-D", "FOREGROUND"]
 ---> Using cache
 ---> 898e9185951b
Successfully built 898e9185951b
Successfully tagged sample:ver01
SECURITY WARNING: You are building a Docker image from Windows against a non-Windows Docker host. All files and directories added to build context will have '-rwxr-xr-x' permissions. It is recommended to double check and reset permissions for sensitive files and directories.

-tオプションで「イメージ名:タグ名」を指定
最後にDockerfileの場所を指定(カレントディレクトリなので . )

docker image ls

でdockerイメージが作成されているか確認できます。

docker runコマンドでビルドしたイメージを起動してみます。

$ docker run -d -p 80:80 sample:ver01
a5f0a38da63d783572df5557f51351694f8ee957598a05ea68d7c1de9962fb56

http://192.168.99.100/にアクセスするとApacheのデフォルト画面が表示されるはずです。

f:id:cidermitaina:20180905122429p:plain

実際にページを作成してみる

1. ベースイメージの作成

webシステムを構築するときOSのインストール/環境設定などベースイメージとして作成します。

Dockerfile.baseていう名前でベースイメージを作成します。

# setting base image
FROM centos:centos7

# Author
MAINTAINER cidermitaina

# install Apache http server
RUN ["yum",  "-y", "install", "httpd"]

# deploy
ONBUILD ADD web.tar /var/www/html/

# start httpd
CMD ["/usr/sbin/httpd", "-D", "FOREGROUND"]

ONBUILD: 次のビルドで実行するコマンドをイメージ内に設定する命令
ADD: web.tarファイルを/var/www/html/配下に配置

ONBUILD命令でイメージの中に開発したプログラムをデプロイする命令を指定しています。

2.web.tarファイルの作成

htmlとcssをtarでアーカイブしたものです。

こんな感じで作成していきます。

web.tar
  ├─index.html
  └─public/
        └─css/
             └─index.css

適当に作成したサンプルです。。。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./public/css/index.css" rel="stylesheet">
</head>
<body>
    <header class="header">
        <div class="header__icon-area">
            <span class="icon"></span><h1 class="name">your name</h1>
        </div>
    </header>
    <main class="main">
        <p class="main__txt">
            Hey I'm <span class="shadow shadow--pk">your name</span>
        </p>
        <p class="main__txt">
            I am <span class="shadow shadow--bl">xxxxx years old</span> born in <span class="shadow shadow--ye">xxxxx</span>.<br> 
            I'm a <span class="shadow shadow--gr">frontend engineer</span>.<br> 
            Because I work hard, I want you to support me...
        </p>
        <p class="main__txt">
            Find me on <a href="" target="_blank" class="shadow shadow--bl">Twitter</a> and <a href="" target="_blank" class="shadow shadow--pu">GitHub</a>.
        </p>
    </main>
</body>
</html>

index.css

body {
    color: #4a4a4a;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.header{
    width: 80%;
    margin: 2.5rem auto;
}
@media screen and (max-width: 640px) {
    .header {
        width: 90%;
    } 
}
.header__icon-area{
    display: flex;
    align-items: center;
}
.icon{
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: paleturquoise;
    border-radius: 5px;
}
.name{
    padding-left: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    font-size: 1rem
}

.main{
    font-size: 1.5rem;
    text-align: center;
    margin-top: 6rem;
}
@media screen and (max-width: 640px) {
    .main {
        font-size: 1.3rem;
    } 
}
.main__txt a{
    color: #4a4a4a;
    text-decoration: none;
}

.shadow--pk{
    -webkit-box-shadow: inset 0 -6px 0 rgba(255,74,110,.2);
    box-shadow: inset 0 -6px 0 rgba(255,74,110,.2);
}
.shadow--bl{
    -webkit-box-shadow: inset 0 -6px 0 rgba(36,177,209,.2);
    box-shadow: inset 0 -6px 0 rgba(36,177,209,.2);
}
.shadow--gr{
    -webkit-box-shadow: inset 0 -6px 0 rgba(35,209,153,.2);
    box-shadow: inset 0 -6px 0 rgba(35,209,153,.2);
}
.shadow--ye{
    -webkit-box-shadow: inset 0 -6px 0 rgba(255,221,87,.2);
    box-shadow: inset 0 -6px 0 rgba(255,221,87,.2);
}
.shadow--pu{
    -webkit-box-shadow: inset 0 -6px 0 rgba(184,107,255,.2);
    box-shadow: inset 0 -6px 0 rgba(184,107,255,.2);
}

3.Dockerfile.baseのビルド

web.tarをDockerfile.baseと同じ階層に置きます。

docker
  ├─web.tar
  └─Dockerfile.base

Dockerfile.baseをビルドします。

docker build -t httpd_base -f Dockerfile.base .

※Dockerfileというファイル名の場合は明示する必要はありませんが、この場合はDockerfile.baseという名前なので明示的に指定する必要があります。

docker imagesコマンドで確認してみます。

$ docker images
REPOSITORY                 TAG                 IMAGE ID            CREATED             SIZE   
httpd_base                 latest              63d226978f2e        10 seconds ago        326MB

4.Dockerfileの作成とビルド

次は作成したhttpd_baseをベースイメージとしたDockerfileをweb.tarをDockerfile.baseと同じ階層に作成します。

vi Dockerfile

docker
  ├─web.tar
  ├─Dockerfile
  └─Dockerfile.base

Dockerfile

# base image
FROM httpd_base

FROMでhttpd_baseを指定するだけに記述です。

作成したDockerfileをhttpd_webというイメージ名でビルドします。

docker build -t httpd_web .

docker imagesで確認してみると、httpd_webというイメージが作成されているはずです。

$ docker images
REPOSITORY                 TAG                 IMAGE ID            CREATED             SIZE   
httpd_web                  latest              e0f30741ca8e        5 minutes ago        326MB
httpd_base                 latest              63d226978f2e        10 seconds ago        326MB

5.httpd_webの起動

docker runコマンドでhttpd_webを起動してみます。

$ docker run -d -p 81:80 httpd_web
82925172b0479a00fc76f8ebe5232fe0bba1c35766abc05acd560f0297276622

※80番のポートはデフォルトのapacheページで使っているので81番にしています。

http://192.168.99.100:81/ にアクセスすると

f:id:cidermitaina:20180905120917p:plain

が表示されると完成です◎

参考にした本と記事です。

プログラマのためのDocker教科書インフラの基礎知識＆コードによる環境構築の自動化

作者:WINGSプロジェクト阿佐志保
発売日: 2015/11/19
メディア: Kindle版

docs.docker.com

続きの記事としてAWS ECSでさっきのページを公開してみる記事も書きたいなあ、って思ってます。。。