携わるタスク

macを使って、WordPressの開発環境をあっという間に構築する

記事を書いた理由

今日からWordPressサイトを作ったり、更新したりする場合にあたふたしないため、ローカル環境の構築方法を記載します。

環境

Mac macOSHighSierra 10.13.4
Docker version 18.06.0-ce, build 0ffa825

Dockerのインストールを行ってください
[Docker for Mac]
https://www.docker.com/products/docker-desktop

手順

　1.ファイルをダウンロード

gitリポジトリからファイルをダウンロードする
https://github.com/abenosite/wp-docker-compose

　2.ファイルを解凍

ディレクトリ

.
├── docker-compose.yml
└── readme.md

　3.ターミナルを使用

docker-compose.ymlファイルがある場所に移動してからコマンドを打つ

ターミナル

docker-compose up -d

コマンド後に"db_data"、"wp"ファイルが作成される

ディレクトリ

.
├── docker-compose.yml
├── db_data
│   ├── auto.cnf
│  
└── wp
    ├── index.php

　4.ブラウザで確認

ブラウザで "http://localhost:8080" を入力
ワードプレスの設定画面になる

　おわり

WordPressの環境構築が簡単にできました。
データをダウンロードして、docker-compose up -dするだけです。
作業が終わったらdocker-compose downで終了します。

その他の参考サイト

その他の参考サイトのdocker-compose.ymlを見比べてば、案件などにあった構成が作れると思います。

参考サイト：[docker-composeで作るWordpress環境]
https://qiita.com/sayama0402/items/0f77861e059b38ea547a

　参考1

githubリポジトリ
https://github.com/fand/wp-theme-template

ターミナルで git clone https://github.com/fand/wp-theme-template && cd wp-theme-template を実行
ターミナルで docker-compose up を実行
手元のマシンで WordPress サーバーが起動します
ブラウザで http://localhost:8080 にアクセス
themes/ 以下にテーマを作成
管理画面でテーマを設定

　参考2

[Docker Composeを使ってWordPress環境を作る]
https://inamuu.com/docker-compose%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6wordpress%E7%92%B0%E5%A2%83%E3%82%92%E4%BD%9C%E3%82%8B/

Docker Composeとは
Docker ComposeでWordPress環境を作る
ディレクトリを作成する
docker-compose.ymlを作成する。
コンテナを起動する
コンテナの起動状況を確認する
サイトにアクセスする
まとめ

　参考3

[Dockerで作るWordPressテーマローカル開発環境]
https://qiita.com/KoichiSugimoto/items/fc993e2d52dbed39fc79

動機
背景
Dockerコンテナ構成
Dockerコンテナの操作
Dockerの立ち上げ
走っているDockerコンテナを確認
Dockerコンテナを停止する
Dockerコンテナ上でコマンドを実行
Dockerコンテナにコマンドを流し込み
Dockerのログを見る
ローカルDBのバックアップを取れるように
複数サービスを実行するときはportを変えて対応しています（暫定）

　参考4

公式のdocker-compose.ymlが記載されていたり、トラブルの対処法が載っています。
[docker-composeでwordpress環境をサクッと構築する]
https://qiita.com/mom0tomo/items/7e611ac829863d4c5c82
（2017年04月08日に更新）

公式のdocker-compose.yml

version: '2'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: wordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   wordpress:
     image: wordpress:latest
     depends_on:
       - db
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_PASSWORD: wordpress
volumes:
    db_data:

　参考5

[docker-compose を使って WordPress テーマ開発環境を構築しよう]
https://tech.recruit-mp.co.jp/infrastructure/post-11266/

docker-compose.yml

version: "2"
services:
    wordpress:
        image: wordpress:latest
        ports:
            - "9000:80"
        depends_on:
            - db
        environment:
            WORDPRESS_DB_HOST: "db:3306"
        env_file: .env
        volumes:
            - ./themes/bones:/var/www/html/wp-content/themes/bones
    db:
        image: mysql:latest
        env_file: .env
        volumes:
            - db-data:/var/lib/mysql

# databaseのように永続的なストレージが欲しい場合に必要な設定
volumes:
    db-data:
        driver: local

