members

members

WSL2 + Docker + wp-envでモダンなWordPress開発環境を構築する

Tweet


画像: WordPressロゴ:WordPress公式、Dockerロゴ:Docker公式、Node.jsロゴ:wikipedia、Linux(Tux)ロゴ:wikipedia、Windowsロゴ:wikimedia

 

はじめに

WordPress のローカル開発環境ツールとして、私のチームではFlywheel社のLocalを利用しています。 LocalはGUI で手軽に作成できるため、利用されている方も多いのではないかと思います。しかし、Localはバージョンにより挙動が異なることが多いため、開発者の入れ替わりがあるプロジェクトでの利用の際に問題になることがあります。
2020年2月にWordPress公式のローカル開発環境ツールであるwp-envがリリースされました。 wp-envはDockerとNode.jsさえあれば、WordPressのローカル開発環境を手軽に作成することができます。 2020年5月にはWindows上で完全なLinuxが動作するWSL2(Windows Subsystem for Linux 2)がリリースされました※1。これに合わせるようにDockerも、WSL2上で動作するDocker Desktopをリリースしており※2、Windows 10 HomeとProでストレスなくDockerを利用できる環境がようやく整ったと言えます。
本稿では、WSL2上で動作するDockerとwp-envを組み合わせたモダンなWordPress開発環境を構築する手順を紹介したいと思います。また、WSL2導入の前提条件や、Localで作成したWordPressのローカル開発環境や、競合する可能性があるVirtualBox環境を残しつつ導入する際のポイントも紹介したいと思います。

※1 WSL2は従来のHyper-VのVM上ではなく、軽量ユーティリティVM上で動作するため、起動時間が高速なのが特徴です。
※2 以前のDocker DesktopはバックエンドがHyper-Vにのみ対応していたため、Windows 10 Homeでは利用できませんでした。

前提条件・導入の際のポイント

WSL2を導入するには次のような前提条件があります。

  • Windows 10がバージョン が1903以降であること
  • Windows 10のバージョン が1903または1909の場合、マイナー ビルド番号が 1049 以上であること

上記の条件を満たせない場合は、WSL2が導入できないため、Hyper-VバックエンドのDcoker Desktopを利用するか、Docker Toolboxを利用してください(「Windows用のDockerについて」を参照)。
なお、WSL2は、Hyper-V関連技術を利用して実現されているため、「Hyper-Vアーキテクチャ」や「仮想マシンプラットフォーム」といったHyper-Vに関連する機能を有効化する必要があります(有効化手順については後述)。

Windows用のDockerについて

Windows用のDockerは、Docker Machine+VirtualBoxを利用するDocker Toolbox(1.)と、バックエンドにHyper-V関連機能を利用するDocker Desktop(2.および3.)があります。

  1. Docker Toolbox(Docker Machine+VirtualBoxを利用) … Windows 10 Home対応
  2. Docker Desktop(バックエンドにHyper-V利用) … Hyper-Vが利用できないためWindows 10 Homeは非対応
  3. Docker Desktop(バックエンドにWSL2利用) … Windows 10 Home対応

本稿では、Windows 10 Homeでも利用可能な、3.のバックエンドにWSL2を利用したDocker Desktopを導入します。

VirtualBoxを利用している場合

Windowsで利用できる仮想マシン管理環境に、Hyper-VとVirtualBoxがあります。 どちらもVT-xという仮想化支援技術を利用しますが、VT-xを占有して利用する必要があり、古いVirtualBox(バージョン5以前)では、Hyper-Vは共存することができませんでした。
バージョン6以上のVirtualBoxでは、フォールバック機能が追加され、Hyper-Vが有効な状態でも動作できるようになったため、WSL2と共存させたい場合は、バージョン6以上のVirtualBoxをインストールしてください(手元のVagrantの環境で共存できることを確認)。
WSL2を有効化した状態で、VirtualBoxが動作しないような場合は、「Windowsの機能」の「Windowsハイパーバイザープラットフォーム」が有効になっていることを確認してください。

WordPressローカル開発環境ツールLocalを利用している場合

WordPressのローカル開発環境ツールであるLocalを利用している場合は注意が必要です。Localのバージョン3系(Local by Flywheel、以後LBFと呼ぶ)を利用している場合、LBFはバージョン5以前の古いVirtualBoxに依存しており、Hyper-Vが有効な環境ではインストール時のチェックではじかれ、利用することができません※。
Localのバージョン5系(Local Lightning 、以後Lightning)は、仮想化技術に依存していないため、WSL2と共存ができます。LBFで構築したローカルWordPress環境は、Flywheel社公式の手順に従ってLightningにマイグレーションしてください。

※Hyper-V機能を無効にした状態でインストールしたあとに有効にしても、正しく動作させることができません(2020/9現在)。

導入手順

wp-envの導入手順は大きく次の通りです(所要時間は30分程度)。 本稿ではすべてWSL2上で動作するようにインストールしていきます。

  1. WSL2 をインストールする
  2. Docker をインストールする
  3. Node.js をインストールする
  4. wp-env をインストールする

 

導入導入手順1. WSL2をインストールする

基本的には、Microsoft公式の手順に従ってインストールしていきます。
まず、必要なWindows機能を有効化していきます。 [Windowsキー]を押しながら[Xキー]を押して一度離した後、[Aキー]を押して、PowerShellを管理者権限で起動し、リスト1とリスト2のコマンドを実行してください。

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

