Windows 10 + WSL 2 + AlmaLinux 9 の環境で wp-env 環境を構築する方法

アドベントカレンダー参加中!

この記事は「Vektor WordPress Solutions Advent Calendar 2022」の12月19日の記事になります。

【この記事について】

  • Windows 10 + WSL 2 + AlmaLinux 9 の環境で wp-env 環境を構築する方法について書きます。
  • 実際に Windows 10 のバージョン 22H2 をクリーンインストールしてから Windows Update をした状態からの解説となります。
  • 実際に試す前に Windows 10 のバージョン 22H2 を適用しその後で Windows Update を済ませておいてください。

こんにちは。お久しぶりです。DRILL LANCER です。株式会社ベクトルに正式に入社してから2年半が経過しようとしています。

実は他の皆は Macintosh を使っていて最近は M1 とか M2 が搭載されたモデルを使っている方が多いようですが、私は頑なに Intel CPU が搭載された Windows を使っています。

なぜなら Macintosh をなんとなくぼったくり価格に感じてしまうのと別に Macintosh でなくても Linux や Unix に互換性のある OS を使えばなんでも OK なのではないかと感じているからです。

(Macintosh より Windows のほうが対応しているゲームも多いし、Windows 1台で済むならそれに越したことはないよね?)

なので、wp-env を使った WordPress の開発は別に Macintosh でなくてもよいし、Apple が見捨てた Intel の CPU が積まれたデスクトップ PC やノート PC でも可能ということをお伝えします。

開発に Macintosh が好まれる理由について個人的に考察

WordPress に限らず開発する際は Node.js や Composer といったパッケージ管理ツールを使ったりすると思います。

どれだけそれらのパッケージ管理ツールでパッケージをインストールするかにもよりますが場合によっては数百・数千、もっといえば数万のファイルを開発ディレクトリにインストールします。

パッケージ管理ツールでインストールする際はネットの速度に依存することもありあまり気にならないのですが、なにかの手違いでパッケージ管理ツールでインストールしたものを削除する際にかなりの時間を要します。

その待ち時間は結構長く人によってはストレスが溜まることもあるかもしれません。

これは Windows が採用している NTFS と呼ばれるファイルシステムの Windows の宿命であり Windows を使い続ける限り逃れることはできません。

しかし、Linux や Unix に近い Macintosh ならそのようなことがありません。

世の中に出回る PC はほぼ Windows か Macintosh の2択といってもいいので (最近は Chrome OS とか Firefox OS とかもあるみたいだけど・・・) Windows がだめなら Macintosh という流れでそうなったのではと個人的に考察します。

しかし、最近 Windows 10 から Windows Subsystem for Linux (以下 WSL)というものを導入し、CUI レベルなら十分使えるレベルの Linux が Windows に搭載されました。

Linux なので Windows のように多数のファイルを削除するときに時間がかかるということもなく快適に作業できます。

また、Windows 上の Visual Studio Code から WSL 上のファイルを編集する機能もあるので非常に便利です。

なので、今回は Windows Subsystem for Linux を使って AlmaLinux 9 を導入しその中で wp-env が動く環境を構築していきます。

WSL の導入方法

WSL を導入手順は以下のとおりです。

【手順01】スタートメニュー > Windows ツール > コントロールパネル と進み「コントロールパネル」を起動します。

【手順02】コントロールパネルが起動したら「プログラム」をクリックします。

【手順03】画面が切り替わったら「Windows の機能の有効化または無効化」をクリックします。

【手順04】「Linux 用 Windows サブシステム」と「仮想マシンプラットフォーム」にチェックを入れて「OK」をクリックします。

【手順05】諸々の処理が終わったあと再起動するかどうか聞かれるので再起動します。

【手順06】再起動したら Windows Update を行います。

【手順07】Microsoft Store を起動し「Windows Subsystem for Linux」をインストールします。

【手順08】「コマンドプロンプト」か「Windows Powershell」を管理者権限で実行し下記コマンドを入力し Enter を押します。

wsl --set-default-version 2

上記は WSL に新たに Linux を導入したとき WSL のバージョン2で処理を行うという設定です。

特に理由もない限りバージョン2に設定することをおすすめします。

以上で WSL 上に OS を導入する準備は完了です。

WSL 上に AlmaLinux 9 を導入

Linux といえば Ubuntu が最初に思い浮かぶ方が多いと思います。しかし、サーバーでは以前は Cent OS という Linux を使っていました。

