WSL（Linux 用 Windows サブシステム）でお気楽 Web 開発～Windows 上に WordPress テーマ/プラグイン開発環境～

2021年11月5日2022年8月22日Staff Note

Web 開発者の皆さん、こんにちは！

前回（WSLでお気楽Web開発～Windows上でLinux 仮想環境～）では、Windows 上で Linux仮想環境を簡単に構築できる「Linux用Windows サブシステム」を使い、Ubuntu環境を構築して、Apache Web サーバーと PHP のインストールを行いました。

今回は、更に進めて MariaDB、PhpMyadmin をインストールして、WordPress を構築してみたいと思います。

Windows上でWordPressが動くのは不思議な感じがしますね。でも、そのことで FTP等でいちいち Linuxサーバーに作成中のファイルを同期すること無く、 Windowsのパワフルな開発ツールで直接、WordPressテーマやプラグインの開発が可能となります。

では早速MariaDBのインストールから手順を説明して行きたいと思います。

1. MariaDB インストールと初期設定
2. MariaDB上にデータベースとデータベースユーザー作成
3. PhpMyAdmin インストール
4. WordPress インストール

MariaDB インストールと初期設定

MariaDB インストール

tech@DIGIROCK-PC:~$ sudo apt update

※）パスワードを聞かれたら、一般ユーザー名「tech」のパスワードを入力

tech@DIGIROCK-PC:~$ sudo apt install mariadb-server

※）Yes/No を聞かれたら y
MariaDB 起動

tech@DIGIROCK-PC:~$ sudo service mysql start
MariaDB 初期設定

tech@DIGIROCK-PC:~$ sudo mysql_secure_installation

※）MariaDB の root パスワード設定等、初期設定を行う。以下、表示される説明を読み、設定項目を入力していく。

Enter current password for root (enter for none):

※）最初はDBのrootユーザーのパスワードは無いので何も入力せずに Enter キー

Set root password? [Y/n] y

※）DBのrootユーザーのパスワードをセットしたいからy

New password:
Re-enter new password:

※）DBのrootユーザーのパスワードを入力

Remove anonymous users? [Y/n] y

※）匿名ユーザーでログインさせたくないからy

Disallow root login remotely? [Y/n] y

※）リモートからrootユーザーで繋がせたくないからy

Remove test database and access to it? [Y/n] y

※）testデータベースは不要だからy

Reload privilege tables now? [Y/n] y

※）いま設定した権限をリロードしてほしいからy

All done! If you've completed all of the above steps, your MariaDB
installation should now be secure.
Thanks for using MariaDB!
tech@DIGIROCK-PC:~$

※）上記が表示されたら初期設定完了！

以上で MariaDB の初期設定が終わりました。
少し大変ですね。
しかし、安全に環境を構築するには避けられない手順です。

次に、MariaDB 上に WordPress から使用するデータベースとデータベースユーザーを作成します。

MariaDB上にデータベースとデータベースユーザー作成

MariaDB 一般ユーザー用データベース作成（データベース名：tech の場合）

tech@DIGIROCK-PC:~$ sudo mysql -u root -p
Enter password:

※）MariaDB インストール後に設定した MariaDB の root ユーザーのパスワードを入力

MariaDB [(none)]> CREATE DATABASE tech CHARACTER SET utf8mb4;
MariaDB [(none)]> SHOW DATABASES;

※）データベース「tech」があれば成功

MariaDB [(none)]> quit

※）MariaDB から抜ける
MariaqDB 一般ユーザー作成（ユーザー名：tech パスワード：digirock の場合）

tech@DIGIROCK-PC:~$ sudo mysql -u root -p
Enter password:

※）MariaDB インストール後に設定した MariaDB の root ユーザーのパスワードを入力

MariaDB [(none)]> CREATE USER tech@localhost;
MariaDB [(none)]> GRANT ALL PRIVILEGES ON tech.* TO tech@localhost IDENTIFIED BY 'digirock';
MariaDB [(none)]> FLUSH PRIVILEGES;
MariaDB [(none)]> SELECT user, host, password FROM mysql.user;

※）ユーザー名「tech」があれば成功

MariaDB [(none)]> quit

※）MariaDB から抜ける

以上です。
MariaDB（あるいは MySQL）と SQL 文について、ある程度の知識が無いとわけが分からないかもしれませんが、慣れればそれほど苦労しない内容かと思います。

さて、前回（WSLでお気楽Web開発～Windows上でLinux 仮想環境～）最後に

Apache と PHP-FPM は Ubuntu ターミナルを立ち上げただけでは自動では起動しない
Apache と PHP-FPM は Ubuntu ターミナルを閉じただけでは自動では終了しない

ことを説明しました。MariaDB も同様となりますので、

Ubuntu ターミナルに入った直後

tech@DIGIROCK-PC:~$ sudo service php7.4-fpm start
tech@DIGIROCK-PC:~$ sudo service apache2 start
tech@DIGIROCK-PC:~$ sudo service mysql start
ubuntu ターミナルを閉じる前

tech@DIGIROCK-PC:~$ sudo service php7.4-fpm stop
tech@DIGIROCK-PC:~$ sudo service apache2 stop
tech@DIGIROCK-PC:~$ sudo service mysql stop

