SlideShare a Scribd company logo
DockerでWordPressサイトを
開発してみよう
@mookjp
自己紹介
•  @mookjp
•  https://github.com/mookjp
•  丸の内OLをしています
アジェンダ
1. Dockerとはなにか
2. 3秒でWordPressを起動する
3. 初期データを入れた状態でWordPress
を起動する
4. Dockerコンテナを開発環境にしてテー
マをいじってみる
5. まとめ
1. Dockerとはなにか
仮想的につくっている環境
仮想環境って何?
•  🐳Docker🐳は物理マシン上に仮想環境をつく
るためのツールです
–  「コンテナ型仮想技術」といいます
自分のMac
Ubuntu
Apache Unicorn
CentOS
MySQL
コンテナ型仮想技術とは
•  仮想化技術にも種類があります
サーバマシン
ハイパーバイザ
(仮想環境みまもりくん)
仮想的につくっている環境
サーバマシン
Apache Unicorn
Linux(ホストOS)
コンテナ
MySQL
コンテナ
仮想的につくっている環境
Linux
(仮想OS)
Apache Unicorn
仮想マシン
Linux
(仮想OS)
MySQL
仮想マシン
仮想マシン
(VMWareなど)
コンテナ型仮想化
Docker
Docker engine
ホストOS
コンテナ型仮想技術とは
•  仮想化技術にも種類があります
サーバマシン
ハイパーバイザ
(仮想環境みまもりくん)
仮想的につくっている環境
サーバマシン
Apache Unicorn
Linux(ホストOS)
コンテナ
MySQL
コンテナ
仮想的につくっている環境
Linux
(仮想OS)
Apache Unicorn
仮想マシン
Linux
(仮想OS)
MySQL
仮想マシン
仮想マシン
(VMWareなど)
コンテナ型仮想化
Docker
Docker engine
ホストOS仮想OSごとに
リソースは別
仮想マシンのファイルを
配布して使う
(大容量になりがち)
リソースはホストOS共有
(Docker engineで
調整可能)
高速
Dockerfileで同じ環境を
つくれる
Dockerの登場人物
•  Dockerfile
– コンテナで実行することや設定を書くファイ
ルです
•  Dockerイメージ
– Dockerfileをもとにつくられた仮想環境の
ファイルです
•  Dockerコンテナ
– Dockerイメージを「コンテナ」として動か
します
– 削除するとその状態は失われます
Dockerプラットフォーム
•  コンテナ型仮想技術をより扱いやすくしたプラット
フォーム
Apache Unicorn
コンテナ
Dockerデーモン
(Dockerコンテナみまもりくん)
Apache Unicorn
コンテナ
Dockerfile
コンテナで実行する
コマンドや、
コンテナの設定を書く
Dockerfileは
Dockerイメージをつくる
Ubuntu
イメージ
CentOS
イメージ
A
イメージ
B
イメージ
A
イメージ
ユーザーのDockerイメージを
ホストし、どこからでも
ダウンロードして
利用できるようにする
Dockerfileでつくった
Dockerイメージを
動かしたものが
Dockerコンテナ
Docker Hub
pull / push
Dockerのメリット
•  サーバの状態をコードで管理できる
–  「どんなコマンドを実行するか」「どのファイルを
サーバに配置するか」などをDockerfileに書く
•  「サーバの状態」をアプリのコードと同じようにバージョン
管理システムで管理できる
–  今まで手作業で構築していたものを、自動で作成で
きる!
•  起動が高速
–  実行したコマンドはキャッシュされる
–  2度目以降の環境作成が超高速
•  環境の共有が手軽
–  Dockerfileが1つあればOK
–  Docker Hub Registry
2. 3秒でWordPressを起動する
WordPressの厳しさ
Dockerを使って楽にします
•  問題点
– セットアップが必要
– サービスによって独自設定がある
•  手作業だと引き継ぐときに混乱が。。
•  Dockerで解決できるポイント
– セットアップが楽
– サーバの状態をDockerfileで管理するから誰
が起動しても同じ状態
Dockerを使うための準備
•  boot2docker
–  Dockerを使う環境をお手軽に構築できるツール
•  もしくはお好みの環境
–  自分のLinuxマシンで直接使うとか、VM用意したよ
とか
•  Git
–  なくても大丈夫ですが、普段使っている人はよりメ
リットが感じられやすいかと思います
•  事前に準備できなかった場合はお知らせくださ
い
まずはboot2dockerを起動!
•  「export…」はboot2docker up後に
ターミナルにも出るのでコピペでOK
$ boot2docker init
$ boot2docker up
$ export DOCKER_HOST=tcp://192.168.59.103:2376
$ export DOCKER_CERT_PATH=~/.boot2docker/certs/boot2docker-vm
$ export DOCKER_TLS_VERIFY=1
$ docker -v
Docker version 1.4.1, build 5bc2ff8
イメージをダウンロード
•  これから起動するWordPressのイメージ
をダウンロードします
•  ちょっと時間がかかります…
$ docker pull tutum/wordpress
…ダウンロードします…
待ち時間中に宣伝!!!!
•  https://prevs.io/
•  アプリケーションを起動するためのDockerfileを用意すれば、Gitのコミッ
トごとに仮想環境を作成できるサービスを開発中です
–  http://master.yourapp.username.prevs.io/
–  http://ea32b41.yourapp.username.prevs.io/
•  事前登録受付中です!
WordPressを3秒でつくる
•  boot2docker ipで表示される
IPにブラウザからアクセスして
みましょう!
•  セットアップを進めたら、おな
じみのWordPressサイトがで
きちゃいます
$ docker run -d -p 80:80 --name=wordpress tutum/wordpress
e65f0c76a61ad3a99bd50f856f638debb4fd9761efc0beea2847b47ef101a5
76
$ boot2docker ip
192.168.59.103
コマンド解説
•  runはコンテナを起動するコマンド
•  -dはコンテナに勝手に動いていてもらうオ
プション
•  -pはホストのポート:コンテナのポー
トでつなげるオプション
•  --name=はコンテナに任意の名前をつけ
るオプション
$ docker run -d -p 80:80 --name=wordpress tutum/wordpress
Dockerは3ステップで使える!!
•  イメージをダウンロードする
–  docker pull tutum/wordpress
•  コンテナを起動する
–  docker run -d -p 80:80 --name=wordpress
tutum/wordpress
•  ブラウザで見る
–  http://192.168.59.103/
Dockerは3ステップで使える!!
•  イメージをダウンロードする
–  docker pull tutum/wordpress
•  コンテナを起動する
–  docker run -d -p 80:80 --name=wordpress
tutum/wordpress
•  ブラウザで見る
–  http://192.168.59.103/
かんたん!!
Dockerfile
•  DockerコンテナはDockerfileをもとに
つくられます
•  Dockerfileにはサーバで行う準備をすべ
て書いておきます
•  さきほど使ったtutum/wordpressの
Dockerfileを見てみましょう!
– https://registry.hub.docker.com/u/
tutum/wordpress/dockerfile/
tutum/wordpress のDockerfile
Wordpressの
ダウンロード
設定ファイルを
コンテナの中に
追加
パーミッション設定
DB設定
Apache/MySQL起動
ApacheやMySQLはどこ?
•  FROMでこのDockerイメージの元になるDocker
イメージを指定できます
–  FROMのイメージでコマンドが実行された後で自分の
Dockerfile中のコマンドを実行します
•  この場合はtutum/lampというイメージですでに
ApacheやMySQLがインストールされています
–  https://registry.hub.docker.com/u/tutum/lamp/
dockerfile/
tutum/lamp
tutum/
wordpress tutum/
wordpress
継承 ビルド
Dockerfile内のコマンド紹介
•  https://registry.hub.docker.com/u/tutum/
wordpress/dockerfile/
•  ADD
–  Dockerイメージ内にホストマシンからファイルを配置します
•  RUN
–  コマンドを実行
•  EXPOSE
–  Dockerコンテナで開放するポートを指定します
•  CMD
–  Dockerコンテナの実行コマンドを指定します
3. 初期データをいれた状態で
WordPressを起動する
「できてる状態」で起動したい!
•  開発するなら初期設定が終わっている状
態でスタートしたい!!
•  Dockerならできます!!
必要なファイルをADDしておく
•  WordPressはwp-config.phpとMySQLの
wordpressデータベース内に設定を持って
います
•  これらをDockerfile内でADDしておけば、
コンテナの起動時に初期設定画面をスキップ
できます
•  以下のようにして「できてる状態」のコンテ
ナを起動してみましょう!
–  初期データを取り出す
–  取り出したデータをDockerfileでADDして最初
から入った状態のDockerイメージを作成する
事前準備
•  さきほど利用したtutum/wordpressを
利用します
•  https://github.com/mookjp/tutum-
docker-wordpress
– Gitがない人は右側の「Download ZIP」か
らダウンロードして解凍してください
起動したコンテナ内に入る
•  データを取り出すために、コンテナの中に入ってみ
ましょう!
•  -vオプションでホスト側パス:コンテナ側パス
を共有することができます
–  これを利用してコンテナからデータを取り出します
–  この場合はコンテナ内の/data-shareは今いるディレクト
リと共有されています
$ cd tutum-docker-wordpress
$ docker rm -f wordpress
$ docker run -d -p 80:80 -v $(pwd):/data-share --name=wordpress
tutum/wordpress
$ docker exec -it wordpress /bin/bash
root@f060d2205670:/# ls
初期データをつくる
$ mysqldump -u root wordpress  /data-share/mysql.dump.sql
$ exit
•  一度 http://192.168.59.103/ でセッ
トアップを完了させます
•  mysqldumpで今入っているデータを出力
します
•  自分のディレクトリを見ると、ちゃんと
mysql.dump.sqlというファイルが追加さ
れています
create_db.shの変更
while [[ RET -ne 0 ]]; do
sleep 5
mysql -uroot -e CREATE DATABASE $1
mysql -uroot $1  /mysql.dump.sql
RET=$?
done
•  tutum/wordpressではcreate_db.shとい
うファイルでDBのセットアップをしていま
す
•  このシェルスクリプト内でDBに初期データ
を挿入するよう書き換えます
Dockerfileの変更
ADD create_mysql_admin_user.sh /create_mysql_admin_user.sh
ADD mysql.dump.sql /mysql.dump.sql
ADD create_db.sh /create_db.sh
•  tutum/wordpressではcreate_db.shと
いうファイルでDBのセットアップをして
います
•  このシェルスクリプト内でDBに初期デー
タを挿入するよう書き換えます
新しいイメージをビルドする
•  tutum/wordpressを流用しているため、
前回ビルドした分はキャッシュされてい
る
$ docker build -t my-wordpress .
Sending build context to Docker daemon 715.3 kB
Sending build context to Docker daemon
Step 0 : FROM tutum/lamp:latest
--- b84edafb1623
Step 1 : MAINTAINER Fernando Mayo fernando@tutum.co, Feng
Honglin hfeng@tutum.co
--- Using cache
--- 3f8b39c08696
…
自作イメージのコンテナを起動
•  ブラウザで http://192.168.59.103/
へアクセス
•  最初からWordPressのトップページが見
れてる!!
$ docker rm -f wordpress # ⼀一度度今動いているコンテナを削除
$ docker run -d -p 80:80 --name=my-wordpress my-wordpress
e43f1c76a61ad3a99bd50f856f638debb4fd9761efc0beea2847b47ef101a576
4. Dockerコンテナを開発環境にして
テーマをいじってみる
Dockerfileもバージョン管理
•  wp-content(テーマファイルが含まれる
ディレクトリ)、wp-config.php、
MySQLのダンプファイルとDockerfile
をいっしょにGit等で管理する
•  アプリケーションのバージョンとサーバ
の状態が一致した状態で、いつでもチー
ム内で同じ環境を起動できる!
– これまでは、アプリケーションはバージョン
管理されていてもサーバの設定は自分で直さ
なければいけなかった
– docker runするだけで手軽
Dockerを使ったワークフロー
•  以下のようなワークフローでテーマ開発が便利になりま
す
1.  作業ディレクトリ以下を-vで共有
2.  WordPressの設定を変えたらmysqldumpでデータを
エクスポート
3.  http://192.168.59.103/ を見ながらwp-content/
themes/xxx以下のstyle.cssなどを編集
4.  作業が一段落したらコミット
1.  他のチームメンバーが内容を確認したいときは手元でdocker
build、docker runすればOK
やってみましょう!
•  事前にmy-wordpressからwp-content
ディレクトリを取り出しておきましょう
$ docker run -it -v $(pwd):/data-share my-wordpress /bin/bash
root@ff489d751af9:/# cp -r /app/wp-content/ /data-share/
Dockerfileを編集
•  wp-contentもADDするように
Dockerfileを編集します
•  できたら再度build
# Download latest version of Wordpress into /app
RUN rm -fr /app  git clone --depth=1 https://github.com/
WordPress/WordPress.git /app
ADD wp-content /app/wp-content
---
$ docker build -t my-wordpress
やってみましょう!
•  以下の更新されるファイルをコンテナと
共有
– wp-content/
– wp-config.php
– mysql.dump.sql
$ docker rm -f my-wordpress # 先ほどrunしたコンテナを削除
$ docker run -d -p 80:80 --name=my-wordpress 
-v $(pwd)/wp-content:/app/wp-content 
-v $(pwd)/wp-config.php:/app/wp-config.php
-v $(pwd)/mysql.dump.sql:/mysql.dump.sql my-wordpress
テーマを変更してみる
•  管理画面上から外観→テーマ→Twenty
Elevenを選択します
テーマファイルを編集してみる
•  Twenty Eleven のCSSを編集します
•  http://192.168.59.103/ で変更が反
映されていることを確認
$ vim wp-content/themes/twentyeleven/style.css
#site-title a を編集すると
こんな感じに
DBのデータも一緒に書き出し
•  テーマを変更したのでDBのデータも一緒
に書き出しましょう
$ docker exec my-wordpress sh -c mysqldump -u root wordpress
 /mysql.dump.sql
