【連載】WSL2、Visual Studio Code、DockerでグッとよくなるWindows開発環境 〜 その3：WSL2、Windows Terminalで改善！！ 〜

SHARE

こんにちは、サイオステクノロジー武井(Twitter:@noriyukitakei)です。今回は、第4回シリーズで、WSL2、Visual Studio Code、Docker、Windows Terminalなどの最新技術を用いて、Windows開発環境をグッとよくしましょうっていうお話をします。第3回目の今回は、WSL1とWSL2を実践してみます！！

  1. その1：まずは概要
  2. その2：WSL1＆2のしくみ
  3. 今回はこちら → その3：WSL2、Windows Terminalで改善！！
  4. その4：Visual Studio Code、Dockerで改善！！

※ 本記事は技術評論社出版の「WEB+DB PRESS」Vol.117(詳細はこちら)に私が寄稿した「WSL 2、Docker、Visual Studio Code［最新］Windows開発環境」の記事をベースとしております。是非、WEB+DB PRESSの方も合わせてご覧ください！！

目次

WSLを使ったWindowsとLinux間のシームレスな開発

本章では、いよいよ実践的な内容に取り組みます！！今までにご紹介したWSLやWindows Terminalを使って、どのようにWindowsとLinux間のシームレスな開発が実現できるのかを4つのユースケースを交えながら説明します。

ユースケースその1：WSLを使ったWindowsとLinux間のシームレスな開発

本章のタイトルにもなっており、最もご紹介したいユースケースです。WSLを使ったWindowsとLinux間の実践的開発方法を説明します。

まず、以下のような開発の要件があるとします。

  • 開発言語はPHP
  • WebサーバーはApache
  • アプリケーションの実行基盤(OS)はLinux

まずはWSLの利便性をご理解頂くために、あえてWSLを使わずに、Virtual Boxなどの仮想環境を使って開発するケースを考えてみます。そして、その次にWSLを使って開発するケースを説明し、その両者を比較することで、WSLのメリットをご理解頂けたらと思います。

WSLを使わない場合

WSLを使わず、Virtual Boxのような仮想環境を使った場合、以下のような構成図になります。

 

上記の環境での開発を実現するためには、まず、Virtual Boxなどの仮想化ソフトウェアを導入する必要があります。その上にLinuxをインストールし、さらにApache、PHPなどの各種ミドルウェアをインストールします。これでやっと開発環境は整いました。

次に、EclipseなどのIDEでソースコードを作成し、それを仮想環境ソフトウェア上のLinuxにアップロードします。scpやftpでアップロードしてもいいですし、Linuxにsambaなどのミドルウェアをインストール・設定してファイル共有という方法でも構いません。いずれにしても、アプリケーションの実行基盤であるLinuxにソースコードをアップロードするのは一手間かかります。

WSLを使う場合

では、次にWSLを使って同様のことを実現してみます。WSLを使った場合の構成図は以下の通りになります。

 

第2章でご紹介したように、WSLには仮想化ソフトウェアは存在せず、Linuxカーネルのファンクションコールが、LXCoreというシステムによって、Windowsへのファンクションコールに変換されて、動作しています。

WSLの利便性については、「百聞は一見にしかず」ということで、実践しながら解説をしていきます。

まずは、OSが必要になるわけですが、これは第1章で既にWSLのインストール及びUbuntuの導入まで済んでいます。その手順はたった数ステップでした。

そして、次に開発に必要なミドルウェア(Apache、PHP)のインストールを実施します。

Windowsの左下の検索ボックスに「Ubuntu」と入力すると、第1章でインストールした「Ubuntu 18.04 LTS」が表示されるので、それをクリックします。すると、コンソールが起動するので、ユーザー名とパスワードを入力します。

Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: ntakei
Enter new UNIX password:
Retype new UNIX password:
passwd: password updated successfully
Installation successful!
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

ntakei@NORIYUKITAKA0D3:~$

