Windows上にLinux仮想環境構築【WSLでお気楽Web開発】

2021年10月29日2024年7月12日Staff Note

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

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

WSLのインストール手順

WSLのインストール手順を説明します。

必要なシステム要件

WSL2のインストール方法・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 開発環境が整いました。

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