カスタマイズ 2023.09.09 2023.09.11

DockerでWordPressローカル環境を立ち上げてみた！

この記事を書いた人

株式会社e2e wp.geek編集部

WordPressサイト制作サービス「wp.make」やWordPress保守・運用サービス「wp.support」などを展開する株式会社e2eの情報発信チームです。お客様の課題解決に役立つ、WordPressの最新情報をお届けいたします。

はじめに

ローカル環境は開発者にとって欠かせないもの。
私自身、学習を始めた頃はレンタルサーバーに学習用の環境を立ち上げていましたが、ローカル環境の手軽さ・便利さに気づいてからは、ほとんど使っていません。
本記事では、WordPress の初学者の方に向けて、Docker を利用して WordPress を立ち上げ、ローカル環境を構築する手順をご紹介します。
これから、「Docker でローカル環境を立ち上げたい」という方は、ぜひ参考にしてくださいね。

そもそも、ローカル環境ってなに ?

ローカル環境とは、そのコンピューター内でサイトの動作や表示確認を行うための環境のことです。
個人のコンピューター上で、仮想的にハードウェアやソフトウェア、サーバーなどを作成してローカル環境を構成します。
そのローカル環境に、web サーバーのような機能を加えることができます。
すなわち、レンタルサーバーなしで WordPress をブラウザに表示出来ます。
また、ローカル環境を複数人で共有できれば、同じ環境での開発を同時にできて、作業の分担が可能になります。

Docker について

docker_logo
ここでは Docker で、ローカル環境を作っていこうと思います。
Docker とは、「コンテナ」という仮想化のプロセスを使って、仮想環境を作成し編集するためのプラットフォームです。Docker 社より公開されています。
Docker は、環境の構成データをコード化したファイルで管理するため、同じ環境の共有や再構築が容易で、複数人でのバージョン管理がしやすくなります。
さらに、他の仮想環境構築と比べて、動作が軽く、操作が容易です。¹
この Docker を使って話を進めていきます。

ローカル環境の作成手順

Docker Desktop のインストール ²

Docker の公式サイトへアクセスし、現在使用の OS に合わせて DockerDesktop のインストーラをダウンロードします。
Download Docker Desktop | Docker
ダウンロードしたフォルダから、次の起動ファイルをダブルクリックしてインストールします。

Windows => (Docker Desktop Installer.exe)
Mac => (Docker.dmg)

インストール完了したら、Docker Desktop を起動させましょう。もし Docker Desktop が起動せず開けなかった場合は PC の再起動をしてください。
Docker Desktop の起動後、利用のためにアカウント登録を勧められますが、現在の Docker はアカウント登録をせずに利用できるので、スキップします。

compose.yaml の作成

前準備

それでは WordPress を立ち上げるために、次のアプリケーションを用意します。

VSCode などのエディタ
Docker Desktop (Docker のアプリケーション)
コマンドプロンプトなどの CUI (VSCode のターミナルでも操作可能)
Chrome などのブラウザ

( 本記事ではコマンドを Git Bash で操作します。)
次に、必要なディレクトリを作成します。
私は、作業用として「test」を新規作成しました。
その直下に compose.yaml を作成しました。

compose.yaml のソースコード

compose.yaml は Docker のコンテナ作成に使われる構成ファイルです。
本来、コンテナを作成する場合にはコマンドラインで複数記述する必要がありますが、複雑になってしまいます。
そこで、まとめて記述するためのファイルが compose.yaml になります。³
記述をまとめることで、コマンド操作が簡単になります。
それでは、このファイルをもとに仮想環境でのコンテナや実行処理の部分を作成します。

version: '3.7'

services:
  wordpress:
    image: wordpress:6.3-php8.0
    ports:
      - 3040:80
    volumes:
      - ./wpgeek:/var/www/html/wp-content/themes/wp-geek
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_NAME: wordpressdb
      WORDPRESS_DB_USER: wordpressuser
      WORDPRESS_DB_PASSWORD: wordpresspass
    restart: always
    depends_on:
      - db

  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: wp
      MYSQL_DATABASE: wordpressdb
      MYSQL_USER: wordpressuser
      MYSQL_PASSWORD: wordpresspass
    restart: always

volumes:
  db_data:

version: '3.7'

services:

wordpress:

image: wordpress:6.3-php8.0

ports:

- 3040:80

volumes:

- ./wpgeek:/var/www/html/wp-content/themes/wp-geek

environment:

WORDPRESS_DB_HOST: db

WORDPRESS_DB_NAME: wordpressdb

WORDPRESS_DB_USER: wordpressuser

WORDPRESS_DB_PASSWORD: wordpresspass

restart: always

depends_on:

- db

db:

image: mysql:5.7

volumes:

- db_data:/var/lib/mysql

environment:

MYSQL_ROOT_PASSWORD: wp

MYSQL_DATABASE: wordpressdb

