Windowsサンドボックス上でWebアプリのテスト環境を構築

2022年2月12日 SandBox, Windows

プログラミングをするための開発環境やテスト環境を整えようとすると、色々なソフトウェアをインストールしなければなりません。
そうなるとプログラミングをしていない時もバックグラウンドで動作するプロセスが増えたりするので、パソコンの環境が汚れるのが嫌でした。
そこで、Windowsサンドボックスで動作環境を構築すればパソコンにインストールするソフトウェアは最小限に抑えられないか？と思ったので試してみました。

1 構築環境
2 全体構成
3 サンドボックスの実行
4 まとめ

構築環境

開発環境（ホスト側のパソコン）

OS：Windows 11 Pro
開発言語：PHP
エディタ：Visual Studio Code

動作環境（サンドボックス上のWebサーバー）

OS：Windows サンドボックス上のWindows 11
実行用環境：XAMPP 8.1.2

全体構成

以下の構成で考えてみました。

マウントやXAMPPインストールはサンドボックス起動時に自動実行します。
これならVisual Studio Codeで修正したプログラムファイルをブラウザからすぐに確認出来ます。
作業終了後にサンドボックスを閉じればホスト側に残るのはプログラムファイル類のみなので、ホスト側にインストールするソフトは最小限で済みます。

ディレクトリ構成

ホスト側

ホスト側のディレクトリ構成は以下になります。
XAMPPは必要なバージョンをダウンロードして格納しておきます。
ダウンロードは「XAMPP Installers and Downloads for Apache Friends」から出来ます。

C:.
└─work
   ├─envfile
   │   httpd.conf
   │   setup.bat
   │   xampp-windows-x64-8.1.2-0-VS16-installer.exe
   │
   └─src
       index.php

サンドボックス側

サンドボックス側のフォルダ構成は以下になります。

C:.
├─work
│   httpd.conf
│   setup.bat
│   xampp-windows-x64-8.1.2-0-VS16-installer.exe
└─mount
    index.php

サンドボックス構成ファイル

サンドボックス構成ファイルの拡張子は「.wsb」になりますので、メモ帳等で作成してください。
構成ファイルについては「Windows Sandbox導入（Windows11、Windows10）」の記事も参考にしてください。

<Configuration>
  <MappedFolders>
    <MappedFolder>
      <HostFolder>C:\work\envfile</HostFolder>
      <SandboxFolder>C:\work</SandboxFolder>
      <ReadOnly>true</ReadOnly>
    </MappedFolder>
    <MappedFolder>
      <HostFolder>C:\work\src</HostFolder>
      <SandboxFolder>C:\mount</SandboxFolder>
    </MappedFolder>
  </MappedFolders>
  <LogonCommand>
    <Command>cmd.exe /c C:\work\setup.bat</Command>
  </LogonCommand>
</Configuration>

setup.bat

サンドボックス起動時に実行するbatファイルです。
必要に応じてカスタマイズします。
例えば、「起動時にデータベースに初期データを導入したい」とかであればここでやります。
（複雑な処理ならbatよりもPowerShellの方が良いかも）

rem XAMPPのサイレントインストール
start /wait C:\work\xampp-windows-x64-8.1.2-0-VS16-installer.exe --mode unattended

rem XAMPPのコントロールパネル起動
start /b C:\xampp\xampp-control.exe

rem SandboxのIP表示
start cmd /k ipconfig

rem 設定ファイル上書き
copy /y c:\work\httpd.conf C:\xampp\apache\conf\httpd.conf

httpd.conf

マウントしたPHPファイルを入れるフォルダにエイリアスを指定してアクセス出来るようにします。

<IfModule alias_module>
    ～省略～
    Alias /web/ "C:/mount/" #<IfModule alias_module>内にこの行を追加
    ～省略～
</IfModule>

#<Directory>～</Directory>を追加
<Directory "C:/mount">
    AllowOverride All
    Options Indexes FollowSymLinks Includes ExecCGI
    Require all granted
</Directory>

サンドボックスの実行

作成したwsbファイルをダブルクリックしてWindowsサンドボックスを起動します。
起動すると<LogonCommand>の<Command>に記載したコマンドの「cmd.exe /c C:\work\setup.bat」が実行されます。
setup.batに記載のXAMPPインストール、設定ファイルのコピー、ipconfigの結果表示、XAMPP Control Panelが表示されます。

[XAMPP Control Panel]の[Module]がApacheの右にある[Actions]の「Start」ボタンを押下するとWindows FirewallのAlertが上がります。
これはApacheがWebの80,443ポートを開放しようとしているためです。
Sandboxへの通信はホストOSからしか出来なく、Firewallを開放してもリスクは低いので[Allow access]をクリックしてアクセス出来るようにします。

ホスト側でブラウザを起動してアクセスするとphpファイルが実行されて結果が見れます。

まとめ

今回はApacheを起動してphpを実行したのみですが、応用を利かせれば色々出来ると思います。
ただし起動するたびにインストールが行われるので起動時に少し時間は掛かってしまいますが、ファイル一式があればどの端末でも同じ動作環境が作れます。
複数の端末が同じ環境で動かせるというのはメリットですが、Docker等でも同じようなことは出来るのでこれのメリットはなんだろう？と思います。

私のようにホスト側は最低限のソフトに留めたいので、「Dockerすらパソコンにインストールしたくない！」というケースでは使えると思います。
それなら別のパソコンに構築してRDP接続したりVMで良いという意見もあると思いますが、ショートカットキーが変わるのでプログラミングはローカルでしたいんです。

メリデメを整理しますと以下のような感じでしょうか。

メリット

Windowsの機能なのでホスト側のパソコンにインストールするソフトが最小限（今回だとVisual Studio Codeのみ）

デメリット

インストールソフトが多いと、毎回起動時に時間が掛かる
他のソフトウェア（Docker等）の方が手軽？

ニーズは少ないかもしれませんが、参考になれば幸いです。
私は気に入りましたので、今後もカスタマイズしながら使って行こうと思います。

Windows11