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」を、エクスプローラーから削除する

長かったですが、WordPress のインストールが済んでテーマ、プラグイン開発などを好きな開発環境で開発できるようになりました。
下記の例は Widnows 版 Visual Studio Code で「Hello_Dolly」プラグインを開いてみた様子です。

この記事が皆様の素晴らしいサイト開発のお役の一助となれば幸いです。

注１）Ubuntu アプリを Windows よりアンインストールすると、全てのデータは破棄されてしまいますので、アンインストールは必要に応じてバックアップを取ってから行う必要があります。

▽キャンペーン開催中！

コアサーバーでは、V2プランとドメインの同時申し込みで
ドメインが実質0円（年間最大3,882円お得）になるサーバーセット割特典、
V2プランが初期費用無料・15％OFF（月額390円→331円）ブラックフライデーセールを展開中です。

是非、お得なこの機会にご利用ください！
最新のキャンペーンはこちらから

Posted by admin-dev