しかし、最近 Cent OS が最近サポートを終了したためその後継を何にするかという話になり Cent OS と互換性のある Linax では AlmaLinux と Rocky Linux の2つが主にその後継と利用しているところが多いようです。

なので、今回は Ubuntu ではなくほぼ半分のサーバーで使われるであろう AlmaLinux を WSL に導入します。( WSL 用の Rocky Linux の安定版はまだリリースされていないようです)

それでは WSL 上に AlmaLinux 9 を導入する手順を紹介します。

【手順01】Microsoft Store を起動し「AlmaLinux 9」をインストールします。

【手順02】AlmaLinux 9 を起動します。

【手順03】AlmaLinux 9 を起動後しばらくすると AlmaLinux 9 の黒い画面に下記のように表示されます。以降特に何も書かれていない場合はこの黒い画面が入力対象です。

Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username:

この画面が表示されたらユーザー名を半角英数字とハイフンで入力して Enter キーを押します。

【手順04】ユーザー名を入力すると次はパスワードの入力を求められるのでパスワードを入力して Enter キーを押します。

Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: drill-lancer
Changing password for user drill-lancer.
New password:

【手順05】もう一度パスワードを入力するように求められるので先ほどと同じパスワードを入力して Enter キーを押します。

Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: drill-lancer
Changing password for user drill-lancer.
New password:
Retype new password:

【手順06】その後しばらくして下記のように表示されます。

Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: drill-lancer
Changing password for user drill-lancer.
New password:
Retype new password:
passwd: all authentication tokens updated successfully.
Installation successful!
[drill-lancer@DESKTOP-B2GUB2F:~]$

【手順07】上記のように表示されたら下記コマンドを押して Enter を押します。

sudo dnf update -y && sudo dnf upgrade -y

Enter を入力したら更新処理が始まるので終わるまでお待ち下さい。

【手順08】手順07 の処理が終わったら下記コマンドを入力し Enter キーを押します。

sudo vi /etc/wsl.conf

vi というエディタが立ち上がります。

【手順09】vi というエディタが立ち上がったら下記手順を実行してください。

  • i を押して編集モードに切り替え
  • 下記コードをコピーして黒い画面に貼り付け
  • しっかり貼り付けされているか確認
  • ESC キーを押したあと :wq と入力して Enter キーを押す。

上記②で貼り付けるコードは下記のとおりです。

[boot]
systemd=true

[interop]
appendWindowsPath=false

上記設定は私の好みの設定なので他にも設定項目はあります。詳しくは /etc/wsl.conf の設定を御覧ください。

【手順10】 AlmaLinux 9 の黒い画面ではなく「コマンドプロンプト」か「Windows Powershell」を実行し下記コマンドを入力し Enter を押します。

wsl --shutdown

以上で WSL に AlmaLinux を導入する手順は終了です。

WSL 上の AlmaLinux 9 に PHP 8.1 を導入

wp-env を使うだけなら PHP は不要ですが、実際に開発する際には PHP が関係する WP-CLI や Composer は欠かせないので今回は導入しておきます。

これから、WSL 上の AlmaLinux 9 に PHP を導入します。バージョンは新しすぎず古すぎずという点から 8.1 の最新版を選択しました。

【手順01】AlmaLinux 9 の黒い画面に下記コマンドを入力して Enter キーを押します。以降特に何も書かれていない場合はこの黒い画面が入力対象です。

sudo dnf install -y \
    https://dl.fedoraproject.org/pub/epel/epel-release-latest-9.noarch.rpm \
    https://dl.fedoraproject.org/pub/epel/epel-next-release-latest-9.noarch.rpm \
    https://rpms.remirepo.net/enterprise/remi-release-9.rpm 

このコマンドを入力することによって 最新の PHP をインストールできるようになります。

【手順02】下記コマンドを入力して Enter キーを押します。

sudo dnf -y module enable php:remi-8.1

このコマンドを入力することによって PHP の 8.1 とそれに関するモジュールをインストールできるようになります。

【手順03】下記コマンドを入力して Enter キーを押します。

sudo dnf install -y php composer

このコマンドを入力することで PHP とそれに対応した Composer をインストールできます。

以上で WSL 上の AlmaLinux 9 に PHP 8.1 を導入する手順は完了です。

WSL 上の AlmaLinux 9 に WP-CLI を導入