ApacheとPHPのインストールを実施します。

$ sudo apt-get update
$ sudo apt-get install -y apache2 php

これで開発する準備は整いました。さて、これから実際にPHPスクリプトを作成するわけですが、WSLでは第2章で紹介したように、エクスプローラーから「\\wsl$\Ubuntu-18.04」というパスにアクセスすれば、WSL上のUbuntuのディレクトリに直接アクセスできます。よって、ApacheのDocument Rootである「\\wsl$\Ubuntu-18.04\var\www\html」にアクセスして、そのディレクトリにIDEなどでtest.phpというファイル名で以下のPHPスクリプト作成します。

<?php
  echo “hoge”;
?>

ブラウザで「https://localhost/test.php」にアクセスすると「hoge」と表示されるはずです。

いかがでしたでしょうか？仮想化ソフトウェアを使う場合に比べて、仮想化ソフトフェア自体や、その上で稼働するOSのインストールや、ソースコードのアップロードの手間が大幅に削減されたことが実感できたかと思います。

今まで実現が難しかった「WindowsとLinux間のシームレスな開発」が、WSLを使うことによって、実現が可能になるのです！！

今まで説明した「WSLと仮想化ソフトフェアによる開発環境構築の違い」を下図にまとめました。

 

仮想化ソフトフェアを使った場合に比べて、WSLを使ったほうが、多くのステップが省略されて、スムーズに開発環境を構築でき、利便性も高まるというのがご理解頂けると思います。

ユースケースその2：デバッグ環境の構築

次に、ユースケースその1で紹介したものをさらに進化させた開発環境を構築してみます。

開発の生産性を上げるためには、「デバッグ環境」はもはや必須と言えます。ブレークポイントを打ち、ステップ実行を繰り返し、変数の内容を目で追いながら、ロジックを確認していく、、、というデバッグ開発は、もはや開発工数を大きく削減するものとして、広く認知されています。

ローカルのPC上にJavaやPHPなどのランタイム、ApacheやTomcatなどのミドルウェアを実行するEclipseのようなIDE(統合開発環境)では、デバッグの機能がそのIDEの中に組み込まれていますので、環境構築は容易です。その構成は下図のとおりとなります。 図4 統合開発環境(IDE)でのデバッグ

ただし、この場合、ApacheやPHPなどのランタイムやミドルウェアは、ローカルのPC、つまりWindows上で動いていますので、本番環境であるLinuxで動作させたときに、その環境の際によって、想定しない動作が発生する可能性があります。これは第1章で説明したとおりです。

「ユースケースその1：WSLを使ったWindowsとLinux間のシームレスな開発」で説明したような、Windowsの中にLinuxが稼働するような環境のデバッグは、下図のような構成となります。

 

ローカルのPCで編集したデバッグ対象のプログラムを何らかの手段で仮想化ソフトウェア上のLinuxに同期させ、さらに開発エディタ上で動作するデバッガと、仮想化ソフトウェア上にあるデバッグ対象のプログラムを通信させてデバッグに必要な情報をやり取りしなければなりません。

デバッグ対象のプログラムを同期させるためには、scpやftpでアップロードしたり、sambaをインストール・設定してファイル共有という方法など色々ありますが、いずれも、Linuxにソースコードをアップロードするのは一手間かかります。

また、デバッグするためには、一般的にデバッグ対象のプログラムと、デバッグ用のモジュールが通信を行い、デバッグに必要な情報を開発エディタ側に送らなければいけません。このため、ローカルのPCと仮想化ソフトウェア上にあるLinuxが相互に通信をする必要があり、この通信の設定をするのも一苦労です。

WSLを使うと、この環境が劇的に改善され、下図のような構成となります。

 

かなりシンプルになったのがわかると思います。これはWSLに加えて、第1章で初回したVisual Studio Codeというエディタの組み合わせで実現が可能となります。

