Multipass on macOS 徹底活用 (3) - VS Code連携で開発効率を爆上げ！

なぜmacOS開発者にMultipassとVS Code連携が必要なのか？

前回の記事では、軽量なLinux仮想環境をmacOS上に手軽に構築できるMultipassの基本的な使い方を紹介しました。

Multipassを使えば、クリーンなUbuntu環境を瞬時に手に入れ、開発環境の分離やLinux環境でのテストが可能になります。しかし、CLIの操作のみだと、普段VS Code等で開発している方にとっては、操作の効率が落ちると感じるかと思います。

そこで本記事では、VS Codeの強力なリモート開発機能とMultipassを連携させ、まるでローカル環境で開発しているかのようなシームレスな体験を実現する方法を解説します。
この連携により、あなたは以下のメリットを享受できます。

快適な開発体験: VS Codeの拡張機能やUIを、リモートのUbuntu環境でそのまま利用できる。
環境をクリーンに維持: 開発に必要なツールや依存関係はすべてMultipassインスタンス内に閉じ込められる。
本番環境に近い開発: Ubuntu環境で開発することで、デプロイ時の予期せぬ問題を減らせる。
プロジェクトごとの環境分離: 複数のプロジェクトで異なるLinux環境が必要な場合でも、Multipassインスタンスを使い分けることで簡単に対応できる。

対象読者

macOSで開発を行っており、Linux環境の必要性を感じている方
Multipassを導入済みで、さらに開発効率を向上させたい方
VS Codeを日常的に利用しており、リモート開発に興味がある方
開発環境の分離やクリーンな状態維持に課題を感じている方

動作検証環境

この記事で紹介するcurlコマンドの動作は、以下の環境で検証しています。

OS : macOS Tahoe Version 26.0
ハードウェア : MacBook Air 2024 M3 24GB
Multipass : Multipass version 1.16.1

VS Code Remote – SSH拡張機能の導入
- 拡張機能のインストール
- 基本的な設定
MultipassインスタンスへのSSH接続設定
VS CodeからMultipassインスタンスで開発する
- リモート環境でのファイル操作とターミナル利用
- 開発プロジェクトのクローンと実行
FAQ：よくある質問
まとめ：ローカルと変わらない開発体験
参考資料

VS Code Remote – SSH拡張機能の導入

VS CodeとMultipassを連携させる上で、最も重要な役割を果たすのが「Remote – SSH」拡張機能です。
この拡張機能を使うことで、ローカルのVS CodeからSSH経由でリモートのLinux環境に接続し、あたかもローカルファイルシステムを操作しているかのように開発を進めることができます。

拡張機能のインストール

まずはVS Codeを開き、拡張機能ビュー（Cmd+Shift+X または Ctrl+Shift+X）から「Remote – SSH」を検索してインストールします。

[!NOTE]:「Remote - SSH」はMicrosoftが提供する公式拡張機能であり、非常に活発に開発・メンテナンスされています。安心して利用できる強力なツールです。

基本的な設定

インストールが完了すると、VS Codeの左下隅に緑色のリモートインジケーターが表示されます。ここをクリックすると、リモート接続に関するコマンドパレットが開きます。

それでは、Multipassインスタンスの設定に進みましょう。

MultipassインスタンスへのSSH接続設定

VS CodeからMultipassインスタンスにSSH接続するためには、いくつかの設定が必要です。

SSHキーの生成とインスタンスへの登録

まず、ローカルのmacOS環境でSSHキーペアを生成します。すでにSSHキーを持っている場合は、このステップはスキップできます。

ssh-keygen -t rsa -b 4096 -f ~/.ssh/id_multipass_rsa

ssh-keygen -t rsa -b 4096 -f ~/.ssh/id_multipass_rsa

このコマンドは、~/.ssh/id_multipass_rsa（秘密鍵）と~/.ssh/id_multipass_rsa.pub（公開鍵）を生成します。パスフレーズは設定しても構いませんが、自動化を考慮する場合は空欄でも良いでしょう。

次に、生成した公開鍵をMultipassインスタンスに登録します。これにより、パスワードなしでSSH接続できるようになります。

