STaD vol.3 : Wordpress仮想環境をDockerで構築しGitで共有する

月1回開催している、主に個人のクリエイター・エンジニアによる勉強会 STaDは3回目です。

まずはメンバーの多くが行きつけとしている「尾崎」でランチ。

私はお気に入りのアジサシ定食を注文。ここのアジ刺定食は贅沢に3尾くらい盛られていてボリューム満点。味も新鮮でおすすめでございます。

美味しいご飯を食べながらメンバーが在住する小田原話や子育て話などでひとしきり盛り上がった後に鎌倉旅する仕事場に移動して勉強会開始です！

STaDこの1ヶ月の報告

メンバーにWordpressの講師をして欲しいという依頼があり、お試しではあるのものの、実際にお仕事としてすでに実施していることを具体的に報告しました。
› Wordpress講習to株式会社ANTz#1レポート

他にも実現はしなかったものの同じようなお話がちょこちょこあったので、将来STaDでもそういった依頼があった場合の可能性も見据えつつ、講師やマネジメントのスキルアップもできればと考えてます。

Docker

さて本題です。今回のテーマはDocker。
エンジニアであれば最近耳にする方も増えたのではないかと思いますが、私は今回初めて触りました。

Dockerは開発環境を1つのパッケージに閉じ込めてしまうため、個々のパソコンの環境に依存せず、同じ環境を共有できるという超便利ツールです。

おそらくバックエンドエンジニアが、大きめの開発環境などを作るときなどに利用していると思われるのですが、WordpressのDocker環境もあるようなので、今回はそちらをGitで共有する、ということをゴールとしました。

Wordpressといえば、開発環境の定番だとMAMPなどがあります。
MAMPをインストールすれば、Wordpressを走らせるために必要なPHPやMySQLなどが揃っており、手軽に仮想環境を作ることができます。
しかし、チームで同じ環境を共有するとなると、PHPのバージョンの差違が出るなどの問題が出てきます。

そのような差違を無くすためにVCCWを利用するというやり方もありますが、こちらは同じ環境を揃えるために、一日中シェルスクリプトとにらめっこ、みたいな経験をした人も多いのではないかと思います。
よく分からないエラーでつまずいたりすると、シェルスクリプトにさほど慣れていないフロントエンジニアにとってはひたすらググることとなり、ぐったりしてしまいます。

しかしDockerは先ほどお伝えしたとおりDocker内のdocker-compose.ymlという設定ファイルにメンバー同士で同じ情報を書き込んでおけば、開発環境を簡単に揃えることができます。

今回の勉強会に先駆けて、まずは全員Dockerのインストールと、Wordpress環境を作ってくるという宿題を出したのですが、そちらは概ね全員できている状態から開始しました。

ちなみに私はこちらのサイトを参考にさせていただきました。
"Dockerでワードプレスのローカル環境を構築"
https://qiita.com/kanuu/items/a75a4471e4d597df33a6

手順に沿ってDockerをインストールして起動し、その後シェルスクリプトで docker-compose.yml が入っているディレクトリに移動して以下のコマンドを実行します。

docker-compose up -d

これだけで完了です。

ちなみにdockerコマンドはdockerそのもののコマンドですが、docer-composeコマンドはこのディレクトリ（プロジェクト）内だけ実行させるコマンドになります。
また"-d"というオプションを付けることでコンテナをバックグラウンドで起動させておくことが出来るようです。

docker-compose.ymlは以下のような記述です（先ほどのサイトから引用）

version: '3'
services:
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
volumes:
   db_data:

こちらにポート番号が8000と書いてあるのでブラウザでhttp://localhost:8000/にアクセスすると、無事ワードプレスのトップ画面を表示することができました。

すごく簡単です ^ ^

ただ、ディレクトリを覗いてみると、Wordpressのデータがどこにも見当たらず、このままでは編集することができません。

そこで先ほどのdocker-compose.ymlのWordpressの設定の部分に以下の記述を付け足して、Docker内のデータと開発ディレクトリをヒモ付けます。

     volumes: 
      - ./wp-content:/var/www/html/wp-content/

また、今回はデータベースをGitで共有させるというゴールがあるので、MySQLのDBもプロジェクトファイル内に見えるようにできないかと、皆であれやこれや試した結果、docker-compose.yml の db のところを以下のように記述を変えることで、無事ディレクトリ内に DB Data を表示させることができました。

     volumes:
      - ./db_data:/var/lib/mysql

まとめると docker-compose.yml は以下のような記述になります。

version: '3'
services:
  db:
    image: mysql:5.7
    volumes:
      - ./db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
    volumes: 
      - ./wp-content:/var/www/html/wp-content/
volumes:
   db_data:

この辺りまでいったところで勉強会は時間切れ。
実際Gitで共有するところまでは試せなかったのですが、こちらのDBデータは200MBを超えますしファイル数も多いのでなるべく共有させない方がよいのではないかという意見もSlack上で出ました。

また、きちんと検証はできていないのですが、立ち上げる度にDB内に差分ファイルができてしまうらしくそれをうまく共有できるかどうかという若干すっきりしない報告も出てきました。

DBに関しては、メンバーの東崎さんのアイデアとして、以前東崎さんがnoteでも紹介していた、All-in-One WP Migration というWordpressのプラグインを利用して、DBデータを出力しておけば簡単にGitで共有することができるのではないかという意見をいただきました。
- WordPressの環境間のデータやりとりについて

また、DBのバックアップもGitで見ていくよりもむしろWPのUIできちんと管理された状態になるとのこと。

これはよさげだ！
ということで私も今進めている案件でやってみようと思ったのでしたー

STaD｜plamo｜note