Windows + WSL2 + Docker DesktopでWordPress開発環境を再構築する完全ガイド

初心者の方でも迷わず進められるよう、エクスプローラーの設定やVS Codeを使った効率的な開発手法も交えて解説します。

1. 動作環境の確認（CPUアーキテクチャの確認）

まず、お使いのPCのCPUの種類を確認します。これによってインストールするソフトの種類が変わります。

Windowsの 設定 > システム > バージョン情報 を開きます。
「システムの種類」という項目を確認します。
- 「x64 ベースプロセッサ」と表示された場合：大半のWindows PCがこれに該当します。ソフトは「x86_64」「x64」「AMD64」と書かれたものを選択してください。
- 「ARM ベースプロセッサ」と表示された場合：「ARM64」用のソフトを選択します（最近のSurface等）。

2. Docker Desktop のインストールとWSLの更新

Dockerを動かすための土台となるソフトをインストールします。

Docker公式サイトから、手順1で確認したCPUに合ったインストーラーをダウンロードし、実行します。
インストール時の設定画面に 「Use WSL 2 instead of Hyper-V」 という項目があれば、必ずチェックを入れてください。
インストール完了後、PCを再起動し、Docker Desktopを起動します（規約同意画面が出たら「Accept」を押します）。

※もし起動時に 「WSL needs updating」 というエラーが出た場合は、以下の手順でWindowsのWSLを更新してください。

スタートメニューで「PowerShell」と検索し、「管理者として実行」 をクリックします。
以下のコマンドを入力してEnterキーを押します。 wsl --update
更新完了後、Docker画面の「Restart」ボタンを押すか、再度PCを再起動します。

3. Ubuntu 22.04 LTS のインストールと初期設定

WSL上で動かすLinux（Ubuntu）を準備します。

Microsoft Store を開き、「Ubuntu 22.04 LTS」を検索して「入手（インストール）」します。
インストール完了後、「開く」をクリックすると黒いターミナル画面が立ち上がります。※数分待機が必要です。

【初期設定（ユーザー作成）】 画面の指示に従って初期設定を行います。

Enter new UNIX username: 好きな名前を半角の小文字英数字で入力してEnter。
New password: パスワードを入力してEnter。（※セキュリティ上、キーボードを叩いても画面には何も表示されませんが、入力は受け付けられています）
Retype new password: 同じパスワードをもう一度入力してEnter。 Installation successful! と表示されれば完了です。

【Dockerとの連携設定】

Docker Desktopの画面右上にある 歯車アイコン（Settings） をクリックします。
左メニューから Resources > WSL Integration を開きます。
「Ubuntu-22.04」 のスイッチを ON にし、右下の 「Apply & Restart」 をクリックします。これでUbuntu内でDockerが使えるようになります。

4. プロジェクトディレクトリの作成

開発効率を上げるため、ファイルの作成はVS Code（Visual Studio Code）を使うのがおすすめです。

【VS Codeの準備】

VS Codeをインストールし、拡張機能 「WSL」（Microsoft製）をインストールしておきます。

【フォルダの作成】

Ubuntuのターミナルを開き、以下のコマンドを順番に打ってフォルダを作成します。
mkdir -p ~/docker-project/site1
cd ~/docker-project/site1
続けて以下のコマンドを入力すると、今の場所でVS Codeが起動します。
code .
（初回のみ）「このフォルダーの作成者を信頼しますか？」と出たら「はい」を押します。

5. docker-compose.yml の作成と配置

コンテナの設計図となるファイルを作成します。

VS Codeの左側のファイル一覧で右クリックし、「新しいファイル」を選択。名前を docker-compose.yml にします。
以下のコードをそのままコピー＆ペーストして保存します。 ※YAMLファイルは行の先頭の空白（インデント）が重要です。全角スペースが混じらないよう注意してください。

services:
db:
image: mysql:8.0
container_name: site1-db
restart: always
environment:
MYSQL_ROOT_PASSWORD: password
MYSQL_DATABASE: wordpress
MYSQL_USER: wp_user
MYSQL_PASSWORD: wp_password
volumes:
- db_data:/var/lib/mysql

wordpress:
depends_on:
- db
image: wordpress:latest
container_name: site1-wp
restart: always
ports:
- "8080:80"
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wp_user
WORDPRESS_DB_PASSWORD: wp_password
WORDPRESS_DB_NAME: wordpress
volumes:
- ./wp-content:/var/www/html/wp-content

volumes:
db_data:

6. コンテナの起動と確認

VS Code内のターミナルを使うと移動の手間が省けて便利です。

VS Codeの上部メニュー「ターミナル」＞「新しいターミナル」を開きます。
画面下部のターミナルで以下のコマンドを入力し、Enterキーを押します。初回はソフトのダウンロードが始まるため少し時間がかかります。
docker compose up -d
ブラウザを開き、http://localhost:8080 にアクセスします。WordPressの初期設定画面が表示されれば成功です！

site1 フォルダ内に自動的に wp-content フォルダが生成されます。Windows側のエクスプローラーで見たい場合は、アドレスバーに \wsl.localhost\Ubuntu-22.04\home(ユーザー名)\docker-project\site1 と入力すればアクセス可能です。

【開発を終了する場合】 PCの負荷を下げるため、作業後は以下のコマンドで停止しましょう。 docker compose down