ディレクトリ

.
├ docker-compose.yml
└ themes/
　　　　└ bones/

　参考6

[Docker Compose を使ってWordPress のテーマ開発環境をつくった]
https://qiita.com/shimisunet/items/1406e33e1eeb36665f2c

docker-compose.yml

version: '2'

services:
   db:
     image: mysql:latest
     volumes:
       - db_data:/var/lib/mysql
     environment:
       MYSQL_DATABASE: wordpress(任意のDB名)
       MYSQL_USER: wp_user(任意のユーザ名)
       MYSQL_PASSWORD: password(任意のパスワード)
       MYSQL_RANDOM_ROOT_PASSWORD: "yes"
   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8080:80"
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wp_user(上記で書いたDBのユーザ名)
       WORDPRESS_DB_PASSWORD: password(上記で書いたDBのパスワード)
volumes:
    db_data:

テーマ開発用ディレクトリ

(任意のディレクトリ)/themes/hoge

　参考7

[docker-composeでWordPress + MariaDB + nginx環境を構築する]
https://anopara.net/2017/12/20/docker-compose%E3%81%A7wordpress-mariadb-nginx%E7%92%B0%E5%A2%83%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B/

docker-compose.yml

version: '2.0'
 
services:
    nginx:
        image: nginx
        ports:
            - '8080:80'
        volumes:
            - ./nginx:/etc/nginx/conf.d
            - ./logs/nginx:/var/log/nginx
            - ./wordpress:/var/www/html
        links:
            - wordpress
        restart: always
    mysql:
        image: mariadb 
        ports:
            - '3306:3306'
        volumes:
            - ./db-data:/var/lib/mysql 
        environment:
            - MYSQL_ROOT_PASSWORD=pass
        restart: always
    wordpress:
        image: wordpress:4.9-php7.1-fpm
        ports:
            - '9000:9000'
        volumes:
            - ./wordpress:/var/www/html
        environment:
            WORDPRESS_DB_NAME: wpdb
            WORDPRESS_TABLE_PREFIX: wp_
            WORDPRESS_DB_HOST: mysql
            WORDPRESS_DB_PASSWORD: pass
        links:
            - mysql
        depends_on:
            - mysql
        restart: always

　参考8

[WordPressのテーマをdocker-composeを使ってお手軽に開発しよう]
https://php-java.com/archives/2015

gitリポジトリ
https://github.com/onsentamago/WordPressLocalThemeDevelopment

docker-compose.yml

| version: '3.1' |
|:--|
|  |
| services: |
|  |
|   wordpress: |
|     image: wordpress |
|     restart: always |
|     ports: |
|       - 8080:80 |
|     links: |
|       - mysql |
|     environment: |
|       WORDPRESS_DB_HOST: mysql |
|       WORDPRESS_DB_USER: root |
|       WORDPRESS_DB_PASSWORD: examplepassword |
|     volumes: |
|       - ./theme:/var/www/html/wp-content/themes/new_theme |
|  |
|   mysql: |
|     image: mysql:5.7 |
|     restart: always |
|     environment: |
|       MYSQL_ROOT_PASSWORD: examplepassword |
|       MYSQL_DATABASE: wordpress |

　参考9

[DockerComposeでWordPressを構築しながら理解しよう]
https://loner.jp/dockercompose-wordpress-construction

1 DockerComposeとは
2 DockerComposeでWordpressを構築してみる
3 docker-compose.ymlファイルの解説と修正

wordpressのデータ永続化も行っている

　参考10

[Dockerを使用してWordPress開発環境を構築する]
http://naremo.jp/2016/11/docker-wordpress/

事前準備
Docker Composeを使って開発環境を起動する
Tips
ホストOS側で編集したテーマファイルをWordPressコンテナに反映させたい
WordPressコンテナに入る
トラブルシューティング

　参考11

[DOCKER-COMPOSEでWORDPRESSをローカルに最速リストア(15分,MAC)]
http://saitotoshiki.com/blog/2018/02/docker-compose_wordpress_mac

