このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

Docker超入門：ホストと同期するWordPress開発環境を作ろう！バインドマウント構築手順➁

ホストと同期するWordPress開発環境を作ろう！バインドマウント構築手順➁

　前回の「ホストと同期するWordPress開発環境を作ろう！バインドマウント構築手順①」では、compose.yamlファイルの定義と仕組みについて学びました。
今回はいよいよ、実際にDocker Composeコマンドを使ってWordPress＋MariaDB環境を構築し、
ホストマシンのフォルダとWordPressコンテナを同期させて動作を確認していきます。

ホストとコンテナの内容をリアルタイムで同期できるバインドマウントは、
WordPressテーマやプラグインをローカルで開発する際にとても便利な機能です。

作成するコンテナのイメージは下図のとおりです。

作業前のクリーンアップ

　まず、Docker環境をクリーンにしておきます。作業前に一度だけ実行しておくと、古い検証イメージや停止済みコンテナが整理され、以降の挙動が分かりやすくなります。
コマンドを実行する前に実行中のコンテナがあれば、すべて停止させておきます。

実行コマンド

docker system prune -a --volumes

このコマンドは、未使用のコンテナ・イメージ・ボリュームを一括で削除します。

　残っているボリュームがあれば、コマンドやDocker Desktop のGUIで削除しておくとさらにスッキリします。

オプション説明
-aすべての未使用イメージを削除
--volumes未使用のボリュームも削除

💡 Docker DesktopのGUIを使えば、削除対象を視覚的に確認しながらクリーンアップすることもできます。
CLI操作が苦手な方にはこちらがおすすめです。

実行結果

PS C:\Users\joeac> docker system prune -a --volumes
WARNING! This will remove:
  - all stopped containers
  - all networks not used by at least one container
  - all anonymous volumes not used by at least one container
  - all images without at least one container associated to them
  - all build cache

Are you sure you want to continue? [y/N] y

作業ディレクトリの作成

次に、WordPressプロジェクト用のフォルダを作成し、その中で作業を進めます。

コマンド実行例

cd desktop/docker
mkdir wordpress2
cd wordpress2

実行結果

PS C:\Users\joeac> cd desktop/docker
PS C:\Users\joeac\Desktop\docker> mkdir wordpress2

    Directory: C:\Users\joeac\Desktop\docker

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d----          2025/10/11    16:58                wordpress2

PS C:\Users\joeac\Desktop\docker> cd wordpress2
PS C:\Users\joeac\Desktop\docker\wordpress2>

これで作業用ディレクトリ「wordpress2」が作成できました。
このフォルダの中に compose.yaml ファイルを作っていきます。

VSCodeでcompose.yamlを作成

VSCodeを使って設定ファイルを作成しましょう。

code compose.yaml

このコマンドでVSCodeが起動し、新しいcompose.yamlファイルを編集できます。

compose.yaml の定義内容

以下の内容をそのまま貼り付けて保存します。

services:
  wpdb:
    image: mariadb:10.8
    environment:
      MARIADB_ROOT_PASSWORD: root-pass
      MARIADB_DATABASE: database
      MARIADB_USER: wp-user
      MARIADB_PASSWORD: wp-pass
    volumes:
      - db-data:/var/lib/mysql

  wordpress:
    image: wordpress:6.8
    depends_on:
      - wpdb
    environment:
      WORDPRESS_DB_HOST: wpdb
      WORDPRESS_DB_NAME: database
      WORDPRESS_DB_USER: wp-user
      WORDPRESS_DB_PASSWORD: wp-pass
    ports:
      - "80:80"    
    volumes:
      - ./html:/var/www/html
volumes:
  db-data:

　この設定で、MariaDBのデータはボリュームで永続化し、WordPressのコードはホストのhtmlフォルダと同期されます。

コンテナの作成と実行

実際にコンテナを起動します。

docker compose up -d
オプション説明
upcompose.yamlの設定をもとにコンテナを作成・起動
-dバックグラウンド（デタッチドモード）で実行

実行結果

PS C:\Users\joeac\Desktop\docker\wordpress2> docker compose up -d
[+] Running 34/34
 ✔ wpdb Pulled                                                                  12.7s
 ✔ wordpress Pulled                                                             17.1s
（省略）
[+] Running 4/4
 ✔ Network wordpress2_default        Created                                     0.1s
 ✔ Volume wordpress2_db-data         Created

これで2つのコンテナ（wpdb・wordpress）が作成され、起動完了です。

コンテナの状態確認

Docker Desktopを開くと、
MariaDBとWordPressの2つのコンテナが緑色のアイコンで稼働中であることが確認できます。

　もしアイコンが赤や灰色になっている場合は、compose.yamlの記述ミスや依存関係の設定エラーが考えられます。
その場合は、docker compose logs でログを確認しましょう。

ホストと同期される「html」ディレクトリ

起動が完了したら、作業ディレクトリを確認します。

ls

実行結果

PS C:\Users\joeac\Desktop\docker\wordpress2> ls

    Directory: C:\Users\joeac\Desktop\docker\wordpress2

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
da---          2025/10/11    17:28                html
-a---          2025/10/11    17:26            571 compose.yaml

PS C:\Users\joeac\Desktop\docker\wordpress2>

「html」というフォルダが自動的に作成されているのが分かります。
このフォルダがWordPressコンテナの /var/www/html と同期しています。

htmlディレクトリの中身を確認

ls html

実行結果

PS C:\Users\joeac\Desktop\docker\wordpress2> ls html

    Directory: C:\Users\joeac\Desktop\docker\wordpress2\html

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
da---          2025/10/01     2:30                wp-admin
da---          2025/07/16     3:17                wp-content
（省略）
-a---          2024/11/09     0:52           3205 xmlrpc.php

WordPressの構成ファイルがすべて確認できるはずです。
これが、コンテナ内のWordPressファイルがホスト側に反映された証拠です。

VSCodeでファイルを開く

ホスト上のファイルをVSCodeで開いてみましょう。

code ./html/index.php

VSCode上でWordPressのindex.phpが表示されれば、
バインドマウントによってホストとコンテナの同期が正常に行われていることが確認できます。

実行結果

WordPressにアクセスして動作確認

Webブラウザを開いて、次のURLにアクセスします。

http://localhost

WordPressの初期セットアップ画面が表示されれば成功です！

言語選択画面で「日本語」を選んで「次へ」をクリックします。

✅ ここではセットアップ完了までは行いませんが、
この時点でWordPressがMariaDBと接続できていることを確認できます。

バインドマウントの効果

ホスト上でファイルを編集すると、その内容は即座にコンテナ側に反映されます。
つまり、ローカルでテーマ開発やPHP修正を行いながら、
ブラウザで即座に反映結果を確認できるリアルタイム開発環境が実現します。

操作反映先
ホストでファイルを編集コンテナ内に即時反映
ホストでファイルを削除コンテナ内の該当ファイルも削除される。
新規ファイル追加コンテナ側でも即座に利用可能

イラストで理解する：ホストとコンテナの同期構成

まとめ

  • docker system prune -a --volumes でクリーンな環境を準備
  • compose.yaml でMariaDBとWordPressを定義し、ホストフォルダをバインドマウント
  • docker compose up -d で2つのコンテナを起動
  • ホスト上の「html」フォルダとコンテナの「/var/www/html」が同期
  • VSCodeで編集すれば、即座にWordPressに反映！

　バインドマウントを活用すれば、ローカルで自由にWordPress開発を進められる最強の環境が完成します。
これであなたも、Docker Composeを使ったモダンな開発環境を自在に操れるようになります！ 🚀