Visual Studio Codeは、様々な拡張機能をインストールすることによって、その機能を自由にカスタマイズしたり強化することができます。その数ある拡張機能の中でも強力なのが「Remote Development」です。Remote Developmentをインストールすると、リモートサーバー上のコードを直接編集が可能です。SSHで接続可能なリモートサーバーやコンテナ、WSL上にあるファイルをVisual Studio Codeから直接編集できるのです。つまり、ローカルマシンにソースコードを持つ必要がありません。リモートサーバー上のファイルを、あたかもローカルマシンにあるファイルのように扱うことができます。

また、Remote Developmentを使うと、Visual Studio Codeの拡張機能をリモートサーバーにインストールし、リモートサーバー上で動作させることができます。

つまり、Remote Developmentの拡張機能を導入することにより、デバッガ環境で発生した以下の2つの作業が簡略化されるのです。

  • デバッグ対象プログラムのLinux上への同期
  • デバッグ対象プログラムとデバック用モジュール間の通信

では、実際にどれほど簡単かを実践してみましょう！！

WSLを起動し、rootになって、Apache、PHPを始めとした必要なモジュールをインストールします。

$ sudo su -
# apt-get update && apt-get install -y php apache2 php-dev php-pear

PHPでデバッグをするために必要なモジュール「Xdebug」をインストールします。

# pecl install xdebug

Xdebugの設定を行います。/etc/php/7.2/mods-available/xdebug.iniを新規に作成し、以下のように記載します。

zend_extension=/usr/lib/php/20170718/xdebug.so
xdebug.remote_autostart = 1
xdebug.remote_enable = 1
xdebug.remote_host = 127.0.0.1

設定を有効にするために、先程作成したxdebug.iniのシンボリックリンクを/etc/php/7.2/apache2/conf.dに作成します。

# cd /etc/php/7.2/apache2/conf.d
# ln -s /etc/php/7.2/mods-available/xdebug.ini 20-xdebug.ini

Apacheを再起動します。

# /etc/init.d/apache2 restart

次にRemote Developmentを可能にする拡張機能をインストールします。左部メニュー最下部にあるアイコン(四角が4つ並んでいるもの)をクリックし、「remote development」と入力し、Remote Developmentの拡張機能をインストールします。

 

では、Remote Developmentを使ってWSLに接続してみましょう。左下の緑のボタンをクリックして下さい。

 

「Remote-WSL: New Window」を選択します。

図8 Visual Studio Codeのインストール その3

 

「Open Folder」をクリックして、WSLのホームディレクトリ(/home/ログインユーザー名)を入力して、OKをクリックして下さい。

 

すると、WSL上のディレクトリが表示されていることが確認できます。これでWSL上のファイルを直接編集できる準備は整いました。

 

「Remote Development」の拡張機能をインストールしたときと同様の手順で、「php debug」と入力します。一覧の中から、タイトルの横に「felixfbecker.php-debug」という記載のある「PHP Debug」クリックし、「Install on WSL: Ubuntu」をクリックしてインストールします。これで拡張機能はWSL上にインストールされます。

 

「Reload Required」をクリックして、Visual Studio Codeを再起動します。

 

ApacheのDocumentRootは/var/www/htmlですので、このシンボリックリンクを/home/ログインユーザー名のディレクトリ内に作成した上で、編集できるように権限を付与します。この作業はWSLで実施します。

# ln -s /var/www/html html
# chmod o+rwx html

再びVisual Studio Codeに戻りまして、左部メニューの虫のマークをクリックして、「create a luanch.json file」→「PHP」の順にクリックします。

 

launch.jsonファイルの編集画面が起動します。「Listen for XDebug」という名前のConfigurationにpathMappingsのフィールドを以下のように追加します。

    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "pathMappings": {
                "/var/www/html": "${workspaceRoot}/html"
            }
        },

これでデバッグ環境の準備は整いました！！

htmlディレクトリにtest.phpを以下の内容で作成します。

