ナレッジ

【簡単】DockerでWordPressローカル開発環境を作成する方法(Mac用)

Dockerを使ってWordPressのローカル開発環境を作った時の備忘録(環境はMac)

初めてのDockerで右も左も分からず、人の記事を参考にするも1発でうまくいかず苦戦したので、初めてでも分かりやすく簡単にできるようにまとめました。

※とりあえず簡単に環境構築をすることを目的としているため、Dockerの仕組みや詳細な説明は端折っている箇所もあります。Dockerについて知識を深めたい場合は、公式ドキュメントなどとあわせて読むことをオススメします。

Dokerのインストール

公式サイトにアクセスし、右側にあるダウンロードボタンをクリックします。

下記のようなログイン画面が出るので、Sign Upリンクからユーザー登録画面に行きます(既にユーザー登録済みの方は、そのままログインをしてください)

・ID
・パスワード
・メールアドレス
を入力し、利用規約とプライバシーポリシーの同意にチェックして登録をします。
3つめのチェックはメールで情報がくるオプションなので、不要ならチェックしなくてOK(私はチェックしていない)

続いて、
・名前
・会社
・国
・経験
を入力し登録します。

登録するとこんなメールが届くので、中央の青いボタンをクリックして登録を完了させます。

ログイン後の画面が開き、Dockerのインストールボタンが出現するので、ここからダウンロードし、アプリをインストールします。

あとは手順に沿ってアプリをアプリケーションに移動させ、Docker.appを起動します。

アプリを起動するとこんな感じで、画面の上部に出てくるので、先ほど登録したアカウントでログインします。

ターミナルを起動してインストールの確認のため、コンテナ情報出力コマンドを入力します。

$ docker ps
CONTAINER  ID  IMAGE  COMMAND  CREATED  STATUS  PORTS  NAMES

上記のように、項目名が出ればOK。
これでDockerのインストールは完了です。

Docker Composeによるコンテナの作成

Docker Composeという、コマンドを叩かなくてもコンテナを作成し起動までしてくれる、超便利なやつを使用します。

docker-compose.ymlの作成

好きなところに適当なディレクトリを作成し、その中にdocker-compose.ymlという名前でファイルを作成します。今回私は、docker > wordpress-study の中に作りましたので、以下、ご自身の環境に適宜読み替えてください。

▼docker-compose.yml

version: '3.3'
 
services:
   wordpress:
     image: wordpress:latest
     depends_on:
       - db
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
       WORDPRESS_DB_NAME: wordpress
     volumes:
       - ./wordpress:/var/www/html
 
   db:
     image: mysql:5.7.27
     ports:
      - "4306:3306"
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: root
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress
       
volumes:
    db_data:

コピペしてそのまま使えますが、必要に応じて以下をご自身の環境に合わせて変更してください。

▼17行目
バインド・マウントを使用して、Dockerの中のディレクトリとMacOSの中のディレクトリを共有させます。これをやることで、ターミナルを使わずに、エディタからWordPressのファイルを編集できるようになります。

Mac側のディレクトリ]:[Dockerのコンテナ側のディレクトリ]と指定します。

「wordpress」となっている部分は、お好きなものにしてください。実行すると、以下のようにディレクトリができて、その中にWordPressファイル一式が格納されます。

▼20行目
mysql:5.7.27とインストールするMySQLのバージョンを指定します。指定しないと最新版がインストールされるのですが、最新版のバージョン8でやったらWordPressがうまく動かなくて失敗したので、5.7の最新版で指定したほうがいいです。

▼21〜22行目
Sequel ProでDBに接続できるように、ポートの設定をしています。(Sequel Proなどで接続しないなら不要)ポート番号は4306にしていますが、空いているものならなんでもよいです。

コンテナの起動

ターミナルから先ほど作成した、docker-compose.ymlが格納されているディレクトリに移動し、コンテナを起動させます。

