WSL（Linux用Windowsサブシステム）でお気楽Web開発 ～Windows上でLinux 仮想環境～

2021年10月29日2022年8月22日Staff Note

こんにちは！
皆さんは Web 開発にどのような環境をお使いでしょうか。
開発専用に実サーバーを用意できるなら良いのですが、コストが掛かってしまうため、中々難しいこともあるかと思います。

Mac であれば、Apache 等 Web サーバーを Mac にインストールして……ということも出来ますが、実は Windows でも Windows 10 バージョン 2004 以降 (ビルド 19041 以降) 以降、及び発売されたばかりの Windows 11 であれば、簡単に Linux 仮想環境を Windows 上に用意することができます。今日はその手順を説明して行きたいと思います。

• 前提条件
  Windows10 バージョン2004以降(ビルド19041以降)またはWindows11
  Windowsにログインするユーザーが管理者権限を有すること
• 検証環境
  エディション Windows 10 Pro
  バージョン 21H1
  OS ビルド 19043.1266

Ubuntu 環境を用意する

これで Linux 仮想環境の準備は終了です。
簡単でしたね。

この後、早速 Web 開発環境を整えたい……ところですが、まずは Ubuntu を構成している各種パッケージを最新版にアップしておきましょう。

Ubuntu環境を最新版にする

1. パッケージデータベースを更新

   tech@DIGIROCK-PC:~$ sudo apt update

   ※）パスワードを聞かれたら　tech のパスワードを入力

2. アップデートがあるパッケージを一気に更新

   tech@DIGIROCK-PC:~$ sudo apt upgrade

   ※）Yes/No を聞かれたら「y」

次に、このままでは Ubuntu は英語環境なので、日本語環境に切り替え、ついでに man（各種コマンドのマニュアル）も日本語に切り替える手順を紹介します。
ここは好みの問題でもあるので、必要無い方は飛ばしていただいても結構です。

ロケール＆man ページ日本語化

1. ロケール日本語化

   tech@DIGIROCK-PC:~$ sudo apt install language-pack-ja
   tech@DIGIROCK-PC:~$ sudo update-locale LANG=ja_JP.UTF-8
   tech@DIGIROCK-PC:~$ exit

   ※）いったん Ubuntu のターミナル画面を閉じて開きなおします。

   tech@DIGIROCK-PC:~$ date
   2021年 10月 5日 火曜日 21:49:29 JST

   ※）↑日時が日本語で表示されれば完了！

2. man ページ日本語化

   tech@DIGIROCK-PC:~$ sudo apt install manpages-ja
   tech@DIGIROCK-PC:~$ man ls

   ※）↑適当に man ページを呼びだして日本語化されていれば完了！

さて、いよいよ Web サーバーである Apache をインストールし、Web 開発環境の土台を作ります。
そして、エクスプローラー他、Windows アプリからアクセスできる場所に Apache のドキュメントルートを変更します。
これにより、Windows のエディターアプリケーションや Dreamweaver や Visual Studio Code など好みのアプリケーションで直接ドキュメントルート以下のファイルを編集出来るようになります。

Apache インストール

1. Apache のインストール

   tech@DIGIROCK-PC:~$ sudo apt update

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

   tech@DIGIROCK-PC:~$ sudo apt install apache2

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

2. Apache の起動

   tech@DIGIROCK-PC:~$ sudo service apache2 status
   * apache2 is not running
   tech@DIGIROCK-PC:~$ sudo service apache2 start
   * Starting Apache httpd web server apache2
   [Tue Oct 03 21:52:58.916983 2021] [core:warn] [pid 943:tid 140673627327552] (92)Protocol not available: AH00076: Failed to enable APR_TCP_DEFER_ACCEPT

   ※）「AH00076」エラーが発生するがいったん無視

3. 動作確認のため Web ブラウザより「http://localhost/」にアクスする

   

4. Apache 起動時の「AH00076」エラーが気になる場合は apache2.conf に「#Fix AH00076」以下３行を最後尾に追記
   ※）ここでは vi を使っていますが、nano 等他のエディターでも可

   tech@DIGIROCK-PC:~$ sudo vi /etc/apache2/apache2.conf
   
   #Fix AH00076
   AcceptFilter http none
   AcceptFilter https none

Apache ドキュメントルート変更

1. ドキュメントルートとなるディレトクリを一般ユーザー名「tech」のホームディレクトリ内に作成

   tech@DIGIROCK-PC:~$ mkdir public_html
   tech@DIGIROCK-PC:~$ chmod 707 public_html

2. Apache に「userdir」モジュールを追加の上、設定ファイルにてドキュメントルートの設定を変更

   tech@DIGIROCK-PC:~$ sudo a2enmod userdir
   tech@DIGIROCK-PC:~$ sudo vi /etc/apache2/sites-available/000-default.conf
   DocumentRoot /var/www/html
   　　　　↓
   DocumentRoot /home/tech/public_html/
   
   ※）DocumentRoot の「tech」の部分は、設定した一般ユーザー名に置き換える
   

3. Apache 再起動により変更内容を適用

   tech@DIGIROCK-PC:~$ sudo service apache2 restart
   
   

4. Windows エクスプローラーで「\\wsl$\Ubuntu\home\tech\public_html」を開き、エディターなどで適当な内容の「index.html」を記述、保存

5. 動作確認のため Web ブラウザより「http://localhost/」にアクスする
   ※）作成した「index.html」の内容が表示されれば成功！

これで、エクスプローラーやエディターなど Windows のアプリから直接ドキュメントルート配下のファイルを編集し、即座に Web ブラウザから結果を確認出来るようになりました。
次は、Web 開発に欠かせない PHP をインストールする手順を紹介します。

PHP インストール

1. PHP と拡張モジュール（必要に応じて）をインストールする

   tech@DIGIROCK-PC:~$ sudo apt install php php-common php-cli php-fpm php-mysql php-dev php-mbstring php-zip

2. PHP-FPM を Apache に組み込む

   tech@DIGIROCK-PC:~$ sudo a2enmod proxy_fcgi
   tech@DIGIROCK-PC:~$ sudo a2enconf php7.4-fpm
   tech@DIGIROCK-PC:~$ sudo a2dismod php7.4

3. MPM_EVENT機能を有効にする

   tech@DIGIROCK-PC:~$ sudo a2dismod mpm_prefork
   tech@DIGIROCK-PC:~$ sudo a2enmod mpm_event

4. PHP-FPM サービス、及び Apache を再起動

   tech@DIGIROCK-PC:~$ sudo service php7.4-fpm start
   tech@DIGIROCK-PC:~$ sudo service apache2 restart

5. PHP 動作確認
   Windows エクスプローラーで「\\wsl$\Ubuntu\home\tech\public_html」を開き、下記内容の「phpinfo.php」を配置

   <?PHP
   phpinfo();
   ?>
   
   Webブラウザで「http://localhost/phpinfo.php」にアクスし、phpinfo ページが表示されれば成功！
   

これで Windows 上で PHP を使用したサイトの開発環境が整いました。
後はバリバリ開発を……と行きたいところですが、一点、注意すべき事があります。

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

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

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

• ubuntu ターミナルを閉じる前

  tech@DIGIROCK-PC:~$ sudo service php7.4-fpm stop
  tech@DIGIROCK-PC:~$ sudo service apache2 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

• エクスプローラーで「\\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
  
  ※）Ubuntu ターミナルを抜けるときは、必ず「exit」コマンドで抜ける必要があります。Ubuntu ターミナルウィンドウの「X」で閉じたときは自動停止されません。

これで一通り Web 開発環境が整いました。

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