「test.php」を開いて、DEBUGボタン(「RUN」の横にある再生マーク)をクリックするとデバッグが始まります。任意の場所にブレークポイントを打って、https://localhost/にアクセスすると、ブレークポイントのところで実行が止まることが確認出来ます。

ユースケースその3：SSHによるポートフォワード

顧客のネットワークやクラウド上にあるデータベースなどにアクセスする際、踏み台サーバーを経由したSSHポートフォワードというのを使うことがあります。

ポートフォワードを使うと、踏み台サーバーにSSH接続さえできれば、踏み台サーバー経由であらゆるサービスにアクセスすることが可能となります。

例えば下図のように、顧客ネットワーク上にあるMySQLサーバーに対して、踏み台サーバーへのSSH接続経由のポートフォワードでアクセスできます。

 

例えば、踏み台サーバーのホスト名をbastion.example.com、踏み台サーバーへのログインユーザー名をntakei、MySQLサーバーのホスト名をmysql.example.comとしますと、LinuxやMacであれば以下のコマンドで実現ができます。

$ ssh -fNL3306:mysql.example.com:3306 ntakei@bastion.example.com

このコマンドを実施して、クライアントPCでMySQLクライアントツールで、localhostの3306宛に接続すればMySQLサーバー上のMySQLに接続が可能です。

Windowsで上記のことを実現することを考えてみます。WSLを使わない場合、例えばTeraTermなどのSSHクライアントツールでSSHポートフォワードを実現は可能です。ただ、もちろん、LinuxやMacと手順は異なるので、Windows利用者向けの手順を用意する必要がありました。

しかしながら、WSLがあればこのような悩みは解決ができます！！WSLを起動して、先のSSHコマンドを実行して、同じようにMySQLクライアントツールからlocalhostの3306宛に接続すればいいだけなのです。

仮想マシン上に構築したLinuxでSSHコマンドを実行して、そのLinux宛に接続すれば同じことが実現できるのでは？と疑問を持たれるかと思いますが、仮想マシン上のLinuxにはクライアントPCからlocalhostでアクセスができません。WSLの場合は、WSL上のLinuxにlocalhostでアクセスすることができるので、本当に、Windowsの中にもう一つのLinuxが融合しているような感覚で操作ができるのです！！

■ 仮想マシン上のLinuxでSSHポートフォワードしようとした場合

■ WSLでSSHポートフォワードしようとした場合

 

WSLを使えば、今までLinuxやMac、WindowsそれぞれのOS向けに作成した環境構築手順書を統一することが可能になります。

ユースケースその4：DockerをWindows 10 Homeでも利用できる

DockerをWindowsで動作させることができるソフトウェア「Docker Desktop for Windows」は、Hyper-Vの利用を前提としていました。Hyper-Vは、Windows Professionalエディション以上が必要ですので、必然的にWindowdでDockerを動かすためにはProfessionalエディション以上が必要になりました。

しかしながら、WSL2では、WSL2向けのHyper-VがHomeエディションに内包されることとなり、Docker Desktop for Windowsは、このHyper-Vを使うことで、Dockerエンジンを動作することができます。

DockerがHomeエディションでも使えるようになったということは、Windowsによる開発の門戸がさらに広がったと言えるでしょう。

Dockerを利用したWindowsでの開発は、第4章で詳細に解説します。

複数シェルを一括管理！ Windows Terminal

Windows Terminalは、複数のターミナルを一つに集約して扱いやすくることができる機能です。2019年5月にシアトルで開催されたマイクロソフトの開発者向けイベント「Build 2019」で発表が行われました。

なぜWindows Terminalがお勧めなのか

最近の開発ではいろいろなサービスを使います。馴染みの深いPowerShell、先程紹介したWSL、マイクロソフトが提供するパブリッククラウドサービス「Azure」など、様々なサービスを組み合わせて行う開発が主流と言えます。

