WSL(Linux用Windowsサブシステム)でお気楽Web開発 ~Windows上でLinux 仮想環境~

2021年11月12日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 環境を用意する

  1. 「Windows」キー→「設定」→「アプリ」→関連設定「プログラムと機能」→「Windows の機能の有効化または無効化」と開いていき、「Linux 用 Windows サブシステム」にチェックを入れ、「OK」ボタンを押す(再起動を促されるので、Windows を再起動する)。

    Windowsの機能

  2. 「Microsoft Store」アプリを開き、「ubuntu」で検索、インストールする。
    ※)今回は Ubuntu を前提に説明しますが、他にも幾つかのディストリビューションが見つかります。

  3. インストールした「Ubuntu」を開くと、Ubuntu のターミナル画面が開き、「Installing, this may take a few minutes...」と表示されるので、数分待つ。
  4. 「Enter new UNIX username:」が表示されたら、Ubuntu 上で使う一般ユーザー名を決めて入力、Enter キーを押す。
    ※)今回は一般ユーザー名として「tech」を使用しています。

    ユーザー名

  5. 「New password:」と聞かれるので、一般ユーザー名のパスワードを決めて入力、「Retype new password:」と表示されるので、同じく一般ユーザー名のパスワードを再入力する。

  6. 「一般ユーザー名@PC名:~$」が表示されたらインストール完了!

    ※)今回の例では「tech@DIGIROCK-PC:~$」
    インストール完了

これで 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」以下3行を最後尾に追記
    ※)ここでは 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 をインストールする手順を紹介します。

注)Apache ドキュメントルート以下には、IP アドレスさえ分かれば同一ネットワークから Web アクセス可能になります。Ubuntu を立ち上げている間は公共の WiFi 等、不特定多数が使うネットワークに接続するのを避けるか、どうしても必要な場合は Widnwows やセキュリティソフトのファイアウォールを慎重に設定することをお勧めします。

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 開発環境が整いました。

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

注1)Apache ドキュメントルート変更の部分など、簡略化のため、サーバー設定の定石を敢えて外している部分があります。定石通りに設定いただいても問題ございません。
注2)Ubuntu アプリをアンインストールすると、全てのデータは破棄されてしまいますので、アンインストールは必要に応じてバックアップを取ってから行う必要があります。
CORE誘導バナー

Posted by admin-dev


service

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