MYSQL_USER: wordpressuser

MYSQL_PASSWORD: wordpresspass

restart: always

volumes:

db_data:

compose.yaml のプロパティ

ソースコードのままだと見づらいので、ソースコード中の services について、テーブルにしました。

service	プロパティ	説明
wordpress	image	Docker Hub にある WordPress のイメージ
	ports	localhost のポート番号 : コンテナのポート番号
	volumes	ローカル PC のディレクトリ : コンテナのディレクトリ
	environment	コンテナ内の環境変数
	restart	Docker を起動させたら、コンテナも起動させる
	depends_on	docker compose コマンドの処理順を制御
db	image	Docker Hub にあるデータベースのイメージ
	volumes	名前付きボリューム : コンテナのディレクトリ
	environment	コンテナ内の環境変数
	restart	Docker を起動させたら、コンテナも起動させる

compose.yaml は YAML というフォーマットで書かれています。
YAML は Docker ファイルや Kubernetes ファイルによく使用されています。⁴
ソースコードの トップレベル に、version と services と volumes を定義しました。
version は compose.yaml のバージョンを指します。
services は、コンテナを管理するサービスを定義します。各サービスごとに、同じ役割をもつコンテナをまとめて管理します。wordpress,db がサービス名です。
コンテナの金型となるイメージを image で指定します。
Docker Hub というクラウド共有サービスで公開されているイメージをダウンロードできます。⁵
Docker Hub Container Image Library | App Containerization

(余談) image ではなく、 build でイメージを構築することが出来ます。⁶ build を用いる場合は「test」直下、compose.yaml と同じディレクトリに Dockerfile を作成してください。Dockerfile とはイメージ構築のために、コマンドラインからよびだすコマンドの一連をまとめたテキスト文書です。Dockerfile 作成後、 wordpress の image の文を次のソースコードに記述した build の文へ変えてください。

services:
  wordpress:
    build: .

services:

wordpress:

build: .

port を指定することで、ローカル PC のポート番号とコンテナ内サーバのポート番号を対応付けることが出来ます。
この指定によって、ブラウザから http://localhost:3040 で、WordPress を表示できるようになります。

volumes について。⁷
wordpress では、「test」の直下にある「wpgeek」がコンテナディレクトリの「wp-geek」にマウントされるように指定します。(バインドマウント)
このマウント方法は、ローカル PC の「wpgeek」とコンテナの「wp-geek」を同期的に接続します。
ローカルディレクトリでのエディタ操作がマウントされたコンテナディレクトリへ反映されるため、ディレクトリの編集と WordPress の動作確認が容易になります。
対する db の volumes では、まず トップレベル の volumes で名前付きボリュームを定義します。この名前付きボリュームは Dockerエンジン のストレージに格納され、複数のコンテナで共有することが出来ます。
そして、この名前付きボリュームを DB コンテナにマウントすることで、作成したコンテナを今後削除しても永続的にデータが保存されるようにします。(ボリュームマウント)

environment はコンテナでの環境変数を指しています。⁸
db ではデータベースの名前やパスワードを定義し、
wordpress では WordPress で使用するデータベース名とパスワードを定義します。
2 コンテナの、データベース名とパスワードの環境変数を対応させることで、 WordPress の情報をデータベースに保存することができます。

restart でコンテナを終了させたときに、 Docker がどのような処理をするかを指定します。⁹
always だと、Docker が起動したときにコンテナも起動します。

コマンド操作

以上のディレクトリ構成が出来次第、コンテナ作成します。

Docker Desktop を起動する。
ターミナルもしくはコマンドプロンプトを開く。
カレントディレクトリを compose.yaml のところまで移動する。
コマンドラインで docker compose コマンドを打つ。

今回使うコマンド

まず docker compose コマンドが使用できるか確認しましょう。
docker compose コマンドのバージョンを確認出来れば、コマンドを使用できます。

$ docker compose version
Docker Compose version v2.20.2-desktop.1

1 2	$ docker compose version Docker Compose version v2.20.2-desktop.1

確認出来たら、コンテナを作成します。

$ docker compose up -d
[+] Running 4/4
 ✔ Network test_default        Created                                              0.0s 
 ✔ Volume "test_db_data"       Created                                              0.0s 
 ✔ Container test-db-1         Started                                              0.6s 
 ✔ Container test-wordpress-1  Started                                              1.0s

$ docker compose up -d

[+] Running 4/4

✔ Network test_default Created 0.0s

✔ Volume "test_db_data" Created 0.0s

✔ Container test-db-1 Started 0.6s

✔ Container test-wordpress-1 Started 1.0s

(up -d: バックグラウンドで起動する)
バックグランドで起動することで、そのまま CUI で他のコマンドを実行することができます。作成中のコンテナがすべて「Created」になると、Docker コンテナが起動されます。ここで Docker Desktop でコンテナを確認してみましょう。
コンテナには「test」があります。
それをクリックすると wordpress と db というコンテナが出来ていると思います。
DockerのLogsにはコンテナ作成の履歴があります。DBコンテナのログ更新が止まり、DBコンテナの処理で以下の1文があれば、接続完了です。
(スクリーンショット参照)

