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

2021年11月12日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のインストールから手順を説明して行きたいと思います。

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 キー

    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上にデータベースとデータベースユーザー作成

  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 文について、ある程度の知識が無いとわけが分からないかもしれませんが、慣れればそれほど苦労しない内容かと思います。

さて、前回(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 インストール

  1. PhpMyAdmin をインストールする

    tech@DIGIROCK-PC:~$ sudo apt install phpmyadmin
  2. インストール中に実行している Web サーバーを聞かれるので、「apache」を選択(Space キー)

  3. タブキーで「了解」ボタンにフォーカスを移し、Enter キーで選択完了

    phpmyadmin設定

  4. dbconfig-comon コマンドで MariaDB のインストールなどを行うか聞かれるが、既に済ませてあるので「いいえ」を選択(右矢印キー)

  5. Enter キーで選択完了

    phpmyadmin設定

  6. インストール完了後、Web ブラウザで http://localhost/phpmyadmin/ にアクセスして、PhpMyAdmin が表示されればインストール成功

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

お疲れさまです。

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

WordPress インストール

  1. https://ja.wordpress.org/download/ でインストールパッケージの URL を確認(https://ja.wordpress.org/latest-ja.tar.gz)

  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/wordpress/ にアクセスして WordPress インストール画面が表示されれば成功

    Wordpressインストール画面1

  4. WordPress インストールを進め、完了させる

    Wordpresインストール画面2

  5. エクスプローラーで「\\wsl$\Ubuntu\home\tech\public_html」にアクセス。「wordpress」ディレクトリができていることを確認

  6. 不要な「latest-ja.tar.gz」を、エクスプローラーから削除する

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

Hello_Dollyプラグイン

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

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

Posted by admin-dev


service

Value Domain
ドメイン取得&レンタルサーバーなら
Value Domain
ドメイン登録実績600万件を誇るドメイン取得・管理サービスと、高速・高機能・高品質なレンタルサーバーや、SSL証明書などを提供するドメイン・ホスティング総合サービスです。