wp-env を使うだけなら PHP は不要ですが、実際に開発する際には WP-CLI も欠かせないので導入しておきます。

それでは導入手順です。

【手順01】AlmaLinux 9 の黒い画面に下記コマンドを入力して Enter キーを押します。以降特に何も書かれていない場合はこの黒い画面が入力対象です。

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

このコマンドを入力することで wp-cli.phar がホームディレクトリにダウンロードされます。

【手順02】下記コマンドを入力して Enter キーを押します。WP-CLI の phar ファイルが動作するかの確認になります。

php wp-cli.phar --info

この記事の上から順番に実行しつつ一切の失敗がない場合は下記のように表示されると思います。

OS:     Linux 5.15.79.1-microsoft-standard-WSL2 #1 SMP Wed Nov 23 01:01:46 UTC 2022 x86_64
Shell:  /bin/bash
PHP binary:     /usr/bin/php
PHP version:    8.1.13
php.ini used:   /etc/php.ini
MySQL binary:
MySQL version:
SQL modes:
WP-CLI root dir:        phar://wp-cli.phar/vendor/wp-cli/wp-cli
WP-CLI vendor dir:      phar://wp-cli.phar/vendor
WP_CLI phar path:       /home/drill-lancer
WP-CLI packages dir:
WP-CLI cache dir:       /home/drill-lancer/.wp-cli/cache
WP-CLI global config:
WP-CLI project config:
WP-CLI version: 2.7.1

【手順03】下記コマンドを入力して Enter キーを押します。

chmod +x wp-cli.phar && sudo mv wp-cli.phar /usr/local/bin/wp

このコマンドを入力すると wp と打つだけで WP-CLI が使えるようになります。

【手順04】下記コマンドを入力して Enter キーを押します。wp コマンドが動作するかの確認になります。

wp --info

この記事の上から順番に実行しつつ一切の失敗がない場合は下記のように表示されると思います。

OS:     Linux 5.15.79.1-microsoft-standard-WSL2 #1 SMP Wed Nov 23 01:01:46 UTC 2022 x86_64
Shell:  /bin/bash
PHP binary:     /usr/bin/php
PHP version:    8.1.13
php.ini used:   /etc/php.ini
MySQL binary:
MySQL version:
SQL modes:
WP-CLI root dir:        phar://wp-cli.phar/vendor/wp-cli/wp-cli
WP-CLI vendor dir:      phar://wp-cli.phar/vendor
WP_CLI phar path:       /home/drill-lancer
WP-CLI packages dir:
WP-CLI cache dir:       /home/drill-lancer/.wp-cli/cache
WP-CLI global config:
WP-CLI project config:
WP-CLI version: 2.7.1

以上で WSL 上の AlmaLinux 9 に WP-CLI を導入する手順は完了です。

WSL 上の AlmaLinux 9 に Node.js の管理ツール Volta を導入

Node.js は wp-env を使う際に必要なモジュールを管理するためのツールです。しかし、プロジェクトによって使われている Node.js のバージョンはまちまちであるため、複数のバージョンの Node.js を扱える管理ツールは必須です。

Node.js の管理ツールはいくつかあるのですが今回はその中から1つ選んで Volta を導入します。

以下導入手順です。

【手順01】AlmaLinux 9 の黒い画面に下記コマンドを入力して Enter キーを押します。以降特に何も書かれていない場合はこの黒い画面が入力対象です。

curl https://get.volta.sh | bash && source ~/.profile

こうすることで AlmaLinux 9 に Volta が導入され volta コマンドで実行できるようになります。

【手順02】下記コマンドを入力して Enter キーを押します。

volta install node

このコマンドを入力することで最新の安定版の Node.js がインストールできます。

以上で WSL 上の AlmaLinux 9 に Volta と安定板の Node.js を導入手順は終了です。

WSL 上の AlmaLinux 9 に Docker を導入

Docker は wp-env を使う際に必要なプログラムの1つです。それでは導入していきましょう。

【手順01】AlmaLinux 9 の黒い画面に下記コマンドを入力して Enter キーを押します。以降特に何も書かれていない場合はこの黒い画面が入力対象です。

sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

このコマンドを実行することで dnf コマンドで Docker をインストールできるようになります。

【手順02】下記コマンドを入力して Enter キーを押します。

sudo dnf install -y docker-ce

このコマンドを実行することで Docker がインストールされます。

