Windows上でWordPressテーマ/プラグイン開発環境を構築【WSL2でお気楽Web開発】
Web開発者の皆さん、こんにちは!
前回「Windows上でLinux仮想環境を構築【WSL2でお気楽Web開発】」では、Windows上でLinux仮想環境を簡単に構築できる「Linux用Windowsサブシステム」を使い、Ubuntu環境を構築して、Apache WebサーバーとPHPのインストールを行いました。
今回は、更に進めてMariaDB、PhpMyadminをインストールして、WordPressを構築してみたいと思います。
Windows上でWordPressが動くのは不思議な感じがしますね。でも、そのことでFTP等でいちいちLinuxサーバーに作成中のファイルを同期すること無く、Windowsのパワフルな開発ツールで直接、WordPressテーマやプラグインの開発が可能となります。
また、手元で開発が済んだテーマやプラグインをインターネット上での公開するなら、レンタルサーバーを使うと便利です。
特におすすめなのがコアサーバーです。トラフィックの増加やセキュリティのリスクにも対応しているので安心です。
ぜひレンタルサーバー最高クラスのコストパフォーマンスを誇るコアサーバーをご利用ください。
MariaDBインストールと初期設定
MariaDBのインストールから手順を説明して行きたいと思います。
インストールと初期設定
1.MariaDBインストール
tech@DIGIROCK-PC:~$ sudo apt update
※パスワードを聞かれたら、一般ユーザー名「tech」のパスワードを入力
tech@DIGIROCK-PC:~$ sudo apt install mariadb-server
※Yes/Noを聞かれたらy
2.MariaDB起動
tech@DIGIROCK-PC:~$ sudo service mysql start
3.MariaDB初期設定
tech@DIGIROCK-PC:~$ sudo mysql_secure_installation
※MariaDBのrootパスワード設定等、初期設定を行う。以下、表示される説明を読み、設定項目を入力していく。
Enter current password for root (enter for none):
※最初はDBのrootユーザーのパスワードは無いので何も入力せずにEnterキー
You already have your root account protected, so you can safely answer 'n'.
Switch to unix_socket authentication [Y/n] n
※MariaDB独自に管理者パスワードを設定した方がセキュリティが高くなるのでn
Change the 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から使用するデータベースとデータベースユーザーを作成します。
1.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から抜ける
2.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文について、ある程度の知識が無いとわけが分からないかもしれませんが、慣れればそれほど苦労しない内容かと思います。
サーバーの自動起動・停止設定
さて、前回Windows上でLinux仮想環境を構築【WSL2でお気楽Web開発】で
- ApacheとPHP-FPMはUbuntuターミナルを閉じただけでは自動では終了しない
- ApacheとPHP-FPMはUbuntuターミナルを立ち上げただけでは自動では起動しない
ことを説明しました。MariaDBも同様となります。
停止スクリプトと起動スクリプト設定
ubuntuターミナルを閉じる前
tech@DIGIROCK-PC:~$ sudo service php8.1-fpm stop
tech@DIGIROCK-PC:~$ sudo service apache2 stop
tech@DIGIROCK-PC:~$ sudo service mysql stop
Ubuntuターミナルに入った直後
tech@DIGIROCK-PC:~$ sudo service php8.1-fpm start
tech@DIGIROCK-PC:~$ sudo service apache2 start
tech@DIGIROCK-PC:~$ sudo service mysql start
と手動で実行する必要があります。
自動化する手順は、やはり「.bashrc」と「.bash_logout」ファイルに手を加えます。
エクスプローラーで「\wsl.localhost\Ubuntu\home\tech」を参照、「.bash_logout」をテキストエディターにて開いて下記を一行目以下に挿入。
# PHP Apace2 停止
/usr/bin/sudo /usr/sbin/service php8.1-fpm stop
/usr/bin/sudo /usr/sbin/service apache2 stop
/usr/bin/sudo /usr/sbin/service mysql stop
※Ubuntuターミナルを抜けるときは、必ず「exit」コマンドで抜ける必要があります。Ubuntu ターミナルウィンドウの「X」で閉じたときは自動停止されません。
エクスプローラーで「\wsl.localhost\Ubuntu\home\tech」を参照、「.bashrc」をテキストエディターにて開いて下記を最後尾に追加。
# PHP Apace2 起動
/usr/bin/sudo /usr/sbin/service php8.1-fpm start
/usr/bin/sudo /usr/sbin/service apache2 start
/usr/bin/sudo /usr/sbin/service mysql start
さて、だいぶ環境も整ってきました。
ここまで来ればいよいよWordPressをインストール可能な状態になっています。
しかし、使われる方も多いかと思いますので、PhpMyAdminのインストール方法を先に説明いたします。必要無い方は飛ばしていただいも大丈夫です。
PhpMyAdminインストール
1.PhpMyAdminをインストールする
tech@DIGIROCK-PC:~$ sudo apt install phpmyadmin
2.インストール中に実行しているWebサーバーを聞かれるので、「apache」を選択(Spaceキー)
3.タブキーで「了解」ボタンにフォーカスを移し、Enterキーで選択完了
4.dbconfig-comonコマンドでMariaDBのインストールなどを行うか聞かれるが、既に済ませてあるので「いいえ」を選択(右矢印キー)
5.Enterキーで選択完了
6.インストール完了後、Webブラウザでhttp://localhost/phpmyadmin/にアクセスして、PhpMyAdminが表示されればインストール成功
※先ほど作成したデータベース一般ユーザー(tech)でログインできるか確認!
お疲れさまです。
やっとWordPressをインストール出来る環境が整いました。
WordPressインストール
WordPressインストール手順を説明いたします。
1.以下のURLでインストールパッケージのURL(https://ja.wordpress.org/latest-ja.tar.gz)を確認
https://ja.wordpress.org/download/
2.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
3.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/~tech/wordpress/」にアクセスしてWordPressインストール画面が表示されれば成功
4.WordPressインストールを進め、完了させる
5.エクスプローラーで「\wsl.localhost\Ubuntu\home\tech\public_html」にアクセス。「wordpress」ディレクトリができていることを確認
6.不要な「latest-ja.tar.gz」を、エクスプローラーから削除する
長かったですが、WordPressのインストールが済んでテーマ、プラグイン開発などを好きな開発環境で開発できるようになりました。
下記の例はWidnows版Visual Studio Codeで「Hello_Dolly」プラグインを開いてみた様子です。
Ubuntuアプリを再インストール出来ない場合の対処法
以下は、Ubuntuアプリを再インストールした際に「error code: wsl/service/createinstance/mountvhd/hcs/error_file_not_found」と表示されてインストール出来ない場合の対処法です。
1.Ubutnuの起動エラーが表示されている場合は、何かキーを押して、終了します。
2.Windows PowerShellを起動します。
3.PowerShellで「wsl-l」を使って登録されているディストリビューションを取得します。
PS C:\Users\user> wsl -l
Linux 用 Windows サブシステム ディストリビューション:
Ubuntu (既定)
4.Ubuntuの登録を解除します。
PS C:\Users\user> wsl --unregister Ubuntu
登録解除。
この操作を正しく終了しました。
5.Ubuntuを起動して初期化処理を行います。
まとめ
今回の記事では、Windows上のWSL2環境でMariaDB、PhpMyAdmin、WordPressをインストールし、開発環境を整える手順を詳しく説明しました。
これにより、FTPなどを使わずにWindowsの開発ツールを直接利用して効率的にWeb開発ができるようになります。
また、手元で開発が済んだテーマやプラグインをインターネット上での公開するなら、レンタルサーバーを使うとさらに便利です。
特におすすめなのがコアサーバーです。トラフィックの増加やセキュリティのリスクにも対応しているので安心です。コストパフォーマンスの高いコアサーバーをぜひご利用ください。
この記事が皆様のWeb開発の一助となれば幸いです。
ドメインが実質0円(年間最大3,882円お得)になるサーバーセット割特典、
V2プランが初期費用無料・15%OFF(月額390円→331円)ブラックフライデーセールを展開中です。
最新のキャンペーンはこちらから
GMOデジロック インフラエンジニア
ボケもツッコミも下手な関西人。Windows98で動作するWebサーバーを使用した自宅サーバー構築から初めて、紆余曲折を経て今に至る。
▽登壇実績
https://ct-study.connpass.com/event/55305/
https://gmohoscon.connpass.com/event/102401/