Multipassインスタンスに公開鍵を登録する場合は、multipass transferコマンドで公開鍵を転送し、インスタンス内でauthorized_keysに追加します。

# ローカルから公開鍵をインスタンスに転送
multipass transfer ~/.ssh/id_multipass_rsa.pub my-instance:/home/ubuntu/.ssh/id_multipass_rsa.pub

# インスタンスにシェル接続し、公開鍵をauthorized_keysに追加
multipass shell my-instance
echo "$(cat ~/.ssh/id_multipass_rsa.pub)" >> ~/.ssh/authorized_keys
chmod 600 ~/.ssh/authorized_keys
exit

# ローカルから公開鍵をインスタンスに転送
multipass transfer ~/.ssh/id_multipass_rsa.pub my-instance:/home/ubuntu/.ssh/id_multipass_rsa.pub

# インスタンスにシェル接続し、公開鍵をauthorized_keysに追加
multipass shell my-instance
echo "$(cat ~/.ssh/id_multipass_rsa.pub)" >> ~/.ssh/authorized_keys
chmod 600 ~/.ssh/authorized_keys
exit

`cloud-init`で起動する際に公開鍵を登録する

Multipassインスタンスをcloud-initで起動する際に公開鍵を登録するのが最もスマートな方法です。
例えば、以下のようなcloud-init.yamlファイルを作成し、multipass launchコマンドで指定します。

# cloud-init.yaml
users:
  - name: ubuntu
    ssh_authorized_keys:
      - ssh-rsa AAAAB3NzaC... (ここにid_multipass_rsa.pubの内容を貼り付ける)

# cloud-init.yaml
users:
  - name: ubuntu
    ssh_authorized_keys:
      - ssh-rsa AAAAB3NzaC... (ここにid_multipass_rsa.pubの内容を貼り付ける)

そして、インスタンスを起動します。

multipass launch --name my-instance --cloud-init cloud-init.yaml

multipass launch --name my-instance --cloud-init cloud-init.yaml

VS CodeのSSH設定ファイル (`config`) の編集

次に、VS CodeがMultipassインスタンスに接続するための設定を~/.ssh/configファイルに記述します。

code ~/.ssh/config

code ~/.ssh/config

まずは、MultipassインスタンスのIPアドレスを直接指定して接続設定を行います。これは、後述するmDNSによるホスト名解決がうまくいかない場合の確実な接続方法でもあります。

MultipassインスタンスのIPアドレスは以下のコマンドで確認できます。

multipass list

multipass list

例えば、my-ubuntu-vm のIPアドレスが 192.168.64.X の場合、~/.ssh/config に以下の内容を追記または編集します。

Host my-ubuntu-vm
  HostName 192.168.64.X # MultipassインスタンスのIPアドレス
  User ubuntu
  IdentityFile ~/.ssh/id_multipass_rsa

Host my-ubuntu-vm
  HostName 192.168.64.X # MultipassインスタンスのIPアドレス
  User ubuntu
  IdentityFile ~/.ssh/id_multipass_rsa

この設定で一度VS Codeからの接続を試み、SSH接続ができることを確認してください。

mDNS (Avahi) を利用したホスト名解決の設定

IPアドレスでの接続が確認できたら、より利便性の高いホスト名（例: my-ubuntu-vm.local）での接続設定に移行しましょう。macOSはBonjour（mDNS）を利用して.localドメインのホスト名を解決するため、Multipass VM側でこのサービスが提供されている必要があります。

以下の手順で、VMにAvahiデーモン（mDNSサービスを提供するソフトウェア）をインストールし、設定を確認します。

Multipassインスタンスにシェルで接続します。

multipass shell my-ubuntu-vm

multipass shell my-ubuntu-vm

Avahiデーモンがインストールされているか確認します。
systemctl status avahi-daemon コマンドを実行し、「Unit avahi-daemon.service could not be found.」と表示される場合、Avahiデーモンはインストールされていません。
Avahiデーモンをインストールします。

sudo apt update
sudo apt install avahi-daemon -y

sudo apt update
sudo apt install avahi-daemon -y

Avahiデーモンが起動していることを確認し、必要であれば起動・有効化します。

systemctl status avahi-daemon

systemctl status avahi-daemon

