- docker-composeでWordPress開発環境を構築する手順書。
- 復元とは切り分ける。
- 環境構築の統一化を図るため。
- 複数のコンテナ(Webサーバー+PHP+データベース)を組み合わせてWordPress環境を作る。
- 高速で環境が整う。数秒でWordPressインストール画面が立ち上がる。
- 応用の効く開発環境構築の習得目的。
- macOS Monterey
- Windows 10
Ubuntu-20.04(権限問題があるので扱わない)
- 初期設定(手順0)済みならば、手順1~3を実行しテーマ開発をスタートする。
- プロジェクトは Dev/Docker/ 配下とする。
- Docker Desktopをインストール。(Docker Composeは同梱されている)
※only WSL※ Docker Desktopの設定をする。1. docker-desktop > settings > Resources > WSL INTEGRATION > Ubuntu-20.04をONにする。2. VScode > ターミナル > Ubuntu-20.04(WSL) を選択する。
- このリポジトリをCloneし、ディレクトリ名(例:wp-sample)を変更。
- 初回コンテナ起動前に確認:推奨設定に目を通し、必要に応じて設定する。
- ターミナルで作業フォルダ(wp-sample)に移動。
- コンテナを起動。
cd wp-sample
docker-compose up -d
- 実行中、directoryをShareするか質問されるので許可する。
- 拒否するとエラーになる:Error response from daemon: user declined directory sharing
- ボリューム共有が有効にならない。 Docker CE for Windows の設定でのボリューム共有の有効化 (Linux コンテナーのみ)
- Dockerコンテナ起動後、ブラウザで「localhost:8000」にアクセスする。
- WordPressのセットアップを実行する。
ここまでの操作では以下となる。
wp-sample
├── html/
├── phpmyadmin/ # volumesを追記した場合
├── wp-content/ #プラグイン操作するなら
├── my-theme/
└── docker-compose.yml
コマンド | 内容 |
---|---|
docker-compose up -d | コンテナ起動 |
docker-compose down | 起動した環境の停止・削除 |
docker-compose down --volumes | 停止・削除・データベース削除 |
docker-compose ps | コンテナの状態を確認する |
docker-compose --version | Docker Composeのバージョンチェック |
docker ps | ログインしたいコンテナ名やIDを確認する |
docker exec -it [コンテナ名] /bin/bash | dockerで立ち上げたコンテナにログインする |
テーマ、プラグイン開発を効率よく行うための設定。
- テーマやプラグインを直接扱えるように、作業フォルダー内にサブフォルダーを作る。
- volumesオプションで定義する。(データが保持される)
- マウント例:扱いやすいよう次のいずれかを設定すると良い
- html:WordPressファイル群すべて
- wp-content:wp-contentディレクトリのみ
- cocoon-child-master:子テーマディレクトリのみ
wordpress:
volumes:
- ./html:/var/www/html
- ./wp-content:/var/www/html/wp-content
- ./cocoon-child-master:/var/www/html/wp-content/themes/cocoon-child-master
- データベース操作のGUIツール:phpMyAdminを使えるようにする。
phpmyadmin:
depends_on:
- db
image: phpmyadmin/phpmyadmin
environment:
PMA_HOST: db
restart: always
ports:
- "8080:80"
- 本番サーバーにSSHで接続する。
- インストールするディレクトリに移動。
cd /web/public_html/hoge
- WordPress最新版をダウンロード。
wget http://ja.wordpress.org/latest-ja.tar.gz
- 解凍。(/wordpress/に解凍される)
tar -zxvf latest-ja.tar.gz
- 配置したいディレクトリにファイルを移動する。 例)
mv ./wordpress/* ./
- 不要なディレクトリ、ファイルを削除。 例)
rm -r latest-ja.tar.gz wordpress
- underscores.me で、空テーマを取得する。
- sassを使う場合、Advanced Optionsをクリックし、sassify!にチェックを入れる。
- my-theme という名前のテーマを作成したい場合、 my-theme と入力してGENERATEボタンをクリック(ダウンロード)する。
- ダウンロードしたものを作業フォルダー(wp-sample)に配置する。
- ymlファイルのwordpressサービスに追記、 my-theme を volumes で wp-contente/themes にマウントする。
volumes:
- ./my-theme:/var/www/html/wp-content/themes/my-theme
- Gulp公式:Quick Start
- いまさら始めるGulpでWordPressテーマ開発
- 絶対つまずかないGulp 4入門(2021年版)インストールとSassを使うまでの手順
- Gulp + Browsersyncを使ったブラウザ自動リロードでコーディング効率化を目指す
- 忘備録
投稿、固定ページ、コメント、メニュー等のダミーデータをインポートする。詳細
- テーマユニットテストデータ日本語版からwordpress-theme-test-data-ja.xmlを取得。
- 管理画面のツール→インポートの「WordPress」からインポートを実行する。
- プラグイン Yoast Duplicate Post で対応する方法もある。
docker-composeでWordPress開発環境を構築する時に遭遇したエラーの記録。
- 新規ファイル作成や編集はパーミッションエラーのため不可。
- WSL2(Ubuntu-20.04) userで起きた。
- windows userでは編集可能。
- windows user環境で開発する。
- 権限を与えればよい
chmod 707 /対象ディレクトリ
- ユーザーID(uid)やグループID(gid)を調べるには、idコマンドを使用する。
whoami
hoge
id hoge
uid=500(hoge) gid=501(hoge) 所属グループ=501(hoge)
【解説】ユーザーIDが500、グループIDが501、所属グループが501。ユーザー名と同じ名前のグループ名である。