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

2021年10月29日Staff Note

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

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

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

さらに進化したWSL2の詳細なインストール手順や利点については、以下の記事をご覧ください。

WSLのインストール手順

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

必要なシステム要件

前提条件

Windows10 バージョン2004以降(ビルド19041以降)またはWindows11
Windowsにログインするユーザーが管理者権限を有すること

検証環境

エディション Windows 10 Pro
バージョン 21H1
OS ビルド 19043.1266

WSL2のインストール方法・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 アプリをアンインストールすると、全てのデータは破棄されてしまいますので、アンインストールは必要に応じてバックアップを取ってから行う必要があります。

▽キャンペーン開催中!
コアサーバーでは、V2プランとドメインの同時申し込みで
ドメインが実質0円(年間最大3,882円お得)になるサーバーセット割特典
を展開中です。
是非、お得なこの機会にご利用ください!
最新のキャンペーンは
こちらから

超高速化を実現するレンタルサーバー CORESERVER


この記事を監修した人
左川善章
左川 善章

GMOデジロック インフラエンジニア
ボケもツッコミも下手な関西人。Windows98で動作するWebサーバーを使用した自宅サーバー構築から初めて、紆余曲折を経て今に至る。
▽登壇実績
https://ct-study.connpass.com/event/55305/
https://gmohoscon.connpass.com/event/102401/

Posted by admin-dev


おすすめ関連記事

service

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