もし Active: active (running) と表示されていなければ、以下のコマンドで起動し、VM起動時に自動的に開始されるように設定します。

sudo systemctl start avahi-daemon
sudo systemctl enable avahi-daemon

sudo systemctl start avahi-daemon
sudo systemctl enable avahi-daemon

再度 systemctl status avahi-daemon を実行し、active (running) と表示されていることを確認してください。ログに Server startup complete. Host name is my-ubuntu-vm.local. のような表示があれば、Avahiがホスト名をアドバタイズしている証拠です。

macOSからホスト名解決を再確認します。
VMのシェルを終了し、macOSのターミナルで以下のコマンドを実行します。

ping my-ubuntu-vm.local

ping my-ubuntu-vm.local

192.168.2.2 のようなVMのIPアドレスからの応答があれば、ホスト名解決は成功です。

SSH設定ファイル (`config`) の最終編集

Avahi/mDNSによるホスト名解決が正常に機能していることを確認したら、~/.ssh/config ファイルを以下のように更新します。

Host my-ubuntu-vm
  HostName my-ubuntu-vm.local # mDNSで解決されるホスト名
  User ubuntu
  IdentityFile ~/.ssh/id_multipass_rsa

Host my-ubuntu-vm
  HostName my-ubuntu-vm.local # mDNSで解決されるホスト名
  User ubuntu
  IdentityFile ~/.ssh/id_multipass_rsa

これで、my-ubuntu-vm.local というホスト名でMultipass VMにSSH接続できるようになります。ProxyCommand は不要です。

SSH接続フローの図解

[著者の経験談]
私は以前、MultipassインスタンスのIPアドレスが変更されるたびに~/.ssh/configを手動で更新していました。しかし、Avahi/mDNSによるホスト名解決を導入し、HostNameにmy-ubuntu-vm.localを指定することで、この手間が一切なくなり、非常に快適になりました。IPアドレスの変動を気にすることなく、常に同じホスト名で接続できるため、リモート開発のストレスが大幅に軽減されました。

Avahi/mDNSの記事もぜひご覧ください。

VS CodeからMultipassインスタンスで開発する

SSH設定が完了したら、いよいよVS CodeからMultipassインスタンスに接続して開発を開始します。

VS Codeの左下にある緑色のリモートインジケーターをクリックします。
コマンドパレットで「Remote-SSH: Connect to Host…」を選択します。
~/.ssh/configで設定したmy-ubuntu-vmを選択します。

新しいVS Codeウィンドウが開き、Multipassインスタンスへの接続が開始されます。初回接続時には、SSHフィンガープリントの確認や、VS Code Serverのインストールが行われます。

リモート環境でのファイル操作とターミナル利用

接続が成功すると、VS Codeの左下インジケーターが「SSH: my-ubuntu-vm」と表示されます。これで、Multipassインスタンス内で開発を行っている状態となります。

ローカル環境との違いは、以下の通りです。

ファイルエクスプローラー: ローカルのファイルシステムではなく、Multipassインスタンス内のファイルシステムが表示されます。ファイルの作成、編集、削除など、ローカルと全く同じ感覚で操作できます。
統合ターミナル: VS Codeの統合ターミナルは、Multipassインスタンス内で実行されます。ls, cd, gitなどのコマンドを直接実行できます。
拡張機能: Multipassインスタンス内にVS Code Serverがインストールされるため、ローカルで利用している多くの拡張機能（GitLens, ESLint, Prettierなど）もリモート環境でそのまま利用できます。

開発プロジェクトのクローンと実行

Multipassインスタンスに接続したら、通常通り開発プロジェクトをクローンし、必要な依存関係をインストールしてアプリケーションを実行できます。

例えば、GitHubからプロジェクトをクローンする場合：

# 統合ターミナルで実行
git clone https://github.com/your-org/your-project.git
cd your-project

# 統合ターミナルで実行
git clone https://github.com/your-org/your-project.git
cd your-project

Node.jsプロジェクトであれば：

npm install
npm start

npm install
npm start

Pythonプロジェクトであれば：

python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
python manage.py runserver

python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
python manage.py runserver