$ cd docker/wordpress-study/
$ docker-compose up -d

コンテナが生成されていることを確認します。

$ docker-compose ps
         Name                   Command           State           Ports         
--------------------------------------------------------------------------------
wordpress-study_db_1     docker-entrypoint.sh     Up      0.0.0.0:4306->3306/tcp
                         mysqld                           , 33060/tcp           
wordpress-               docker-entrypoint.sh     Up      0.0.0.0:8000->80/tcp  
study_wordpress_1        apach ... 

WordPressの初期設定

ブラウザから、http://localhost:8080/にアクセスすると、下記のWordPressの初期設定画面がでますので、画面にしたがって必要事項を入力し設定します。

設定すると、こちらの画面が表示されますので、これでローカル環境が構築できました!

指定したディレクトリにWordPressのファイルがあることも確認できます。

$ cd wordpress/
$ ls -l
total 368
-rw-r--r--@   1 ayaka  staff    420 12  1  2017 index.php
-rw-r--r--@   1 ayaka  staff  19935  1  2  2019 license.txt
-rw-r--r--@   1 ayaka  staff   7447  4  9  2019 readme.html
-rw-r--r--@   1 ayaka  staff   6919  1 12  2019 wp-activate.php
drwxr-xr-x@  93 ayaka  staff   2976 10 15 05:37 wp-admin
-rw-r--r--@   1 ayaka  staff    369 12  1  2017 wp-blog-header.php
-rw-r--r--@   1 ayaka  staff   2283  1 21  2019 wp-comments-post.php
-rw-r--r--@   1 ayaka  staff   2808 10 25 19:39 wp-config-sample.php
-rw-r--r--@   1 ayaka  staff   3184 10 25 19:39 wp-config.php
drwxr-xr-x@   8 ayaka  staff    256 10 25 21:59 wp-content
-rw-r--r--@   1 ayaka  staff   3847  1  9  2019 wp-cron.php
drwxr-xr-x@ 204 ayaka  staff   6528 10 15 05:37 wp-includes
-rw-r--r--@   1 ayaka  staff   2502  1 16  2019 wp-links-opml.php
-rw-r--r--@   1 ayaka  staff   3306 12  1  2017 wp-load.php
-rw-r--r--@   1 ayaka  staff  39551  6 10 22:34 wp-login.php
-rw-r--r--@   1 ayaka  staff   8403 12  1  2017 wp-mail.php
-rw-r--r--@   1 ayaka  staff  18962  3 29  2019 wp-settings.php
-rw-r--r--@   1 ayaka  staff  31085  1 17  2019 wp-signup.php
-rw-r--r--@   1 ayaka  staff   4764 12  1  2017 wp-trackback.php
-rw-r--r--@   1 ayaka  staff   3068  8 17  2018 xmlrpc.php

[おまけ]Sequel ProでMySQLに接続する

Sequel Proを起動し、接続情報を入力して接続します。

ホスト127.0.0.1
ユーザ名wordpress(YAMLファイルに記載した値)
パスワードwordpress(YAMLファイルに記載した値)
データベースwordpress(空欄でも可)
ポート4306(YAMLファイルに記載した値)

接続され、テーブルの中が見られるようになります。

コンテナの停止

コンテナを止めるときは、停止コマンド。再開するときはリスタートコマンドを実行します。

$ docker-compose stop
$ docker-compose restart

もし、コンテナを削除する場合は削除コマンドを実行します。

$ docker-compose down --volumes

※上記でコンテナを削除しても、バインド・マウントしたディレクトリのデータはローカルに残るので、不要ならこちらも合わせて削除します。

以上、DockerWordPressのローカル開発環境の構築でした。

ABOUT ME
アヤカ
時間と場所に縛られない生き方をしたくて、OLからエンジニア、Webディレクターを経てフリーランスになった人。仕事はwebサイト制作。デザイン、コーディング、WordPressカスタマイズをやってます。