【手順03】下記コマンドを入力して Enter キーを押します。この操作は「WSL 上に AlmaLinux 9 を導入」の手順10を行っていないとうまくいきません。

sudo systemctl enable docker

問題なく実行できた場合、次回以降 WSL 上の AlmaLinux 9 で docker が自動起動するようになります。

【手順04】下記コマンドを入力して Enter キーを押します。

sudo usermod -aG docker $USER

このコマンドを実行することで sudo なしで Docker のコマンドが実行できるようになります。

【手順05】下記コマンドを入力して Enter キーを押します。

sudo curl -SL https://github.com/docker/compose/releases/download/v2.6.1/docker-compose-linux-x86_64 -o /usr/local/bin/docker-compose

このコマンドを入力することで docker-compose が /usr/local/bin/ にダウンロードされます。docker-compose の v2.6.1 は執筆当時の最新版です。

【手順06】下記コマンドを入力して Enter キーを押します。

sudo chmod +x /usr/local/bin/docker-compose

このコマンドを実行することで docker-compose を実行できるようになります。

【手順07】 AlmaLinux 9 の黒い画面ではなく「コマンドプロンプト」か「Windows Powershell」を実行し下記コマンドを入力し Enter を押します。

wsl --shutdown

【手順08】AlmaLinux 9 を再び起動しその画面上で下記コマンドを入力して Enter キーを押します。

docker --version

これは docker コマンドが動作するか、sudo なしで実行可能かの確認にあたります。下記のように表示されれば OK です。

Docker version 20.10.21, build baeda1f

【手順09】下記コマンドを入力して Enter キーを押します。

docker-compose --version

これは docker-compose コマンドが動作するか確認にあたります。下記のように表示されれば OK です。

Docker Compose version v2.6.1

以上で WSL 上の AlmaLinux 9 に Docker を導入する手順は完了です。

Windows 10 に Visual Studio Code をインストール

wp-env を起動するための AlmaLinux 9 上の作業は済みました。黒い画面上で vi とか vim を使って行うのもありですが効率を考えるとやっぱり Windows 上で操作したいです。

なので今から Windows 10 に Visual Studio Code を導入し WSL と連携する手順を紹介します。

【手順01】Visual Studio Code の公式サイトを訪問します。

【手順02】「Download for Windows Stable Build」 をクリックして Visual Studio Code をダウンロードします。

【手順03】Visual Studio Code のダウンロードが完了したらインストーラーを実行します。

【手順04】下記画面で「同意する」を選択し「次へ」をクリックします。

【手順05】Visual Stadio Code のインストール先を指定します。

  • インストール先を変更しない場合はそのまま、「次へ」をクリックします。
  • インストール先を変更する場合は「参照」を押してインストール先を指定したあとで「次へ」をクリックします。

【手順06】スタートメニューに追加する場所を設定します。

  • 特にこだわりがない場合はそのまま「次へ」を押します。
  • スタートメニューでのアイコンの配置にこだわる方は「参照」を押して配置先を決めたあと「次へ」を押します。
  • スタートメニューにフォルダを追加しない場合は「スタートメニューにフォルダを追加しない」にチェックを入れたあとで「次へ」を押します。

【手順07】インストール時の追加タスクを選択します。全てにチェックをいれることをおすすめします。チェックを入れてから「次へ」を押します。

【手順08】インストール直前の確認画面が表示されます。

  • 特に問題がなければ「インストール」をクリックします。
  • 変えたい設定があればその部分を編集できる画面が表示されるまで「戻る」を押してから設定を変更し設定を確認しながら「次へ」を押してこの画面に戻ります。

【手順09】インストール処理が実行され、終了後下記画面が表示されます。「Visual Stadio Code を実行する」にチェックを入れてから「完了」を押します。

以上で Visual Studio Code のインストール作業が終了し Visual Studio Code が起動します。

Visual Studio Code と WSL を連携

これから Visual Studio Code と WSL を連携する作業を行います。あらかじめ Visual Studio Code が起動した状態にしておいてください。

それでは手順に入ります。

【手順01】赤い四角で囲った部分をクリックします。

【手順02】画像のように検索欄に「wsl」と入力し赤枠で囲った「wsl」の「Install」ボタンをクリックします。

【手順03】同じように検索欄に「japanese」と入力し「Japanese Language Pack for Visual Studio Code」もインストールします。

【手順04】Visual Stadio Code を再起動して日本語表示するか聞かれるので「Change Language and Restart」をクリックします。