リスト1: WSL有効化

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

リスト2: 仮想マシンプラットフォームを有効化

 

一度マシンを再起動したあと、再度PowerShellを管理者権限で起動し、リスト3のコマンドを実行して、WSL2を規定のバージョンとして設定します。

wsl --set-default-version 2

リスト3: WSL2を規定のバージョンとして設定

注意点としては、過去にHyper-Vを無効化したことがある場合などは、上記のコマンドがエラーとなる場合があります。 その場合はリスト4のコマンドで明示的にHyper-Vを有効化する必要があります(公式の手順には載っていません)。 管理者権限で起動したPowerShellでリスト4のコマンドを実行してください。

bcdedit /set hypervisorlaunchtype auto

リスト4: Hyper-Vの有効化

最後に、Microsoft Storeを開き、Ubuntuをインストールします(図1)。

図1. Microsft StoreからUbuntsuをインストール(画像はイントール済みの状態のため「起動」ボタンとなっている)

 

導入手順2. Docker をインストールする

公式サイトのdocker hubより、Docker Desktop Installerをダウンロードし実行します。
筆者の環境のWindows 10 バージョン1909では、 Edgeバージョンをインストールしないと、バックエンドとしてWSL2を利用できなかったため、Edgeバージョン(執筆時点は2.3.7.5)をインストールしましたが、Windows 10 バージョン 2004以上の方は、Stableバージョンで有効化できるでしょう。
インストール後にDocker Desktopを起動すると、WSL2を有効化するかどうかのダイアログが表示されますので、「Enable WSL2」をクリックします(図2)。

図2. Docker DesktopのWSL2有効化ダイアログ

Docker Desktopの設定画面からもWSL2を有効化できます。Settings → General の「Use the WSL 2 based engin」にチェックが入っていれば、バックエンドとしてWSL2を利用します(図3)。

図3. Docker Desktopの設定画面

 

導入手順3. Node.jsをインストールする

wp-envは、Node.jsのパッケージのため、wp-envの前にNode.jsをインストールする必要があります。 こちらもMicrosoft公式の手順に従います。
Node.jsはプロジェクト毎に異なるバージョンを利用することがありますので、直接入れるのではなくバージョンマネージャーを利用しましょう。 WSL2(Ubuntu)を起動しリスト5のコマンドをコピー&ペーストしてNVMおよびNode.jsをインストールします。

# デフォルトでインストールされているNode.jsは削除する
apt-get purge --auto-remove nodejs
# NVMをインストールする
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
# LTSリリース版のNode.jsをインストールし、切り替える
nvm install --lts

リスト5: NVMおよびNode.jsのインストール

 

導入手順4. wp-envをインストールする

最後にwp-envをインストールします。 手順はWordPress公式の手順に従います。
WSL2(Ubuntu)を起動し、リスト6のコマンドをコマンドをコピー&ペーストしてwp-envをインストール&WordPressを起動してください。

# 作業ディレクトリを作成
mkdir wpenv_sample && cd wpenv_sample
# wp-envをグローバルインストール
npm -g i @wordpress/env
# WordPressを実行
wp-env start

リスト6: wp-envのインストールとWordPressの起動

ブラウザから http://localhost:8888 を開くとWordPressの画面が表示されることが確認できます。
また、Docker Desktopを起動すると、コンテナ一覧画面にWordPressのコンテナが2つ(1つはテスト用)、Mysqlのコンテナが1つ起動していることが確認できます(図4)。

図4. Docker DesktopでWordPressとMysqlのコンテナが起動していることを確認

wp-envの設定は.wp-env.json で変更でき、WordPressのバージョンやpluginやテーマ等をを任意のものにカスタマイズできます。お好みのエディタ※で.wp-env.json を作成し、リスト7の内容での内容で保存してください。

{
    "core": "https://ja.wordpress.org/wordpress-5.3.4-ja.zip"
}

リスト7: .wp-env.jsonで任意のバージョンのWordPressを指定する例

.wp-env.json の内容をDockerに反映させるには、WSL2(Ubuntu)のターミナルからリスト8のコマンドを入力してください。

wp-env start --update

リスト8: .wp-env.jsonの内容をDockerに反映

http://localhost:8888/wp-login.php にアクセスして管理画面にログイン(ユーザー名:admin、パスワード: password)すると、WordPressのバージョンが.wp-wnd.jsonで指定した5.3.4になっていることが確認できます。

※VS Codeを利用する場合は、リモート WSL 拡張機能をインストールすると直接WSL2のファイルを編集できたり、ターミナルからUbuntuが起動できるため、利便性が向上します。詳細は公式サイトの情報を参照してください。

まとめ

今回は、WSL2上でDockerを動かし、さらにwp-envでWordPress環境をする手順を紹介しました。 WSL2やwp-envに関する情報はまだ少ないため、導入に苦労する方が多いのではないでしょうか。本稿がその一助となれば幸いです。 今後、Windows上での開発はWSL2を利用するのが主流になっていきます。 WSL2はGPU(CUDA)にも対応し、AI開発基盤としても利用できるため、早めの導入をおすすめします。
次回はWordMoveを用いたWordPressの各環境間の同期方法について書きたいと思います。

コラム執筆

渡邊 賢二
SIer出身のLinuxエンジニア。2014年10月にメンバーズに中途入社し、現在はWordPressなどの構築案件を担当。