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

23,359 views

Published on

GTUG-Girls #20 のハンズオン資料です

Published in: Software

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

  1. 1. DockerでWordPressサイトを 開発してみよう @mookjp
  2. 2. 自己紹介 •  @mookjp •  https://github.com/mookjp •  丸の内OLをしています
  3. 3. アジェンダ 1. Dockerとはなにか 2. 3秒でWordPressを起動する 3. 初期データを入れた状態でWordPress を起動する 4. Dockerコンテナを開発環境にしてテー マをいじってみる 5. まとめ
  4. 4. 1. Dockerとはなにか
  5. 5. 仮想的につくっている環境 仮想環境って何? •  🐳Docker🐳は物理マシン上に仮想環境をつく るためのツールです –  「コンテナ型仮想技術」といいます 自分のMac Ubuntu Apache Unicorn CentOS MySQL
  6. 6. コンテナ型仮想技術とは •  仮想化技術にも種類があります サーバマシン ハイパーバイザ (仮想環境みまもりくん) 仮想的につくっている環境 サーバマシン Apache Unicorn Linux(ホストOS) コンテナ MySQL コンテナ 仮想的につくっている環境 Linux (仮想OS) Apache Unicorn 仮想マシン Linux (仮想OS) MySQL 仮想マシン 仮想マシン (VMWareなど) コンテナ型仮想化 Docker Docker engine ホストOS
  7. 7. コンテナ型仮想技術とは •  仮想化技術にも種類があります サーバマシン ハイパーバイザ (仮想環境みまもりくん) 仮想的につくっている環境 サーバマシン Apache Unicorn Linux(ホストOS) コンテナ MySQL コンテナ 仮想的につくっている環境 Linux (仮想OS) Apache Unicorn 仮想マシン Linux (仮想OS) MySQL 仮想マシン 仮想マシン (VMWareなど) コンテナ型仮想化 Docker Docker engine ホストOS仮想OSごとに リソースは別 仮想マシンのファイルを 配布して使う (大容量になりがち) リソースはホストOS共有 (Docker engineで 調整可能) 高速 Dockerfileで同じ環境を つくれる
  8. 8. Dockerの登場人物 •  Dockerfile – コンテナで実行することや設定を書くファイ ルです •  Dockerイメージ – Dockerfileをもとにつくられた仮想環境の ファイルです •  Dockerコンテナ – Dockerイメージを「コンテナ」として動か します – 削除するとその状態は失われます
  9. 9. Dockerプラットフォーム •  コンテナ型仮想技術をより扱いやすくしたプラット フォーム Apache Unicorn コンテナ Dockerデーモン (Dockerコンテナみまもりくん) Apache Unicorn コンテナ Dockerfile コンテナで実行する コマンドや、 コンテナの設定を書く Dockerfileは Dockerイメージをつくる Ubuntu イメージ CentOS イメージ A イメージ B イメージ A イメージ ユーザーのDockerイメージを ホストし、どこからでも ダウンロードして 利用できるようにする Dockerfileでつくった Dockerイメージを 動かしたものが Dockerコンテナ Docker Hub pull / push
  10. 10. Dockerのメリット •  サーバの状態をコードで管理できる –  「どんなコマンドを実行するか」「どのファイルを サーバに配置するか」などをDockerfileに書く •  「サーバの状態」をアプリのコードと同じようにバージョン 管理システムで管理できる –  今まで手作業で構築していたものを、自動で作成で きる! •  起動が高速 –  実行したコマンドはキャッシュされる –  2度目以降の環境作成が超高速 •  環境の共有が手軽 –  Dockerfileが1つあればOK –  Docker Hub Registry
  11. 11. 2. 3秒でWordPressを起動する
  12. 12. WordPressの厳しさ
  13. 13. Dockerを使って楽にします •  問題点 – セットアップが必要 – サービスによって独自設定がある •  手作業だと引き継ぐときに混乱が。。 •  Dockerで解決できるポイント – セットアップが楽 – サーバの状態をDockerfileで管理するから誰 が起動しても同じ状態
  14. 14. Dockerを使うための準備 •  boot2docker –  Dockerを使う環境をお手軽に構築できるツール •  もしくはお好みの環境 –  自分のLinuxマシンで直接使うとか、VM用意したよ とか •  Git –  なくても大丈夫ですが、普段使っている人はよりメ リットが感じられやすいかと思います •  事前に準備できなかった場合はお知らせくださ い
  15. 15. まずは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
  16. 16. イメージをダウンロード •  これから起動するWordPressのイメージ をダウンロードします •  ちょっと時間がかかります… $ docker pull tutum/wordpress …ダウンロードします…
  17. 17. 待ち時間中に宣伝!!!! •  https://prevs.io/ •  アプリケーションを起動するためのDockerfileを用意すれば、Gitのコミッ トごとに仮想環境を作成できるサービスを開発中です –  http://master.yourapp.username.prevs.io/ –  http://ea32b41.yourapp.username.prevs.io/ •  事前登録受付中です!
  18. 18. WordPressを3秒でつくる •  boot2docker ipで表示される IPにブラウザからアクセスして みましょう! •  セットアップを進めたら、おな じみのWordPressサイトがで きちゃいます $ docker run -d -p 80:80 --name=wordpress tutum/wordpress e65f0c76a61ad3a99bd50f856f638debb4fd9761efc0beea2847b47ef101a5 76 $ boot2docker ip 192.168.59.103
  19. 19. コマンド解説 •  runはコンテナを起動するコマンド •  -dはコンテナに勝手に動いていてもらうオ プション •  -pはホストのポート:コンテナのポー トでつなげるオプション •  --name=はコンテナに任意の名前をつけ るオプション $ docker run -d -p 80:80 --name=wordpress tutum/wordpress
  20. 20. Dockerは3ステップで使える!! •  イメージをダウンロードする –  docker pull tutum/wordpress •  コンテナを起動する –  docker run -d -p 80:80 --name=wordpress tutum/wordpress •  ブラウザで見る –  http://192.168.59.103/
  21. 21. Dockerは3ステップで使える!! •  イメージをダウンロードする –  docker pull tutum/wordpress •  コンテナを起動する –  docker run -d -p 80:80 --name=wordpress tutum/wordpress •  ブラウザで見る –  http://192.168.59.103/ かんたん!!
  22. 22. Dockerfile •  DockerコンテナはDockerfileをもとに つくられます •  Dockerfileにはサーバで行う準備をすべ て書いておきます •  さきほど使ったtutum/wordpressの Dockerfileを見てみましょう! – https://registry.hub.docker.com/u/ tutum/wordpress/dockerfile/
  23. 23. tutum/wordpress のDockerfile Wordpressの ダウンロード 設定ファイルを コンテナの中に 追加 パーミッション設定 DB設定 Apache/MySQL起動
  24. 24. 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 継承 ビルド
  25. 25. Dockerfile内のコマンド紹介 •  https://registry.hub.docker.com/u/tutum/ wordpress/dockerfile/ •  ADD –  Dockerイメージ内にホストマシンからファイルを配置します •  RUN –  コマンドを実行 •  EXPOSE –  Dockerコンテナで開放するポートを指定します •  CMD –  Dockerコンテナの実行コマンドを指定します
  26. 26. 3. 初期データをいれた状態で WordPressを起動する
  27. 27. 「できてる状態」で起動したい! •  開発するなら初期設定が終わっている状 態でスタートしたい!! •  Dockerならできます!!
  28. 28. 必要なファイルをADDしておく •  WordPressはwp-config.phpとMySQLの wordpressデータベース内に設定を持って います •  これらをDockerfile内でADDしておけば、 コンテナの起動時に初期設定画面をスキップ できます •  以下のようにして「できてる状態」のコンテ ナを起動してみましょう! –  初期データを取り出す –  取り出したデータをDockerfileでADDして最初 から入った状態のDockerイメージを作成する
  29. 29. 事前準備 •  さきほど利用したtutum/wordpressを 利用します •  https://github.com/mookjp/tutum- docker-wordpress – Gitがない人は右側の「Download ZIP」か らダウンロードして解凍してください
  30. 30. 起動したコンテナ内に入る •  データを取り出すために、コンテナの中に入ってみ ましょう! •  -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
  31. 31. 初期データをつくる $ mysqldump -u root wordpress /data-share/mysql.dump.sql $ exit •  一度 http://192.168.59.103/ でセッ トアップを完了させます •  mysqldumpで今入っているデータを出力 します •  自分のディレクトリを見ると、ちゃんと mysql.dump.sqlというファイルが追加さ れています
  32. 32. 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に初期データ を挿入するよう書き換えます
  33. 33. 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に初期デー タを挿入するよう書き換えます
  34. 34. 新しいイメージをビルドする •  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 …
  35. 35. 自作イメージのコンテナを起動 •  ブラウザで http://192.168.59.103/ へアクセス •  最初からWordPressのトップページが見 れてる!! $ docker rm -f wordpress # ⼀一度度今動いているコンテナを削除 $ docker run -d -p 80:80 --name=my-wordpress my-wordpress e43f1c76a61ad3a99bd50f856f638debb4fd9761efc0beea2847b47ef101a576
  36. 36. 4. Dockerコンテナを開発環境にして テーマをいじってみる
  37. 37. Dockerfileもバージョン管理 •  wp-content(テーマファイルが含まれる ディレクトリ)、wp-config.php、 MySQLのダンプファイルとDockerfile をいっしょにGit等で管理する •  アプリケーションのバージョンとサーバ の状態が一致した状態で、いつでもチー ム内で同じ環境を起動できる! – これまでは、アプリケーションはバージョン 管理されていてもサーバの設定は自分で直さ なければいけなかった – docker runするだけで手軽
  38. 38. 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
  39. 39. やってみましょう! •  事前にmy-wordpressからwp-content ディレクトリを取り出しておきましょう $ docker run -it -v $(pwd):/data-share my-wordpress /bin/bash root@ff489d751af9:/# cp -r /app/wp-content/ /data-share/
  40. 40. 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
  41. 41. やってみましょう! •  以下の更新されるファイルをコンテナと 共有 – 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
  42. 42. テーマを変更してみる •  管理画面上から外観→テーマ→Twenty Elevenを選択します
  43. 43. テーマファイルを編集してみる •  Twenty Eleven のCSSを編集します •  http://192.168.59.103/ で変更が反 映されていることを確認 $ vim wp-content/themes/twentyeleven/style.css #site-title a を編集すると こんな感じに
  44. 44. DBのデータも一緒に書き出し •  テーマを変更したのでDBのデータも一緒 に書き出しましょう $ docker exec my-wordpress sh -c mysqldump -u root wordpress /mysql.dump.sql
  45. 45. 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
  46. 46. 5. まとめ
  47. 47. まとめ •  メリット – かんたん・べんり・はやい – サーバの状態もバージョン管理 •  Dockerfile – ADD/RUN/EXPOSE/CMD •  コマンド – pull/build/run/exec •  今日使った作業ファイルの一式はGithubにあります –  https://github.com/mookjp/tutum-docker-wordpress –  「Download ZIP」からZIPファイルでもダウンロードできます
  48. 48. これであなたも •  明日から「Docker使ってます」って言え ますね!! •  インフラエンジニアやバックエンドエン ジニアの間で盛り上がっている印象です が、フロントエンドエンジニアやデザイ ナーにも十分使うメリットあると思いま す!
  49. 49. 採用情報 •  リクルートテクノロジーズではエンジニ ア・デザイナーを募集しています! – http://recruit-tech.co.jp/recruitment/ mid-career.html •  いっしょにDockerやりましょう🐳
  50. 50. もっと知りたい方向けの参考資料 •  Docker公式ドキュメント –  https://docs.docker.com/ –  Dockerはちょいちょい新機能追加されているのでこ ちらを見るのが一番よいです –  英語のみ。インフラの知識が多少ないときついかも

×