🦥

VirtualBox上のdevcontainerに接続する.

7 min read

モチベーション (ここまでのお話)

勉強用にちゃんとしたUbuntuの環境が欲しくて[1], とりあえずVirtualBoxを使ってUbuntu Serverを構築した[2]. VSCodeからRemote-SSHを使って繋いでみると非常に使用感が良かった.

そこでLinuxの勉強用では飽き足らずアプリ開発もできるのではとは思い始めたというのがここまでの話です[3].

構成

名前 OS
ホスト Windows 10 Home
ゲスト Ubuntu Server 20.04.3 LTS

ホスト(Windows)

  • VSCode
  • VirtualBox
  • Docker Desktop

などを入れておきます. VSCodeの拡張として以下を入れておきます.

  • Remote Development Extension
  • Docker

ゲスト(Ubuntu Server 20.04.3)

  • Docker CE (Community Edition)

をとりあえず入れておけばよいです.

Ubuntu Serverを立てる

ネットワークの設定

あまりはまりポイントはないんですが, 私のような初学者はUbuntu Serverをインストールする前にネットワーク関係の設定をしておくことおすすめします. 後からすることもできますが事前に設定するだけで非常に簡単になります[4].

FileからHost Network Managerを選択します(あるいはCtrl + H). CreateからHost-Only Ethernet Adapterを追加します. Host-Only Ethernet Adapter #2となっているはずです.

次に作成した仮想マシンのSettingsを開いてNetworkを選択します.

Adapter 2を選択してEnable Network Adapterを有効にして,

  • Attached to: Host-Only Adapter
  • Name: VirtualBox Host-Only Ethernet Adapter #2

としておきます. Startを押して仮想マシンを実行するとインストールが始まります. アカウント作成以外はデフォルトのままにしています.

事前にネットワークの設定をしているとenp0s8が認識されるようになります.

Guest Additionsのインストール

GUIがない場合はCDを手動でマウントしてシェルを実行する必要があるようです.

VBoxManageで仮想マシンのヘッドレス運用

VBoxManageというコマンドがVirtualBoxに付属していますがパスは通っていません. git-bash(Git for Windows)で動かす場合を紹介します[5].

適当なエディタで.bashrcファイルを開きます.

code ~/.bashrc

以下を追記します. 長いのでVBoxManageは長いのとキャメル・ケースでタイプしにくいのでvbmというエイリアスを設定しています.

export PATH="/c/Program Files/Oracle/VirtualBox:$PATH"
alias vbm="VBoxManage"

sourceで実行して環境に反映させておきましょう.

source ~/.bashrc

これでVirtualBoxアプリを起動しなくても仮想マシンを立ち上げることができます. 以下のコマンドを実行しましょう.

vbox list vms

作成されている仮想マシンが表示されるので目的のものを選んでヘッドレス・モードで起動します.

vbox startvm uterm --type headless

SSHで接続する

疎通テスト

まずゲストOSでIPアドレスを取得しておきます.

ip address

enp0s8のinetの数列を控えておきましょう. ホストOSからpingで通信できるか確認します.

ping xxx.xxx.xxx.xxx

続いてSSHでもできるか確認します. 実行後プロンプトがでるのでインストール時に作ったパスワードを入力ししましょう.

ssh user-name@xxx.xxx.xxx.xxx

通じていればオッケーです.

公開鍵認証の設定

すでにある公開鍵を使います.

ssh-copy-id -i ~/.ssh/id_rsa.pub brainavder@uterm

こうするとゲストOS上に~/.ssh/authorized_keysというファイルが作成されます.

接続する前にホストOS上で~/.ssh/configファイルにホストの情報を登録しておくとよいかもしれません.

Host uterm
  User brainvader
  Port 22
  HostName xxx.xxx.xxx.xxx
  IdentityFile ~/.ssh/id_rsa

これで

ssh brainvader@uterm

とできます. パスフレーズが要求され入力するとプロンプトが

brainvader@uterm:~$

に代わっているはずです. そこはすでにVirtualBoxが作り出した仮想環境の世界です.

Dockerのインストール

以下を参考に実行します. 特にルート権限なしにdockerを実行できるようにしておくのが重要なようです.

VSCodeから接続する

ssh-addを有効にする

ssh-addで毎回の必要なパスフレーズを回避している場合, VSCodeをショートカットなどから起動するとこの設定が引き継がれないようです. 適当なターミナルからcodeコマンドでVSCodeを立ち上げておくと設定が引き継がれるようです.

Remote-SSHによるゲストOSとの接続

Remove-SSHがインストール済みなら右のActivityバーにRemove Explorerが追加されているはずです. そこからutermにカーソルを合わせて右クリックしてConnect to Host in Current Windowを選ぶとVSCodeがゲストOSと通信するようになります.

統合ターミナル上でUbuntu Serverにアクセスできるようになりました.

VSCodeで利用するdockerを変更

Connect to remote Docker over SSHの手順4からです.

Docker Desktop for Windowsをインストールします. 指示に従って入れると行けると思います[6]. Docker Desktopが起動したら消しておきます. 必要なのはdockerのコマンドライン・インターフェースだけです.

次にdockerコンテクストを作ります.

docker context create udocker --docker "host=ssh://brainvader@uterm:22"
docker context use udocker
docker run hello-world

これで実行したdockerコマンドはリモート上のdockerデーモンで処理されます.

VSCodeで新規Windowを開いたらコマンド・パレットからDocker Contexts: Useを実行します. udokcerを選択します.

Node.jsのdevelopmentコンテナを試す

コマンド・パレットからRemote-Containers: Try a Development Container Sampleを実行します. Nodeを選ぶとインストールが始まります. Starting with Dev Containerを眺めておきましょう. 処理が終わったらdev container内部にいるはずです.

SSHでゲストOSを接続しているVSCodeを見てみましょう.

developmentコンテナが動いているのが確認できます.

追記

ホストOSでVSCodeを開いてコマンドを実行してdevcontainerを起動しようとするとエラーになる.

またRemote-Containers: Try a development containerは指定したコンテクストで実行されるのでいいが, Remote-Containers: Add Development Container Configuration Filesはuterm内部からは呼び出せない.

uterm内部からコマンド経由でインストールできないのでマニュアルで設定ファイルなどを揃える必要がある.

具体的なやり方はVS CodeのDevContainerをVMなどssh接続先で使うが参考になる. ローカル環境で使う場合に加えてひと手間ある

ready-to-useなdevcontainerとして以下のようなものもある.

Reference

脚注
  1. 実機やラズパイがベストとは思いますがこれ以上PC増えても触れないと思うので. VPSも考えましたが, それなりのプランを一年借りるなら実機欲しいよなとかセキュリティがとかめんどくさくなりました. ↩︎

  2. WSL2で良いじゃないかという話ですがsystemdが動いてほしかったです・・・ ↩︎

  3. こういうことができるならメモリは32GBではなく64GB搭載しておけばよかったかなと思います. ↩︎

  4. VirtualBoxで学ぶネットワークの知識(1) ↩︎

  5. Windowsへのパスの通し方は検索すればたくさん出てくると思います. ↩︎

  6. 私の場合何やらエラーが出たのですが, Windowsの更新とかをすると入りました. ↩︎

Discussion

ログインするとコメントできます