2023-08-30T07:20:37.876265Z 0 [Note] mysqld: ready for connections.

1	2023-08-30T07:20:37.876265Z 0 [Note] mysqld: ready for connections.

test-db-1
また、エディタ等でローカル PC のディレクトリを確認すると、「wpgeek」が追加されています。

/path/to/test
　├ wpgeek
　└ compose.yaml

/path/to/test

　├ wpgeek

　└ compose.yaml

WordPress を開く

コンテナが出来たら、Docker と作成したコンテナを起動させて、WordPress を表示させましょう。
ブラウザより「localhost:3040」を入力し、WordPress の画面が映れば、接続完了です。
登録とログインを済ませ、WordPress を使えるようにしましょう！

補足

今回作ったコンテナ「test」を削除したい場合は、本記事にて作成したcompose.yamlがあるディレクトリで、次のコマンドを打ちます。

$ docker compose down --volumes
[+] Running 4/4
 ✔ Container test-wordpress-1  Removed                                              1.6s 
 ✔ Container test-db-1         Removed                                              2.1s 
 ✔ Volume test_db_data         Removed                                              0.0s 
 ✔ Network test_default        Removed                                              0.3s

$ docker compose down --volumes

[+] Running 4/4

✔ Container test-wordpress-1 Removed 1.6s

✔ Container test-db-1 Removed 2.1s

✔ Volume test_db_data Removed 0.0s

✔ Network test_default Removed 0.3s

このコマンドによって、トップレベル の volumes で定義した名前付きボリュームも一緒に削除することができます。

まとめ

Docker とコンテナの構成ファイルである compose.yaml を使うことで、WordPress のローカル環境を構築することが出来ました！
ローカル環境を使用することで、開発をよりスムーズに進められるようになります。ぜひ、Docker で WordPress のローカル環境を立ち上げてみてくださいね。
なお、本記事は WordPress を立ち上げることを目的にしたので、実際の WordPress 開発の目的に合わせて、ソースコードを直してください。

参考記事

WordPressサイト制作・カスタマイズなら「wp.make」にお任せ！

WordPressでのサイト制作やリニューアルを検討する時、以下のようなお悩みはありませんか？

WordPressに詳しい制作会社に依頼したいが、どこがいいかわからない…
セキュリティ対策をしっかりしたいが、社内にノウハウがないのでプロに任せたい…
WordPressに最適なサーバーの選定や構築から依頼したい…
SEO対策や高速化も考慮したサイト構築を行なってほしい…
制作後の保守・運用についてもサポートしてほしい…
今のサイトを簡単に運用できるようにしてほしい…

「wp.make」は、WordPressのプロフェッショナル集団によるWordPressサイト制作・カスタマイズサービスです。
サイトの制作だけでなく、WordPressに最適なサーバーの選定や構築といったインフラ面の支援から、SEO対策や表示スピードの高速化、高度なセキュリティ対策や制作後の保守・運用サポートまで、WordPressに関わることならあらゆるお悩みを解消いたします。

既存のお客さまからも
「コミュニケーションが取りやすく、クオリティが高い」
「WordPressのプロとして信頼感がある」
と大変ご好評をいただいています。

WordPressサイトの制作・カスタマイズをご検討されているなら、ぜひ以下からお気軽にご相談ください。

>> wp.makeに無料相談する

WordPress開発・カスタマイズなら『wp.make』

全案件WordPressのみ！
株式会社e2eの『wp.make』はWordPress専門のWeb制作サービスです。

WordPress案件だけを扱っているから、技術・ノウハウ・対応力が圧倒的！

【WordPressサイト制作でよくあるお悩み】
・運用シーンが想定されておらず、更新しづらかった…
・打ち合わせで専門用語が多くてわかりづらい…
・制作後の保守には対応してくれなかった…

こんな事態になる前に、ぜひ一度、ご相談ください！
WordPressサイトを作るなら、一番WordPressに詳しいところへ！

今すぐ問い合わせるサービス資料をダウンロード

DockerでWordPressローカル環境を立ち上げてみた！

株式会社e2e wp.geek編集部

はじめに

そもそも、ローカル環境ってなに ?

Docker について

ローカル環境の作成手順

Docker Desktop のインストール 2

compose.yaml の作成

前準備

compose.yaml のソースコード

compose.yaml のプロパティ

コマンド操作

今回使うコマンド

WordPress を開く

補足

まとめ

参考記事

Footnotes

WordPressサイト制作・カスタマイズなら「wp.make」にお任せ！

WordPress開発・カスタマイズなら 『wp.make』

Docker Desktop のインストール ²

WordPress開発・カスタマイズなら『wp.make』