データのバックアップ
Docker for Macのインストール
docker-compose.ymlの作成
ローカル環境の立ち上げ
メディアファイル・テーマ・プラグインなどのリストア
ドメイン名の書き換え
http://localhost:8888/Search-Replace-DB-master/にアクセス
確認・その他

　参考12

[最近のWordPressのテーマのローカル開発環境 on Docker]
https://higelog.brassworks.jp/2515

GitHubからakahigeg/wordpress-theme-dev-localをclone
docker-compose up -d
http://locahost:8888/ にアクセス

tree

.
├── Dockerfile
├── README.md
├── devenv
│   ├── languages
│   │   ├── admin-ja.mo
│   │   ├── admin-ja.po
│   │   ├── admin-network-ja.mo
│   │   ├── admin-network-ja.po
│   │   ├── continents-cities-ja.mo
│   │   ├── continents-cities-ja.po
│   │   ├── ja.mo
│   │   ├── ja.po
│   │   ├── plugins
│   │   │   ├── akismet-ja.mo
│   │   │   ├── akismet-ja.po
│   │   │   ├── custom-post-type-permalinks-ja.mo
│   │   │   ├── custom-post-type-permalinks-ja.po
│   │   │   ├── debug-bar-ja.mo
│   │   │   ├── debug-bar-ja.po
│   │   │   ├── theme-check-ja.mo
│   │   │   ├── theme-check-ja.po
│   │   │   ├── tinymce-advanced-ja.mo
│   │   │   ├── tinymce-advanced-ja.po
│   │   │   ├── user-role-editor-ja.mo
│   │   │   ├── user-role-editor-ja.po
│   │   │   ├── wordpress-importer-ja.mo
│   │   │   ├── wordpress-importer-ja.po
│   │   │   ├── wp-pagenavi-ja.mo
│   │   │   └── wp-pagenavi-ja.po
│   │   └── themes
│   │       ├── twentyfifteen-ja.mo
│   │       ├── twentyfifteen-ja.po
│   │       ├── twentyseventeen-ja.mo
│   │       ├── twentyseventeen-ja.po
│   │       ├── twentysixteen-ja.mo
│   │       └── twentysixteen-ja.po
│   ├── php.ini
│   ├── plugins
│   │   ├── akismet
│   │   │   ├── LICENSE.txt
│   │   │   ├── _inc
│   │   │   │   ├── akismet.css
│   │   │   │   ├── akismet.js
│   │   │   │   ├── form.js
│   │   │   │   └── img
│   │   │   │       └── logo-full-2x.png
│   │   │   ├── akismet.php
│   │   │   ├── class.akismet-admin.php
│   │   │   ├── class.akismet-cli.php
│   │   │   ├── class.akismet-rest-api.php
│   │   │   ├── class.akismet-widget.php
│   │   │   ├── class.akismet.php
│   │   │   ├── index.php
│   │   │   ├── readme.txt
│   │   │   ├── views
│   │   │   │   ├── config.php
│   │   │   │   ├── get.php
│   │   │   │   ├── notice.php
│   │   │   │   ├── start.php
│   │   │   │   └── stats.php
│   │   │   └── wrapper.php
│   │   ├── debug-bar
│   │   │   ├── css
│   │   │   │   ├── debug-bar.css
│   │   │   │   └── debug-bar.dev.css
│   │   │   ├── debug-bar.php
│   │   │   ├── js
│   │   │   │   ├── debug-bar-js.dev.js
│   │   │   │   ├── debug-bar-js.js
│   │   │   │   ├── debug-bar.dev.js
│   │   │   │   ├── debug-bar.js
│   │   │   │   ├── ui-dockable.dev.js
│   │   │   │   └── ui-dockable.js
│   │   │   ├── panels
│   │   │   │   ├── class-debug-bar-deprecated.php
│   │   │   │   ├── class-debug-bar-js.php
│   │   │   │   ├── class-debug-bar-object-cache.php
│   │   │   │   ├── class-debug-bar-panel.php
│   │   │   │   ├── class-debug-bar-php.php
│   │   │   │   ├── class-debug-bar-queries.php
│   │   │   │   ├── class-debug-bar-request.php
│   │   │   │   └── class-debug-bar-wp-query.php
│   │   │   └── readme.txt
│   │   ├── debug-bar-actions-and-filters-addon
│   │   │   ├── class-debug-bar-action-and-filters-addon.php
│   │   │   ├── css
│   │   │   │   └── debug-bar-actions-filters.css
│   │   │   ├── debug-bar-action-and-filters-addon.php
│   │   │   ├── index.php
│   │   │   ├── languages
│   │   │   │   └── debug-bar-actions-and-filters-addon.pot
│   │   │   ├── php5.3-closure-test.php
│   │   │   └── readme.txt
│   │   ├── hello.php
│   │   ├── index.php
│   │   └── theme-check
│   │       ├── assets
│   │       │   ├── gray-grad.png
│   │       │   └── style.css
│   │       ├── changelog.txt
│   │       ├── checkbase.php
│   │       ├── checks
│   │       │   ├── admin_menu.php
│   │       │   ├── adminbar.php
│   │       │   ├── badthings.php
│   │       │   ├── basic.php
│   │       │   ├── cdn.php
│   │       │   ├── comment_reply.php
│   │       │   ├── commpage.php
│   │       │   ├── constants.php
│   │       │   ├── content-width.php
│   │       │   ├── customizer.php
│   │       │   ├── customs.php
│   │       │   ├── dep_recommend.php
│   │       │   ├── deprecated.php
│   │       │   ├── deregister.php
│   │       │   ├── directories.php
│   │       │   ├── editorstyle.php
│   │       │   ├── favicon.php
│   │       │   ├── filenames.php
│   │       │   ├── generated.php
│   │       │   ├── gravatar.php
│   │       │   ├── i18n.php
│   │       │   ├── iframes.php
│   │       │   ├── include.php
│   │       │   ├── included-plugins.php
│   │       │   ├── lineendings.php
│   │       │   ├── links.php
│   │       │   ├── malware.php
│   │       │   ├── more_deprecated.php
│   │       │   ├── navmenu.php
│   │       │   ├── nonprintable.php
│   │       │   ├── phpshort.php
│   │       │   ├── plugin-territory.php
│   │       │   ├── post-formats.php
│   │       │   ├── postsnav.php
│   │       │   ├── postthumb.php
│   │       │   ├── screenshot.php
│   │       │   ├── searchform.php
│   │       │   ├── style_needed.php
│   │       │   ├── style_suggested.php
│   │       │   ├── style_tags.php
│   │       │   ├── tags.php
│   │       │   ├── textdomain.php
│   │       │   ├── time_date.php
│   │       │   ├── title.php
│   │       │   ├── uri.php
│   │       │   ├── widgets.php
│   │       │   └── worms.php
│   │       ├── main.php
│   │       ├── readme.txt
│   │       └── theme-check.php
│   └── wp-config.php
├── docker-compose.yml
└── src
    ├── footer.php
    ├── header.php
    ├── index.php
    └── style.css

　参考13

[個人用のwordpressをdockerで動かす - まがりの日記]
http://oomatomo.hatenablog.com/entry/docker-wordpress

wordpressのコードを、ダウンロードして git init してリポジトリ管理にする
DBは、RDSを使う
ホスト側でnginxを動かす

　参考14

[DockerでWordPressテーマ開発と運用をはじめた]
http://blog.itoudium.tokyo/post/wp_new/

フライング・スター・サボテン
http://plants.snkz.org/

　参考15

[Dockerを使ったローカルでの開発から本番環境へのデプロイまで]
https://www.slideshare.net/ryonakamaru/fromdevelopmentenvironmentstoproductiondeploymentsawsreinvent2015jp

他の参考

###最速でWordPress環境を構築してみる
・ローカルでウェブサーバ＋PHP＋MySQLを動かす
・フォルダを作ったらバーチャルホストで認識させる
・Hostsファイルを書き換えなくてもアクセスできるようにする
・WordPressのダウンロード、初期設定、プラグインインストールをする

仕組み
・Apache, PHP, MySQL (Homebrew)
・ApacheのVirtualDocumentRoot
・DnsmasqでDNSのワイルドカード設定
・DNS参照先の変更
・wp-cli