Webアプリケーション開発者のためのDockerハンズオン

Copyright © 2021 Toranoana Inc. All Rights Reserved.
Webアプリケーション開発者のための
Docker, Docker Composeハンズオン
虎の穴ラボ　はっとり
1

2
目次
● はじめに・事前準備
● Dockerについて(5分)
● Dockerを使ってみる(15分)
○ HelloWorld
○ 仕組み説明
○ Nginx建ててみるDocker編
● Docker Composeを使ってみる(15分)
○ Nginx建ててみるDocker Compose編
○ MySQLを建ててみる
● Railsアプリケーション構築(15分)

3
はじめに
● このハンズオンはDockerを体験することを重視しているので解説は
短めです。そのため、すべてを理解することはできないかもしれませ
ん。
● どんな事ができるかを体験していただくことがこのハンズオンでは重
要だと考えています。

4
はじめに
● 途中、マシンのトラブルなどで進められなくなるかもしれません。ある
程度サポートさせていただきますが時間がかかりすぎる場合は、他
の参加者のために先に進ませて頂きます。
○ ハンズオン終了後、共有させていただく資料になぞってご自身
のペースでやっていただけると良いと思います。
● dockerコマンドやdocker-composeコマンドがご用意できていない場
合も見学に切り替えてご参加ください。

5
事前準備
下記のURLからソースをgit clone またはダウンロードしてください。
https://github.com/toranoana/docker-hands-on
git の場合下記のコマンド実行
ダウンロードの場合、
「Code」ボタンクリック後、
「Download ZIP」をクリック
ダウンロードしたファイルを解凍
$ git clone https://github.com/toranoana/docker-hands-on

6
事前準備
STEP1〜STEP7まであります。
このスライドのタイトルにSTEP○とありますので、
対応したソースを使用するようにしてください。
sourcesディレクトリ内に
使用するソースがあります。
README.md には実行するコマンドが
記載されています。

7
Dockerについて
仮想化技術の一つとしてコンテナがあります。
Dockerはコンテナの一つでありコンテナの中でも最も有名です。
Dockerの特徴
● (VMと比べ)軽量
● 構築内容がコード定義できる
(Infrastructure as Code)
● 複製や再構築が容易
仮想化技術
仮想マシン(VM)
※ホスト型、ハイパーバイ
ザー型などさらに細かい分類
があります
VMWare
VirtualBox 等
コンテナ

8
Dockerを使ってみる
HelloWorld(STEP1)
Dockerの動作確認
Hello World
$ docker -v
Docker version 20.10.2, build 2291f61
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
$ docker pull hello-world
$ docker run --rm hello-world

9
HelloWorld(STEP1)
Hello Worldの結果
Hello from Docker!
This message shows that your installation appears to be working correctly.
To generate this message, Docker took the following steps:
1. The Docker client contacted the Docker daemon.
2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
(amd64)
3. The Docker daemon created a new container from that image which runs the
executable that produces the output you are currently reading.
4. The Docker daemon streamed that output to the Docker client, which sent it
to your terminal.
To try something more ambitious, you can run an Ubuntu container with:
$ docker run -it ubuntu bash
Share images, automate workflows, and more with a free Docker ID:
https://hub.docker.com/
For more examples and ideas, visit:
https://docs.docker.com/get-started/