[!TIP]
Webアプリケーションを開発している場合、Multipassインスタンスで起動したサーバーにローカルのブラウザからアクセスするには、ポートフォワーディングの設定が必要です。
~/.ssh/configにLocalForwardを追加するか、VS Codeのリモートポートフォワーディング機能を利用します。

Host my-ubuntu-vm
    HostName my-ubuntu-vm.local
    User ubuntu
    IdentityFile ~/.ssh/id_multipass_rsa
    LocalForward 3000 localhost:3000 # 例: ローカルの3000番ポートをインスタンスの3000番ポートに転送

Host my-ubuntu-vm
    HostName my-ubuntu-vm.local
    User ubuntu
    IdentityFile ~/.ssh/id_multipass_rsa
    LocalForward 3000 localhost:3000 # 例: ローカルの3000番ポートをインスタンスの3000番ポートに転送

FAQ：よくある質問

Q1: VS Code Remote – SSHで接続できない場合はどうすれば良いですか？

A1: 以下の点を確認してください。

Multipassインスタンスが起動しているか: multipass listで状態を確認し、multipass start my-instanceで起動してください。
SSHキーのパーミッション: ローカルの秘密鍵（例: ~/.ssh/id_multipass_rsa）のパーミッションが600になっているか確認してください（chmod 600 ~/.ssh/id_multipass_rsa）。
~/.ssh/configの設定: HostName, User, IdentityFileのパスが正しいか確認してください。特に、my-ubuntu-vm.localのようなmDNSホスト名を使用している場合は、VM内でAvahiデーモンが正しく動作しているか確認してください。詳細は「mDNS (Avahi) を利用したホスト名解決の設定」セクションを参照してください。
Multipassインスタンス内のSSH設定: インスタンス内の/home/ubuntu/.ssh/authorized_keysに公開鍵が正しく登録されており、パーミッションが600になっているか確認してください。
ファイアウォール: macOSのファイアウォール設定がSSH接続をブロックしていないか確認してください。

Q2: Multipassインスタンスのパフォーマンスが遅いと感じる場合は？

A2: 以下の対策を試してみてください。

リソースの割り当て: multipass set my-instance.cpu=2 my-instance.memory=4G my-instance.disk=40Gのように、CPU、メモリ、ディスクサイズを増やしてみてください。
ファイル共有方法の見直し: 大量のファイルを頻繁にI/Oするプロジェクトの場合、multipass mountによる共有はパフォーマンスのボトルネックになることがあります。その場合は、git cloneでプロジェクトをインスタンス内に直接クローンし、開発を進めることを検討してください。
VS Code Serverの再インストール: まれにVS Code Serverが破損している場合があります。VS Codeのリモートインジケーターから「Remote-SSH: Kill VS Code Server on Host」を実行し、再接続してみてください。

Q3: 複数のMultipassインスタンスをVS Codeで管理するには？

A3: ~/.ssh/configファイルに、インスタンスごとに異なるHostエントリを追加することで管理できます。

Host my-instance-dev
  HostName my-instance-dev.local # mDNSで解決されるホスト名
  User ubuntu
  IdentityFile ~/.ssh/id_multipass_rsa

Host my-instance-test
  HostName my-instance-test.local # mDNSで解決されるホスト名
  User ubuntu
  IdentityFile ~/.ssh/id_multipass_rsa

Host my-instance-dev
  HostName my-instance-dev.local # mDNSで解決されるホスト名
  User ubuntu
  IdentityFile ~/.ssh/id_multipass_rsa

Host my-instance-test
  HostName my-instance-test.local # mDNSで解決されるホスト名
  User ubuntu
  IdentityFile ~/.ssh/id_multipass_rsa

このように設定することで、VS Codeのリモート接続リストにmy-instance-devとmy-instance-testが表示され、簡単に切り替えることができます。

まとめ：ローカルと変わらない開発体験

本記事では、macOS開発者がMultipassとVS Code Remote – SSH拡張機能を連携させ、快適なリモート開発環境を構築する方法を解説しました。