それぞれのサービスは、専用のインターフェースを持ちます。PowerShellでしたらPowerShellのプロンプト、WSLのターミナル、Azureのポータル(ブラウザ)がありますが、従来でしたら、それぞれ個別のインターフェースを起動します。しかし、言わずもがな、複数のウィンドウを立ち上げなければいけないため非常に作業が煩雑になります。

そんな問題を解決するのがWindows Terminalであり、昨今の開発事情を考慮すると、その登場は必然と言えます。

実演！Windows Terminal

これより、WWindows Terminalの便利さを体感頂くために、様々なユースケースごとに実演してみます。

基本的な操作

まずは基本的な操作を説明します。インストールは第1章で済ませているので、早速起動してみます。

Windowsの左下の検索ボックスに「windows terminal」と入力すると、メニューの中に「Windows Terminal(Preview)」が表示されますので、それをクリックして下さい。

 

Windows Terminalが起動します。タブメニューの一番右端のボタンをクリックすると、様々なサービス向けのターミナル一覧が表示されます。ターミナル名をクリックすると、そのサービスに応じたターミナルが起動します。

Windows Terminalを使わない場合

では、ここでWindows Terminalを使わない場合を考えてみます。PowerShell、WSL、Azure Cloud Shell(Azureへの操作実施するための、ブラウザ上で稼働するシェル)を同時に使うような開発の場合、その画面は以下のようになります。

 

非常にデスクトップが雑然としますね・・・。

Windows Terminalを使う場合

では、先程紹介したケースをWindows Terminalで実施してみます。

Windows Terminalを起動し、メニューからそれぞれ「Ubuntu-18.04」「Azure Cloud Shell」を起動します。(PowerShellは、Windows Terminal起動時に起動しているので不要です)

 

これでPowerShell、WSL、Azure Cloud Shellのターミナルが起動しました。全てのターミナルが一つのウィンドウに集約され、タブで切り替えることができるので、非常にデスクトップがスッキリします。

 

では、起動したターミナルの中で、Azure Cloud Shellを使ってみましょう。Azure Cloud ShellはAzureの様々なリソース(仮想マシンやストレージなど)を扱うことのできるシェルです。本来であればAzureポータルというブラウザ上で動作するので、ブラウザを起動しなければならないのですが、Azure Cloud ShellはWindows Terminalに統合されているので、ブラウザを起動する必要はありません。

Windows Terminalに表示されている「Azure」のタブをクリックするとターミナルに以下のようなメッセージが表示されています。メッセージの通り、ブラウザを起動し、https://microsoft.com/deviceloginにアクセスします。

To sign in, use a web browser to open the page https://microsoft.com/devicelogin and enter the code XXXXXXXXX to authenticate.
This code will expire in 15 minutes.

ターミナルに表示されてたcodeを入力して、「Next」をクリックします。

 

Azureにアクセスが可能なアカウント情報を入力します。

 

ログインが成功すると、Windows Terminal側にAzureテナントの一覧が表示されて、Azureへの操作が可能になります。

To sign in, use a web browser to open the page https://microsoft.com/devicelogin and enter the code HBNZ649U4 to authenticate.
This code will expire in 15 minutes.
Authenticated.
Tenant 0: SIOS Technology, Inc. (Azure検証環境) (XXXX.onmicrosoft.com)
Tenant 1: サイオステクノロジー株式会社 (YYYY.onmicrosoft.com)
Please enter the desired tenant number.
>

まとめ

WSLやWindows Terminalを利用した様々なユースケースを通して、その利便性がご理解いただけたかと思います。Windowsによる開発は、これらの最新のツールによって、驚くほど快適になっています。今後の開発に是非お役立て下さい！！お次はいよいよ最後の第4回目で「Visual Studio Code、Dockerで改善！！」になります！！

ご覧いただきありがとうございます！ この投稿はお役に立ちましたか？

役に立った 役に立たなかった

1人がこの投稿は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

【連載】WSL2、Visual Studio Code、Doc…

次の記事

【連載】WSL2、Visual Studio Code、Doc…