VS Code が再起動して日本語表示になれば WSL と Visual Studio Code の連携作業は終了です。

WSL 上の AlmaLinux に wp-env を導入

これから、WSL 上の AlmaLinux に wp-env を導入し動作確認を行うのですが、Visual Studio Code では WSL にインストールされた AlmaLinux 9 のターミナルが操作可能なので以降の作業は Visual Studio Code で行います。

あらかじめ Visual Studio Code を起動しておいてください。Visual Studio Code を起動した状態からの手順は以下の通りです。

【手順01】画像の赤枠で囲った部分をクリックします。

【手順02】「WSL でフォルダを開く」をクリックします。

【手順03】フォルダの選択画面が表示されるので「home」⇒「ユーザー名」とダブルクリックします。

【手順04】「新しいフォルダ」をクリックし「test」という名前のフォルダを作成します。

【手順05】「test」を選択した状態で「フォルダを選択」をクリックします。

【手順06】下記のような警告が表示されたら下記のようにします。

  • 「親フォルダ 'ユーザー名' 内のすべてのファイル作成者を信頼します」にチェックを入れる
  • 「はい、作成者を信頼します・フォルダを信頼してすべての機能を有効にする」をクリックする

【手順07】画像の赤枠で囲った部分をクリックすると新規ファイルが作成できます。

【手順08】上記を利用して「test.php」というファイル名を作成し、内容は下記の通りにし保存します。

<?php
/**
 * Plugin Name:       TEST
 * Plugin URI:
 * Description:
 * Author:
 * Author URI:
 * Version:
 * Text Domain:       test
 * Domain Path:       /languages/
 * License:           GPLv2 or later (license.txt)
 * Requires PHP:      7.4
 * Requires at least: 5.8
 *
 * @package TEST
 */

【手順09】同様に「.wp-env.json」を作成し、内容は下記の通りにし保存します。

{
    "core": null,
    "plugins": [
        "."
	],
	"config": {
		"WP_DEBUG": true,
		"SCRIPT_DEBUG": true,
		"FS_METHOD": "direct"
	}
}

【手順10】2つのファイルが作成できたら画像の赤枠で囲んだ部分をクリックします。

【手順11】画像の赤枠で囲んだ部分をクリックします。

【手順12】画像のようにターミナル上で下記コマンドを打ちます。

wp-env start

【手順13】上記コマンドの処理が終わったあと Windows にインストールされたブラウザで http://localhost:8888 にアクセスすると WordPress のサイトが立ち上がります。

【手順14】現状だとプラグインの追加とかができない状態なので AlmaLinux 上で下記を実行します。

すると下記のように表示されホームディレクトリに .wp-env フォルダが存在することがわかります。

cd ~ && sudo chmod -R 777 .wp-env

【手順15】http://localhost:8888 にインストールされたサーバーで言語の変更やテーマ・プラグインが追加できるか確認します。

上記が確認できた時点でで wp-env の導入は終了です。

その他やっておきたいこと

現状では Windows 側でしか日本語翻訳があたっていないので WSL 側でも有効化しておくと良いでしょう。

方法は下記画像の手順どおりにクリックすれば OK です。

また、本格的に開発する場合は GitHub とかを使うこともあると思いますので AlmaLinux 9 上で下記コマンドで必要なものをインストールしておくと良いでしょう。

今回は下記の2つをインストールします。

  • git
  • openssh-server
sudo dnf install -y git openssh-server

まとめ

今回は下記のことを行いました。

  • Windows 10 に WSL と Visual Studio Code を導入
  • WSL に AlmaLinux 9 を導入
  • WSL 上の AlmaLinux 9 に最低限の開発環境を構築
  • Windows 上の Visual Studio Code と WSL 上の AlmaLinux 9 を連携して Windows から AlmaLinux 9 のファイルを操作可能にした
  • AlmaLinux 9 上に wp-env を導入して Windows 上のブラウザから http://localhost:8888 でアクセスできるようにした

環境構築手順は長くて煩雑でしたが AlmaLinux 9 上で行ったことはほぼ Macintosh 上でも行うことになるので難易度はあまり変わらないような気がします。

というわけで Windows でも wp-env を用いた WordPress 開発環境が構築できるということを示したあたりでこの記事を終わりたいと思います。

投稿者プロフィール

DRILL LANCER

Follow me!

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

コメントは日本語で入力してください。(スパム対策)

CAPTCHA