てくてくあるく

WordPress の テーマ とか プラグイン に ついて 勉強しています

ローカル の 開発環境 で WordPress の マルチサイト開発 をしたくて
Docker 環境にドメインを割り当てて 動かす構成を試してみました

最終的に sample.docker というドメインで
ローカル の WordPress にアクセスできるようになりました

やったことはシンプルで
nginx の リバースプロキシ + hosts 書き換えの組み合わせです


nginx の コンテナ を 立ち上げる


nginx の コンテナ を 立てて 外部ポート 80 番で待ち受けるようにしました
設定ファイル は volume で マウントして 差し込んでいます

compose.yaml

services:
  nginx:
    restart: always
    image: nginx:alpine
    ports:
      - '80:80'
    volumes:
      - ./docker-volumes/nginx/default.conf:/etc/nginx/conf.d/default.conf:ro

default.conf

server {
  listen 80;
  server_name sample.docker;

  location / {
    proxy_pass http://host.docker.internal:50000;

    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}

ここで server_name に ローカル用のドメイン sample.docker を指定し
host.docker.internal を使って ホスト側 ( Mac / Windows など ) で立っている WordPress に ルーティングしています

ちなみに 50000 番ポートで WordPress を動かしている想定です
( 必要に応じて変更してください )

追加したい場合 server { ~ } を 丸々 複製すれば OK でした


hosts の書き換え


最後に ローカルマシンの hosts に 以下を追記

127.0.0.1 sample.docker

これで ブラウザ で http://sample.docker にアクセスすると
ローカルの WordPress にちゃんとつながりました


まとめ


WordPress の マルチサイト ( 特にサブドメイン型 ) を ローカル で動かすには
実際のドメインっぽい URL が必要だったりします

今回は nginx を リバースプロキシ として使うことで
sample.docker という 任意のドメイン で 動作するように設定しました

リバースプロキシ というものが 解っていなくて 敬遠していましたが
思っていたより簡単に 設定できました

ローカル開発でも 本番に近い構成で試したい場合には
こういうドメイン指定は かなり役立ちますね

Related Article

Docker で 開発環境 の ベースを 作ってみた (3)

詳細へ »

Gutenberg の カスタムブロック を 作ってみる

詳細へ »