経緯
元々ローカルでの環境設定にLocalを使用していたけど、システムのバージョンアップの時にphp7.3とかの低いバージョンに落とせなくて動作確認ができなかったから。
調べてみるとDockerならWP-CLIを用いて、固定ページとかの作成もコマンドからできるのがわかって、やってみることにした。
そもそもDockerってなんぞや
Docker は「アプリを動かすためのコンテナ」を作るツール
→ 1つのアプリを1つのコンテナに入れて動かせる。
ChatGPTに聞いたところ以下の回答返ってきて、なるほどってなった🤔
Dockerは「なんでも入る魔法の箱」というより、「どこでも同じ環境を再現できる透明な箱」だと思うと理解が早い。
つまり、動作環境をコード化して共有・再利用できるツール。
Dockerでできること
-
開発環境を一瞬で立ち上げられる
-
チーム全員が同じ環境で開発できる（動作の差異が消える）
-
サーバー本番環境にもそのままデプロイできる（移植性が高い）
フロントエンドでの使いどころ🧩
-
Node.jsやnpmをローカルにインストールせず、Docker内で動かす
-
React／Next.js／Vueなどの開発環境を一瞬で起動できる
-
SassやVite、ESLintなどのバージョンをチームで固定できる
-
Storybookなどデザインシステム環境をDockerで配布する
👉つまり「フロント開発用の仮想PC」をプロジェクト単位で用意できる。
実践
Docker Desktopをインストールする
参考にしたサイト
【入門】Dockerで環境構築｜WordPress環境をローカルPCに作ろう！
手順は以下の通り
- Docker Desktopをインストール
- Docker Desktopを立ち上げる
- docker-compose.ymlファイル入れるディレクトリを作る
- 環境構築を始めるコマンドを実行
- 「docker-compose up -d」コマンドを実行
- 完成した環境の確認
今回は最新バージョンで実行してみて、この後各種バージョンを変更するようにしてみる。
Doker DesktopをHomeBrewからインストールする
brew install --cask docker
macのlaunchpad内にDocker Desktopが入るので、それを開く
設定は「Use Recommended settings」を選択して「Finish」
以下の画面が表示されれば、インストールできた状態となる。
docker-compose.ymlファイルを入れるディレクトリを作る
docker-compose.ymlとは、docker composeを管理するためのファイル
Docker Compose は「複数のコンテナをまとめて管理するためのツール」
→ 例えばWebアプリとデータベースを同時に動かしたいとき、Composeを使うと一括で起動・停止・設定できる。
【入れる情報】
- どんなコンテナを作るか
- それぞれのコンテナの設定（ポート番号、環境変数、ボリュームなど）
- コンテナ同士のつながり（ネットワーク）
ディレクトリはusers直下にdockerという名前で作成し、その中にコンテナを入れていくシステムにしたいと考えている。そのためdockerディレクトリ内にdocker-testディレクトリを作成した。(今はこんな感じ)
.
└── users/
└── docker/
└── docker-test
docker-compose.ymlファイルを作成する
ここからはVScodeを使って、docker-compose.ymlを作成する
先ほど添付した参考URLに記載のあったコードをコピペして貼る
services:
db:
image: mysql:8.0
container_name: mysql8
restart: always
environment:
MYSQL_ROOT_PASSWORD: password # rootユーザのパスワード
MYSQL_DATABASE: db_local # WordPress用データベース名
MYSQL_USER: wp_user # WordPress用データベース接続ユーザ名
MYSQL_PASSWORD: password # WordPress用データベース接続パスワード
wordPress:
image: wordpress:latest
container_name: wordpress
restart: always
depends_on:
- db
ports:
- 10090:80
environment:
WORDPRESS_DB_HOST: db:3306 # データベースサーバ名：ポート番号
WORDPRESS_DB_USER: wp_user # WordPress用データベース接続ユーザ名(dbの内容に合わせる)
WORDPRESS_DB_PASSWORD: password # WordPress用データベース接続パスワード(dbの内容に合わせる)
WORDPRESS_DB_NAME: db_local # WordPress用データベース名(dbの内容に合わせる)
WORDPRESS_DEBUG: 1 # デバッグモードON
volumes:
- ./html:/var/www/html
phpmyadmin:
image: phpmyadmin/phpmyadmin:latest
platform: linux/arm64/v8
container_name: phpmyadmin_ingrid
restart: always
depends_on:
- db
ports:
- 10099:80
（メモ 
）
version: "3.7"
参考サイトではバージョンを一番上に記載してあるけど、このバージョン行は最近のdockerComposeでは不要になって、自動でファイルのバージョンを管理してくれるようになったみたい。
platform: linux/arm64/v8
macOSで参考URLの通り実行したら、
! phpmyadmin The requested image's platform (linux/amd64) does not match the detected host platform (linux/arm64/v8)
と表示された。
これは、Dockerイメージ（phpMyAdmin用）が amd64 向けなのに、私のMacが arm64（Apple Silicon）という警告を出している 
なので以下を記述追加している。
services:
phpmyadmin:
image: phpmyadmin:latest
platform: linux/arm64/v8 #追加
docker psを実行して、WordPress、MySQL、phpMyAdmin の3つのコンテナが「STATUS: Up」と出ていたのでOK！
「docker-compose up -d」コマンドを実行
VScodeからターミナルを開き、以下のコマンドを実行します。
docker-compose up -d
完了すると、Docker Desktopの画面は下記のようになりました。
作成したディレクトリ内にはhtmlディレクトリが作成され、
htmlディレクトリ内にはWPの構築に必要なディレクトリやファイルが作成されました！
完成した環境の確認を行う
Docker Desktopに戻り、「docker-test」をクリック、「phpmyadmin」のリンクアイコンをクリックします。
以下の画面が表示されたら、docker-compose.ymlに記載したWordPress用データベース接続ユーザ名とパスワードでログインでき、データベースを確認することができます。
続いて、ワードプレスへの接続確認を行います。
docker DesktopからWordPressを選択し、リンクボタンからページに飛びます。
以下画面が表示されたら接続できている状態です。
まずは言語を選択します。(⚠️追記：WP-CLIで言語やサイト名・ID等の設定が可能なので、それをしたい人はこれ以降操作しない！)
サイト情報を設定します。
ローカルで確認したい場合は、「検索エンジンでの表示 検索エンジンがサイトをインデックスしないようにする」にチェックをつけておいた方が良い。
環境構築完了〜✨
これで通常のワードプレスと変わらないような環境になった🥲
次はWP-CLIを用いてコマンドラインでWPを触って見ようと思います。