VCSを使っている場合はコミット
•  一区切りついたら、変更したファイルをコミットします
•  このようにすることで、チーム内でサーバ環境ごと共有
することができます
$ git status
On branch master
Your branch is ahead of 'origin/master' by 3 commits.
(use git push to publish your local commits)
Changes not staged for commit:
(use git add file... to update what will be committed)
(use git checkout -- file... to discard changes in working
directory)
modified: mysql.dump.sql
modified: wp-content/themes/twentyeleven/style.css
5. まとめ
まとめ
•  メリット
– かんたん・べんり・はやい
– サーバの状態もバージョン管理
•  Dockerfile
– ADD/RUN/EXPOSE/CMD
•  コマンド
– pull/build/run/exec
•  今日使った作業ファイルの一式はGithubにあります
–  https://github.com/mookjp/tutum-docker-wordpress
–  「Download ZIP」からZIPファイルでもダウンロードできます
これであなたも
•  明日から「Docker使ってます」って言え
ますね!!
•  インフラエンジニアやバックエンドエン
ジニアの間で盛り上がっている印象です
が、フロントエンドエンジニアやデザイ
ナーにも十分使うメリットあると思いま
す!
採用情報
•  リクルートテクノロジーズではエンジニ
ア・デザイナーを募集しています!
– http://recruit-tech.co.jp/recruitment/
mid-career.html
•  いっしょにDockerやりましょう🐳
もっと知りたい方向けの参考資料
•  Docker公式ドキュメント
–  https://docs.docker.com/
–  Dockerはちょいちょい新機能追加されているのでこ
ちらを見るのが一番よいです
–  英語のみ。インフラの知識が多少ないときついかも

More Related Content

DockerでWordPressサイトを開発してみよう