と手動で実行する必要があります。
自動化する手順は、やはり「.bashrc」と「.bash_logout」ファイルに手を加えます。
エクスプローラーで「\\wsl$\Ubuntu\home\tech」を参照、「.bashrc」をテキストエディターにて開いて下記を最後尾に追加

# PHP Apace2 起動
/usr/bin/sudo /usr/sbin/service php7.4-fpm start
/usr/bin/sudo /usr/sbin/service apache2 start
/usr/bin/sudo /usr/sbin/service mysql start
エクスプローラーで「\\wsl$\Ubuntu\home\tech」を参照、「.bash_logout」をテキストエディターにて開いて下記を一行目以下に挿入

# PHP Apace2 停止
/usr/bin/sudo /usr/sbin/service php7.4-fpm stop
/usr/bin/sudo /usr/sbin/service apache2 stop
/usr/bin/sudo /usr/sbin/service mysql stop

※）Ubuntu ターミナルを抜けるときは、必ず「exit」コマンドで抜ける必要があります。Ubuntu ターミナルウィンドウの「X」で閉じたときは自動停止されません。

さて、だいぶ環境も整ってきました。

ここまで来ればいよいよ WordPress をインストール可能な状態になっています。

しかし、使われる方も多いかと思いますので、PhpMyAdmin のインストール方法を先に説明いたします。必要無い方は飛ばしていただいも大丈夫です。
注）PhpMyAdmin には、IP アドレスさえ分かれば同一ネットワークからアクセス可能になります。Ubuntu を立ち上げている間は公共の WiFi 等、不特定多数が使うネットワークに接続するのを避けるか、どうしても必要な場合はデータベースへの接続パスワードを十分に複雑なものを設定することをお勧めします。

PhpMyAdmin インストール

PhpMyAdmin をインストールする

tech@DIGIROCK-PC:~$ sudo apt install phpmyadmin
インストール中に実行している Web サーバーを聞かれるので、「apache」を選択（Space キー）
タブキーで「了解」ボタンにフォーカスを移し、Enter キーで選択完了
dbconfig-comon コマンドで　MariaDB のインストールなどを行うか聞かれるが、既に済ませてあるので「いいえ」を選択（右矢印キー）
Enter キーで選択完了
インストール完了後、Web ブラウザで http://localhost/phpmyadmin/ にアクセスして、PhpMyAdmin が表示されればインストール成功

※）先ほど作成したデータベース一般ユーザー(tech)でログインできるか確認！

お疲れさまです。

やっと WordPress をインストール出来る環境が整いました。早速インストール手順を説明いたします。

WordPress インストール

https://ja.wordpress.org/download/ でインストールパッケージの URL を確認（https://ja.wordpress.org/latest-ja.tar.gz）
WordPress インストールパッケージのダウンロード、展開

tech@DIGIROCK-PC:~$ cd public_html/
tech@DIGIROCK-PC:~/public_html$ wget --no-check-certificate https://ja.wordpress.org/latest-ja.tar.gz
tech@DIGIROCK-PC:~/public_html$ ls -l
合計 15488
-rw-r--r-- 1 tech tech 101 9月 30 03:23 index.html
-rw-r--r-- 1 tech tech 15832111 9月 11 01:00 latest-ja.tar.gz
-rw-r--r-- 1 tech tech 23 9月 30 03:42 phpinfo.php
tech@DIGIROCK-PC:~/public_html$ tar zxvf latest-ja.tar.gz
tech@DIGIROCK-PC:~/public_html$ ls -l
合計 15488
-rw-r--r-- 1 tech tech 101 9月 30 03:23 index.html
-rw-r--r-- 1 tech tech 15832111 9月 11 01:00 latest-ja.tar.gz
-rw-r--r-- 1 tech tech 23 9月 30 03:42 phpinfo.php
drwxr-xr-x 1 tech tech 512 9月 11 01:00 wordpress
wordpress ディレクトリを apache から書き込み可に

tech@DIGIROCK-PC:~$ ls -l public_html/
合計 15488
-rw-r--r-- 1 tech tech 101 9月 30 03:23 index.html
-rw-r--r-- 1 tech tech 15832111 9月 11 01:00 latest-ja.tar.gz
-rw-r--r-- 1 tech tech 23 9月 30 03:42 phpinfo.php
drwxr-xr-x 1 tech tech 512 9月 11 01:00 wordpress
tech@DIGIROCK-PC:~$ chmod 707 public_html/wordpress
tech@DIGIROCK-PC:~$ ls -l public_html/
合計 15488
-rw-r--r-- 1 tech tech 101 9月 30 03:23 index.html
-rw-r--r-- 1 tech tech 15832111 9月 11 01:00 latest-ja.tar.gz
-rw-r--r-- 1 tech tech 23 9月 30 03:42 phpinfo.php
drwx---rwx 1 tech tech 512 10月 2 18:26 wordpress

※）http://localhost/wordpress/ にアクセスして WordPress インストール画面が表示されれば成功
WordPress インストールを進め、完了させる
エクスプローラーで「\\wsl$\Ubuntu\home\tech\public_html」にアクセス。「wordpress」ディレクトリができていることを確認
不要な「latest-ja.tar.gz」を、エクスプローラーから削除する