VSCode+VirtualBoxで開発環境を構築 - 古い技術との新しい付き合い方 • AQZ Tech Chronicles

60歳を前にして人生を振り返ると、人間とはわがままだとつくづく思う。

あまり知らない相手に惹かれて興味を持ち、好きになる
好きになった相手のことを知るにつれて嫌気がさしてくる
好きだった相手だったのに、距離を置きたくなる
別の相手に夢中になって、興味が失せる

これは人間にありがちなフローである。OSだったり、スマホだったり、プログラミング言語だったり、フレームワーク然り。人間関係は…まあ、似たようなものだ。特にビジネスではありがちだ。

PHPとの思い出

私にとって、これはPHPでありWordPressである。

C++はいい。いつだって大歓迎だ。 C#だの.NETだの、機能満載で、ごてごての派手なやつはいらないんだ。自動調理コース付きの電気圧力鍋より、鉄のフライパンの方が味わいがあるというものだ。 C#なら2行で済むコードをC++で50行書く。職人なら己の腕一本でシステムを仕上げて見せろ。そう、Win32とC++で十分なのだ。（そんなわけない）

ん？私は何の話をしているのだろうか？年を取ると話がすぐに脱線してしまう。

PHPはPHP3から使っていた。 WordPressはVer4から使っていた。そう、グーテンベルグの前のやつだ。最初は楽しかった。面白かった。だが、今はいずれも私とは価値観が合わない。おまけにWordPressは仲間割れして、プラグインは動かなくなるし、面倒見切れない。あれほど酒を止めろと言ったのに、毎晩飲んだくれて酔いつぶれている相手を介抱する人生に疲れ果ててしまったのだ。

考えてみればJavaScriptも20世紀から使っているが、こちらは問題ない。なぜだろう？うん、今でもなんだかんだとVanilla JSは好きである。

新しい開発環境の必要性

最近はPythonやTypeScriptを使うことがめっきり増えたのだが、そんな私に久しぶりにPHPの案件が舞い降りた。まるで酒場で元カノにあった気分だ。（そんな経験はないのだが…）元妻とは今でも仲がいいので、そちらは問題ない。

PythonやNode.jsはプロジェクトごとに環境を構築できるので、気楽なのだが、PHPはそうはいかない。システム全体に影響を及ぼす。それに一過性の案件だ、ひと時の逢瀬だ。すぐに別れることは決定事項だ。その後は二度と会いたくないものだ。

そんなわけでいつも使っているWSL2の環境には入れたくない。私の大切な日常とは切り離したい。

WSL2での選択肢を探る

どうすればいいのか？WSL2のインスタンスを複数使えばいいのだろうか？AIに問うてみる。

WSL2で複数のLinuxインスタンスを作成することは可能ですが、いくつかの制限があります。デフォルトでは複数のLinuxディストリビューションを同時に実行することはできません。複数のWSL2インスタンスを必要とする場合は、VMwareやVirtualBoxの使用を検討することをお勧めします。

そうなのか。

VirtualBoxでの挑戦

なら、VirtualBoxを使ってみよう。 VirtualBoxにUbuntuをインストールする。起動したコンソールにログインして、コマンドをコピペ… コピペ、できない？ターミナル感覚で扱えないのか？クリップボードの共有は？AIに質問する。あれこれ試す。

VBoxLinuxAdditionsのインストール

sudo apt-get update
sudo apt-get install gcc make perl
sudo apt update
sudo apt install -y bzip2
sudo apt install -y build-essential linux-headers-$(uname -r)

Guest Additions CDのマウント

VirtualBoxのメニューから「Devices」→「Insert Guest Additions CD Image」を選択
CDイメージをマウント：

sudo mount /dev/cdrom /media

インストールの実行

cd /media
sudo ./VBoxLinuxAdditions.run

システムの再起動

sudo reboot

機能の確認

インストール完了後、以下の機能が利用可能になります：

