【PhpStorm】【Docker】WordPress開発環境を作る

 WordPress は長く続いている web サイト作成ツールです。プログラミングの知識がなくとも様々なデザインと構成の web サイトを作ることができ、多くの場所で使われています。
WordPress.com: 無料のサイトやブログを作成
 WordPress はテーマ、プラグインというライブラリを WordPress に組み込む仕組みがあり、これと本体は主に PHP と JavaScript で作られています。
WordPress Themes — WordPress.com
ご利用の WordPress.com サイトにプレミアムおよび無料の WordPress プラグイン
 WordPress の歴史は長く(2003年から現在も続いています)、その歴史は composer、npmといったパッケージ管理ツール(それぞれPHP、JavaScriptのパッケージ管理ツール)よりも長いです。そのためかオートローダ等のどのファイルをいつ読み込むといった仕組みが WordPress 独特のものになっています。この記事ではその独特な環境を便利に取り扱うための環境構築方法を紹介します。
 前提として使うのは PhpStorm と Docker です。それぞれ超すごいエディタとローカルマシンに様々な仮想環境を手軽に置くアプリです。
PhpStorm:JetBrainsによるPHP開発様向けの超高速でスマートなIDE
Empowering App Development for Developers | Docker
 Docker には WordPress と web サーバが揃った Docker 公式イメージがあります。これとデータベースイメージを使うことで WordPress を動かす環境ができます。
wordpress – Docker Hub
 上記リンクで紹介されている docker-compose.yml が次で、これは Docker を本番環境的に扱うための設定です(認証情報が脆弱なのでそのまま外部公開するのは厳禁です)。

version: '3.1'

services:

  wordpress:
    image: wordpress
    restart: always # 常に起動しっぱなし
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
    volumes:
      # volume にマウントすることによる永続化
      - wordpress:/var/www/html

  db:
    image: mysql:5.7
    restart: always # 常に起動しっぱなし
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
    volumes:
      - db:/var/lib/mysql

volumes:
  wordpress:
  db:

 自分の使っている開発用の docker-compose.yml は次です。こちらにすると異常が起きた時にわかりやすい上、wordpress 自体のソースコードを参照できてIDE向けです。

version: "3"
services:

  wordpress:
    build:
      # 下記 Dockerfile を使用。イメージそのままではメールを飛ばせない
      context: ./docker/wordpress
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
    volumes:
      # volume ではなく実ディレクトリにマウント
      - ./wordpress:/var/www/html

  db:
    image: mysql:5.7
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
    ports:
      - 3306:3306 # ローカルマシンから直にデータベースをいじりたい、見たい様にポートをマウント
    volumes:
      - db:/var/lib/mysql
  # メールサーバのモックサーバを使用
  mailhog:
    image: mailhog/mailhog
    ports:
      - 8025:8025
      - 1025:1025

volumes:
  db:
# ↑の./docker/wordpressで参照しているDockerfileの中身
FROM wordpress:5.5.1-php7.4-apache
# @see https://stackoverflow.com/questions/42153606/docker-connect-mail-catcher-with-wordpress
# メールを送るための実行ファイルをダウンロード & 配置
RUN curl --location --output /usr/local/bin/mhsendmail https://github.com/mailhog/mhsendmail/releases/download/v0.2.0/mhsendmail_linux_amd64 && \
     chmod +x /usr/local/bin/mhsendmail
# メールを送るための実行ファイルと mailhog の情報をべた書き
RUN echo 'sendmail_path="/usr/local/bin/mhsendmail --smtp-addr=mailhog:1025 --from=admin@example.com"' > /usr/local/etc/php/conf.d/mailhog.ini

 この構成で docker-compose up すれば次の画像の様に 8080 ポートで WordPress に接続でき、

 次の画像の様にソースコードとデータベースをローカルマシンで参照できます。

 ソースコードをローカルで参照できたならばこれをPhpStormに知らせます。
WordPress固有のコーディング支援 – ヘルプ | PhpStorm
 次の様にプロジェクトインクルードパスとしてWordPressインストールを設定することで、WordPress のローダーと PhpStorm を接続でき、WordPress で用意されている関数などをコーディング中に予測補完、ドキュメント参照できます。


 この記事では WordPress 全体を扱う方法を紹介しましたが PhpStorm ではプラグインを作るためのテンプレートとコーディング支援機能も備わっています。
WordPress入門 – ヘルプ | PhpStorm

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG