DockerでWordPress構築（ローカル仮想ドメイン版)

Updated: 2025.10.30
Published: 2025.10.30
82views

概要

Macのローカルに仮装ドメインでWordPressの開発環境を構築します。

・仮装ドメインでのアクセス
・httpsでのアクセス
・メール送信できるようにする
・phpMyAdmin構築

構成

OS
MacBook Pro macOS 15.7.1

ツール
Docker 4.48.0

ローカル仮想ドメイン
https://local-example.com/
※この先 local-example.com という仮想ドメイン名が出てくると思いますが、仮想ドメイン名を変更したい場合は変更するドメイン名に置き換えてください。

phpMyAdmin
http://localhost:8081/

mailpit: 開発用メール受信箱
http://localhost:8025

ファイル構成

<プロジェクトルート>
├── data/
│   ├── db/             # MariaDB の実データ
│   └── htdocs/         # WordPress コア + wp-content
├── .env                 # 秘密情報はここに
├── Caddyfile
├── docker-compose.yml
└── package.json

.env

# ---- WordPress DB 接続情報 ----
WP_DB_NAME=<DB名>
WP_DB_USER=<DBユーザー名>
WP_DB_PASSWORD=<DBパスワード>
WP_DB_ROOT_PASSWORD=<DBルートパスワード>

# ---- ポート（検証用に 8080 で立ち上げ）----
HOST_HTTP_PORT=8080

# ---- 任意：WordPressテーブルプレフィックス ----
WP_TABLE_PREFIX=wp_

# ---- タイムゾーン（日本）----
TZ=Asia/Tokyo

# ---- Gmail設定----
GMAIL_SMTP_USER=<Gmailアドレス>
GMAIL_SMTP_PASS=<16桁のパスワード>
GMAIL_SMTP_NAME=<メールタイトル>

※mailpitはWEB受信箱に貯まるだけなので、Gmailを使用して外部メールアドレスに送信。
※GMAIL_SMTP_PASS は通常のパスワードではなく 2段階認証有効化 + アプリパスワードが必要。

docker-compose.yml

version: "3.9"

services:
  db:
    image: mariadb:11
    container_name: wp_db
    restart: unless-stopped
    environment:
      - MARIADB_DATABASE=${WP_DB_NAME}
      - MARIADB_USER=${WP_DB_USER}
      - MARIADB_PASSWORD=${WP_DB_PASSWORD}
      - MARIADB_ROOT_PASSWORD=${WP_DB_ROOT_PASSWORD}
      - TZ=${TZ}
    volumes:
      - ./data/db:/var/lib/mysql

  wordpress:
    image: wordpress:php8.2-apache
    container_name: wp_app
    depends_on:
      - db
    restart: unless-stopped
    environment:
      - WORDPRESS_DB_HOST=db:3306
      - WORDPRESS_DB_NAME=${WP_DB_NAME}
      - WORDPRESS_DB_USER=${WP_DB_USER}
      - WORDPRESS_DB_PASSWORD=${WP_DB_PASSWORD}
      - WORDPRESS_TABLE_PREFIX=${WP_TABLE_PREFIX}
      - TZ=${TZ}
      - SMTP_HOST=smtp.gmail.com
      - SMTP_PORT=587
      - SMTP_USER=${GMAIL_SMTP_USER}
      - SMTP_PASS=${GMAIL_SMTP_PASS}
      - SMTP_SECURE=tls
      - SMTP_FROM=${GMAIL_SMTP_USER}
      - SMTP_NAME=${GMAIL_SMTP_NAME}
    ports:
      - "${HOST_HTTP_PORT}:80"
    volumes:
      # WP コア + wp-content を永続化
      - ./data/htdocs:/var/www/html

  phpmyadmin:
    image: phpmyadmin:5-apache
    container_name: wp_pma
    depends_on:
      - db
    restart: unless-stopped
    environment:
      - PMA_HOST=db
      - PMA_USER=${WP_DB_USER}
      - PMA_PASSWORD=${WP_DB_PASSWORD}
      - TZ=${TZ}
    ports:
      - "8081:80"
  caddy:
    image: caddy:2
    container_name: caddy_front
    depends_on: [wordpress]
    ports:
      - "443:443"
      - "80:80"
    volumes:
      - ./Caddyfile:/etc/caddy/Caddyfile:ro
      - /Users/<あなたのmacユーザー名>/certs/local-example:/certs:ro
  mailpit:
    image: axllent/mailpit:latest
    container_name: mailpit
    restart: unless-stopped
    depends_on: [wordpress]
    ports:
      - "8025:8025"   # UI
      - "1025:1025"   # SMTP