画面解像度の自動調整
シームレスなマウス統合
ホストとゲスト間のファイル共有
クリップボード共有

すべてつつがなく完了したのだが、操作が面倒臭い！コピペもできない。

詰んだ。

VSCodeという救世主

そのとき、ふとひらめいた。VSCodeから制御すればいいのではないか？AIに尋ねる。 VSCodeからバーチャルボックスにリモート接続したら、ターミナルはバーチャルボックスのシェルになるだろうか？

はい、VSCodeからVirtualBoxにSSH接続すると、ターミナルは自動的にVirtualBox上のシェルになります。

おお、神よ！一筋の光が私の脳裏に差し込んだ。

さて、VSCodeにVirtualBoxを隷属させようではないか！

開発環境構築の手順

1. VM(Virtual Machine)側の準備

最初にVMを起動してOpenSSH Serverをインストール：

sudo apt update
sudo apt install openssh-server

2. ポートフォワーディングの設定

VirtualBoxのNAT設定でポートフォワーディングを設定する必要があります：

VirtualBoxマネージャーで対象のUbuntu VMを選択(VMは停止不要)
「設定」→「ネットワーク」→「アダプター1」を開く
「高度」を展開し、「ポートフォワーディング」をクリック
以下のような設定を追加：
- 名前: SSH
- プロトコル: TCP
- ホストポート: 2222（任意の未使用ポート）
- ゲストポート: 22

3. SSHサービスの設定

# SSHサービスを有効化
sudo systemctl enable ssh

# SSHサービスを起動
sudo systemctl start ssh

# 状態を確認
sudo systemctl status ssh

4. VS Codeの設定

VS Codeで以下の手順を実行：

リモートエクスプローラーを開く（サイドバーのリモートアイコン）
SSH TARGETS の「+」をクリック
以下の形式でSSH設定を入力：

ssh username@localhost -p 2222

（usernameはUbuntuのユーザー名に置き換え）

入力したら、リモートエクスプローラーにlocalhostが表示されるまでEnterを押す。

5. 接続手順

VS CodeのリモートエクスプローラーからUbuntu-vmを選択
「Connect to Host in New Window」をクリック
パスワードを入力
フォルダを開くか新しいファイルを作成して接続確認

接続できない場合のトラブルシューティング：

Ubuntu側でSSHが正しく起動していることを確認
ファイアウォールの設定を確認：

sudo ufw status
sudo ufw allow ssh

ポートフォワーディングの設定を再確認
ホスト側でssh username@localhost -p 2222を実行して直接SSH接続できるか確認

接続の仕組みについて

ここでふと疑問が湧いた。VMのIPアドレスは10.0.2.15である。なぜlocalhostを指定するのだろうか？ AIが錯乱しているのではないだろうか？本心を確かめてみた。

はい、localhostで正しいです。その理由を説明します：

ポートフォワーディングの仕組み
- VirtualBoxのNATモードでは、ホストマシン（あなたのPC）とゲストマシン（Ubuntu VM）の間でポートフォワーディングを設定します
- 先ほど設定したポートフォワーディング（ホストの2222→ゲストの22）により、localhost:2222への接続はVMの22番ポートに転送されます
接続の流れ

VS Code → localhost:2222 → [ポートフォワーディング] → VM(10.0.2.15):22

もし直接VMのIPアドレス（10.0.2.15）を指定した場合：

NATモードではホストからこのIPアドレスに直接アクセスできません
このIPはVirtualBox内部のネットワークでのみ有効なアドレスです

したがって、ポートフォワーディングを使用する場合は、localhostを指定する必要があります。これがVirtualBoxのNATモードでの標準的な接続方法です。

なるほど、そういうことか。AIはいつだって冷静だ。

おわりに

無事に新しいウィンドウが開いた。ターミナルを開くと、問題なくシェルを実行できた。

また一つ、新しい扉を開けてしまったようだ。

さて、懐かしい面々に挨拶をしよう。PHP、WordPress、お前たちとの再会だ。