VS Code Remote – SSH拡張機能を導入することで、ローカルと変わらない開発体験をリモートのLinux環境で実現。
SSHキーの生成とインスタンスへの登録 – ~/.ssh/configの適切な設定により、セキュアかつシームレスな接続が可能に。Avahi/mDNSによるホスト名解決の活用は、IPアドレスの変動を気にせず常に同じホスト名で便利な接続を実現。
VS CodeからMultipassインスタンスに接続し、ファイル操作、ターミナル利用等をすべてローカル環境と同じ操作感で実現。

MultipassとVS Codeを連携することで、クリーンな開発環境を維持しつつ、Ubuntu環境のメリットを最大限に活用することができます。
さあ、今日からあなたもMultipassとVS Codeで、ローカルと変わらない快適なリモート開発体験を始めてみましょう！

次の記事では、Multipassインスタンス上にDocker環境を構築し、コンテナを使った開発・テストを効率的に行う方法を解説します。 Docker Desktopの代替としてのMultipassの活用法や、ホストOSからのDocker操作についても深掘りしますので、どうぞご期待ください！

Multipass on macOS 徹底活用 (4) – Docker環境をMultipassで構築・運用する

この記事が役に立ったら、ぜひチームに共有したり、X（旧Twitter）で感想をポストしてください！ハッシュタグ #Multipass活用ガイド #macOS開発をつけていただけると嬉しいです。

参考資料

免責事項

本記事の内容は、執筆時点での情報に基づいています。ソフトウェアのバージョンアップや環境によって、手順や結果が異なる場合があります。本記事の情報を利用したことによるいかなる損害についても、筆者および公開元は一切の責任を負いません。ご自身の責任においてご利用ください。

Post Views: 0

Multipass on macOS 徹底活用 (3) – VS Code連携で開発効率を爆上げ！

なぜmacOS開発者にMultipassとVS Code連携が必要なのか？

対象読者

動作検証環境

目次

VS Code Remote – SSH拡張機能の導入

拡張機能のインストール

基本的な設定

MultipassインスタンスへのSSH接続設定

SSHキーの生成とインスタンスへの登録

`cloud-init`で起動する際に公開鍵を登録する

VS CodeのSSH設定ファイル (`config`) の編集

mDNS (Avahi) を利用したホスト名解決の設定

SSH設定ファイル (`config`) の最終編集

SSH接続フローの図解

関連記事

VS CodeからMultipassインスタンスで開発する

リモート環境でのファイル操作とターミナル利用

開発プロジェクトのクローンと実行

FAQ：よくある質問

Q1: VS Code Remote – SSHで接続できない場合はどうすれば良いですか？

Q2: Multipassインスタンスのパフォーマンスが遅いと感じる場合は？

Q3: 複数のMultipassインスタンスをVS Codeで管理するには？

まとめ：ローカルと変わらない開発体験

次の記事

参考資料

免責事項

コメントを残すコメントをキャンセル

最も表示数の多い投稿

アーカイブ

カテゴリー

最近の投稿

なぜmacOS開発者にMultipassとVS Code連携が必要なのか？

対象読者

動作検証環境

目次

VS Code Remote – SSH拡張機能の導入

拡張機能のインストール

基本的な設定

MultipassインスタンスへのSSH接続設定

SSHキーの生成とインスタンスへの登録

cloud-initで起動する際に公開鍵を登録する

VS CodeのSSH設定ファイル (config) の編集

mDNS (Avahi) を利用したホスト名解決の設定

SSH設定ファイル (config) の最終編集

SSH接続フローの図解

関連記事

VS CodeからMultipassインスタンスで開発する

リモート環境でのファイル操作とターミナル利用

開発プロジェクトのクローンと実行

FAQ：よくある質問

Q1: VS Code Remote – SSHで接続できない場合はどうすれば良いですか？

Q2: Multipassインスタンスのパフォーマンスが遅いと感じる場合は？

Q3: 複数のMultipassインスタンスをVS Codeで管理するには？

まとめ：ローカルと変わらない開発体験

次の記事

参考資料

免責事項

SNSでもご購読できます。

コメントを残す コメントをキャンセル

RSS

最も表示数の多い投稿

アーカイブ

カテゴリー

最近の投稿

`cloud-init`で起動する際に公開鍵を登録する

VS CodeのSSH設定ファイル (`config`) の編集

SSH設定ファイル (`config`) の最終編集

コメントを残すコメントをキャンセル