db: MariaDB 11

・./data/db に永続化。コンテナ消しても DB は残る

・.env の WP_DB_* と連動して WordPress から接続

wordpress: PHP 8.2 + Apache

・./data/htdocs を /var/www/html に丸ごとマウント

・ポートは HOST_HTTP_PORT:80（例: 8080:80）

・SMTP の環境変数を渡しているが外部への送信が必要なければSMTP以下は不要

phpmyadmin

・ブラウザで http://localhost:8081

・db サービスに直結。ユーザーは WP_DB_USER を使う

caddy: 逆プロキシ + HTTPS

・80/443 を受けて wp_app に中継

・ローカル証明書を（例: /Users/<あなたのmacユーザー名>/certs/local-example）から読み込む

mailpit: 開発用メール受信箱

・Web UI: http://localhost:8025

・SMTP: localhost:1025（認証なし）

・WordPress のメール送信テストに最適

package.json

{
  "name": "local-example-wp",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "up": "docker compose up -d",
    "down": "docker compose down",
    "restart": "npm run down && npm run up",
    "rebuild": "docker compose up -d --build",
    "stop": "docker compose stop",
    "start": "docker compose start"
  },
  "devDependencies": {
    "concurrently": "^9.2.1",
    "dotenv-cli": "^7.4.2"
  }
}

インストール

npm install

hosts設定

echo "127.0.0.1 local-example.com" | sudo tee -a /etc/hosts

hostファイルにlocal-example.comを登録

ライブラリインストール

brew install mkcert caddy || true
mkcert -install

ライブラリmkcert caddyがインストールされていなければインストール

mkcert

証明書を発行

mkdir -p /Users/<あなたのmacユーザー名>/certs/local-example
cd /Users/<あなたのmacユーザー名>/certs/local-example
mkcert local-example.com
# => local-example.com.pem / local-example.com-key.pem

Caddyfile

local-example.com {
  tls /certs/local-example.com.pem /certs/local-example.com-key.pem

  reverse_proxy wp_app:80 {
    header_up Host {host}
    header_up X-Forwarded-Proto {scheme}
    header_up X-Forwarded-Host {host}
  }
}

起動と初期確認

npm run up

# 確認
open http://localhost:8080
open https://local-example.com

終了

npm run down

DockerでWordPress構築（ローカル仮想ドメイン版)

概要

構成

.env

docker-compose.yml

db: MariaDB 11

wordpress: PHP 8.2 + Apache

phpmyadmin

caddy: 逆プロキシ + HTTPS

mailpit: 開発用メール受信箱

package.json

インストール

hosts設定

ライブラリインストール

mkcert

Caddyfile

起動と初期確認

終了

コメントを投稿する コメントをキャンセル

関連記事

人気の投稿

他人のYouTubeのチャンネルIDを調べる

YouTubeアプリでフィード(サムネイル)が自動再生されるのを止める

JavaScriptで擬似要素を操作する

mask-imageで透過グラデーション

Xプレミアムでプロフィールページにコミュニティページへのリンクを追加する

WordPressに気象庁APIで天気を表示する

ボーダーをグラデーション・角丸・背景抜きでCSSで実装する

GSAPで一文字ずつテキストをアニメーションさせる

WordPressでサイドバーに目次を表示させる

WordPressにnoteの記事一覧を埋め込む

Macでテキストを音声データ(MP3)に一括変換

get_the_archive_title で勝手に追加される「アーカイブ:」などを削除

ページのスクロールされている割合を表示させる

WordPressにYouTubeの動画一覧を表示する

Xプレミアムでプロフィールページのいいねを非表示にする

要素の背後にぼかしなどの効果を加えるbackdrop-filter

Intersection Observerでスクロールで要素の状態を変化させる

Youtubeフィードを使用してWordPressにチャンネルの動画一覧を表示する。

mask-imageでSVG画像の色を変える

HLS(HTTP Live Streaming)動画を再生する

最新の投稿

タグ

月別アーカイブ

Contact

コメントを投稿するコメントをキャンセル