10
仕組み説明
解説
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
0e03bdcc26d7: Pull complete
Digest: sha256:31b9c7d48790f0d8c50ab433d9c3b7e17666d6993084c002c2ff1ca09b96391d
Status: Downloaded newer image for hello-world:latest
Docker Hub
(https://hub.docker.com/)
hello-worldイメージ
(https://hub.docker.com/_/hello-world)
hello-worldイメージ
ダウンロード(pull)
実行(run)

11
仕組み説明
pullでDocker Hubから「Dockerイメージ」をPCにダウンロード
run で「Dockerイメージ」を元に「Dockerコンテナ」を作成し実行
$ docker pull hello-world
$ docker run --rm hello-world

12
HelloWorld(STEP1)
確認ができたらイメージを削除します。
# 削除
$ docker rmi hello-world

13
Nginx建ててみる(STEP2)
Hello worldだけではつまらないので・・・
Nginxを建ててみる
※81番ポートを既に使っている場合は、81:80の部分を82:80(82番ポートを使用する場合)の様に変えて下さい
Webブラウザで http://localhost:81 に
アクセスしてみて下さい
(ポートを変更した場合は
それに合わせて変えて下さい)
$ docker pull nginx
$ docker run --name hello-nginx -d -p 81:80 nginx

14
もしこのようなエラーが出る場合はポート(81)を変更してやり直します。
失敗後やり直す場合は先にコンテナを消してから起動します。
$ docker rm hello-nginx -f
$ docker run --name hello-nginx -d -p 82:80 nginx
docker: Error response from daemon: driver failed programming external connectivity on
endpoint hello-nginx (**************): Bind for 0.0.0.0:81 failed: port is already allocated.

15
確認ができたらコンテナを停止・削除します。
# 停止
$ docker stop hello-nginx
# 削除
$ docker rm hello-nginx

16
なぜこんなに簡単にnginxが立てられたか
⇒Nginxをセットアップ済みのイメージをNginx公式がDocker Hubに用意してくれ
ているから
Docker Hubには様々なOS、ミドルウェア、データベース、アプリケーションが用
意されていて、コマンド1つだけでそれらをすぐに使うことが出来ます。
確かに簡単ですがこのままだと使い物になりません。

17
自分で作ったHTMLを表示してみます。
下記のようにファイルを作ります。
html/index.html
Dockerfile
ダウンロードしたソースのこちらを使用します。
https://github.com/toranoana/docker-hands-on/tree/main/step003/sources

18
Dockerfileの内容
先程動かしたnginxのイメージにファイルをコピーしています。
FROM nginx
COPY ./html /usr/share/nginx/html

19
html/index.htmlの内容
※好きな内容で構いません。
<html>
<head>
<meta charset="utf-8" />
</head>
<body>こんにちは！</body>
</html>

20
Dockerfileの内容でコンテナイメージを作成します。
Dockerfileがあるディレクトリで下記を実行します。
イメージが作成できたらそのイメージを実行します。
Webブラウザで http://localhost:81 にアクセスして用意したページが表示されれ
ば成功です
※こちらもポートを変えた場合はそれに合わせて下さい。
$ docker build -t my-nginx .
$ docker run --name hello-nginx -d -p 81:80 my-nginx

21
Dockerfileを使うことにより、既存のイメージに対して自分でカスタマイズしたイ
メージを作ることができます。
FROMでDocker Hubにある既存のイメージを指定し、COPY命令によりイメージ
に対してファイルを追加しています。
今回はCOPYだけですが、他にも様々な命令を加えることができます。
FROM nginx
COPY ./html /usr/share/nginx/html

22
# 停止
$ docker stop hello-nginx
# 削除
$ docker rm hello-nginx

23
Docker Composeを使ってみる (STEP4)
Docker ComposeとはDockerコンテナを
扱いやすくするツールです。
特に複数コンテナを扱う場合は便利です。
開発においては直接dockerコマンドで操作するよりdocker-composeコ
マンドを使用したほうが楽になります。
Docker Composeの動作確認
$ docker-compose -v
docker-compose version 1.27.4, build 40524192

24
Docker Composeを使ってみる
下記のようにファイルを配置・作成します。
html/index.html 、Dockerfile は DockerでNginxを建てたときと同じものです。今
回はdocker-compose.ymlが追加されています。
ダウンロードしたソースのこちらを使用します。
https://github.com/toranoana/docker-hands-on/tree/main/step005-1/sources

25
docker-compose.ymlの内容
インデントはタブではなく空白 2つです。
※YAMLはインデントにタブを使えない仕様になっています
※ここでもポートに気をつけて下さい。
version: '3'
services:
hello-nginx:
build: .
ports:
- '81:80'

26
docker-composeでコンテナイメージを作ります。
docker-compose.ymlがあるディレクトリで下記を実行します。
Webブラウザで http://localhost:81 にアクセスして自分の作ったHTMLが表示さ
れれば成功です
※こちらもポートを変えた場合はそちらに合わせて下さい。
$ docker-compose build
$ docker-compose up -d

27
dockerコマンド使用時との比較
dockerコマンド使用時にコマンドラインオプションで
指定した一部の設定をを
docker-composeコマンドでは
yamlファイルに記述出来るように
なっています。
version: '3'
services:
hello-nginx:
build: .
ports:
- '81:80'
$ docker build -t my-nginx .
$ docker run --name hello-nginx -d -p 81:80 my-nginx

28
確認ができたら次に行く前にコンテナを停止させて下さい。
$ docker-compose stop

29
html/index.htmlの内容を変えて確認したい場合毎回コンテナ内にコピーしなくて
はなりません。開発時においてそれはかなり面倒です。
そんな時はVolumeを使うと便利です。
docker-compose.ymlに赤字部分を追加して下さい
version: '3'
services:
hello-nginx:
build: .
ports:
- '81:80'
volumes:
- ./html:/usr/share/nginx/html

30
もう一度コンテナを起動します。
Webブラウザで http://localhost:81 にアクセスして表示内容確認後、
html/index.htmlの内容を変更してブラウザをリロードしてみて下さい。
すぐに変更内容が反映されているはずです。
※Volumeはdockerコマンドでも使用できますがdocker-composeで管理したほ
うが楽にできます。

31
# 停止
# 削除
$ docker-compose down

32
MySQL建ててみる(STEP6)
次は少しファイルの記述量が多いのでスライドに表示するのは省略します。
git clone あるいはダウンロードしたファイルを確認してください。
https://github.com/toranoana/docker-hands-on/blob/main/step006/sources/d
ocker-compose.yml

33
今回はMySQL 5.7を使用しています。
コンテナイメージにはいくつかのバージョンを用意してくれているものもあり、イ
メージ名の後に:(コロン)を付けてタグ名を指定することで、特定のバージョンを使
用することができます。
タグ名を省略した場合はlatestという名前のタグが使用されています。
※前のSTEPで実行しているnginxは本当はnginx:latestを使っていました。
使用できるタグはDocker Hubのページに載せられています
MySQLの公式イメージのページ
https://hub.docker.com/_/mysql

34
コンテナを起動します。
Webブラウザで http://localhost:1080 にアクセスしてします。
phpMyAdminによりWebブラウザからMySQLの操作ができます。
$ docker-compose pull

35
確認ができたら次に行く前にコンテナを停止・削除します。
# 停止
# 削除

36
Railsアプリケーション構築(STEP7)
次もファイルの記述量が多いのでスライドに表示するのは省略します。
git clone あるいはダウンロードしたファイルを確認してください。
https://github.com/toranoana/docker-hands-on/blob/main/step007/sources/d
ocker-compose.yml
https://github.com/toranoana/docker-hands-on/blob/main/step007/sources/
Dockerfile

37
docker-composeでコンテナイメージを作ります。
docker-compose.ymlがあるディレクトリで下記を実行します。
下記のコマンドでコンテナ内に入ります
$ docker-compose pull
$ docker-compose exec my-app bash

38
下記のコマンドでRailsアプリケーションを作成します。
作成が終わったらテキストエディタで config/database.yml を開き、データベース
接続設定を変更します。
変更前
変更後
$ rails new . -d mysql -S -J
host: localhost
host: my-database

39
docker-composeで管理しているコンテナ同士は
docker-compose.ymlで定義した名前のサービス名をホストとして接続できます。
先程、localhostをmy-databaseに変えたのはアプリケーションの外に作った別のコンテナの
DBへ接続するためです。
version: '3'
services:
my-app:
# ...
my-database:
# ...

40
下記のコマンドでRailsアプリケーションを起動します。
起動後 http://localhost:3000 を開きます。
※停止させる場合はCtrl + C
rails db:create
rails db:migrate
rails server --binding=0.0.0.0

41
データベースに接続する処理を追加するため下記を実行します。
起動後 http://localhost:3000/users を開きます。
※停止させる場合はCtrl + C
rails generate scaffold user name:string
rails db:migrate
rails server --binding=0.0.0.0

42
# コンテナから出る
$ exit
# 停止
# 削除

youtube宣伝
虎の穴ラボでは
採用説明や勉強会などのオンラインイベントを
youtubeから配信していきます。
よろしければ「いいね！」やチャンネル登録を
お願い致します。
https://www.youtube.com/channel/UC2LQCTWBg7da5JHxQ
dGNGyw
43

youtube宣伝
虎の穴ラボのエンジニアが業務や技術・働き方についてざっくばらんにお届けする配信番組です。
感想やフィードバックをTwitterのハッシュタグ「#ToraLab_fm」でお待ちしています！
Youtubeチャンネルと下記のPodcastで配信しています。
https://anchor.fm/toranoanalab
44

質問受付
45

Webアプリケーション開発者のためのDockerハンズオン

More Related Content

What's hot (20)

Similar to Webアプリケーション開発者のためのDockerハンズオン (20)

More from 虎の穴開発室 (20)