Mac の VSCode からリモートの Linux マシンの Docker コンテナに接続して開発する

はじめに

タイトル通り、Mac 上で稼働する Visual Studio Code からリモートの Linux マシンに Remote - SSH 拡張で接続して、リモートの Linux マシン上で Remote - Containers 拡張で Dev Container を動かす手順を一からまとめる。

VSCode の以下ドキュメントの Connect using the Remote - SSH extension (recommended) の手順に従うのが最も楽。そこに至るまでの基本的なセットアップを本記事ではカバーする。

環境前提

• クライアント
  • macOS Monterey
  • バージョン 12.4
  • MacBook Pro (13-inch, M1, 2020)
  • チップ: Apple M1
• VSCode (Mac にインストール)
  • 1.68.0 (Universal)
• VSCode 拡張機能
  • Remote - Containers (v0.238.2)
  • Remote - SSH (v0.82.1)
• リモートの Linux マシン
  • ubuntu 20.04
  • Azure 上に VM として構築

設定手順

Mac 端末を購入した直後の前提で、一からセットアップする手順を記載する。
当然設定済みの項目があるはずなので、それらは適宜飛ばして OK。

1. VSCode インストール

以下から Mac 版をダウンロードする。dmg 入りの zip ファイルがダウンロードされるので展開してアプリケーション ディレクトリにコピーする。

2. VSCode に拡張機能をインストール

VSCode に以下 2 点の拡張機能をインストールする。

3. 秘密鍵と公開鍵のペアを作成

Mac でターミナルを開き、以下コマンドを入力して秘密鍵と公開鍵のペアを作成する。パスフレーズは任意。

$ ssh-keygen -t rsa

4. リモートの Linux マシンを作成 & SSH 接続設定

好きなクラウドや仮想化環境で Linux マシンを作成し、先ほど作成した鍵ペアを使って SSH 接続できるように設定する。

(参考) Azure 仮想マシンの場合の設定

以下は Azure 仮想マシン (VM) を使う場合の備忘。

スポット インスタンスを利用するとオンデマンド比 80%+ オフで安く使える。

VM 作成時に公開鍵を指定できるので楽チン。

VM & IP 作成後に DNS 名ラベルを付与すると良い。

5. Linux マシンに Docker 等をインストール

以下の Docker 公式ドキュメントに倣って Docker 等をインストールする。以下コマンドは sudo 可能な非 root ユーザーで実行する前提。例によってコマンドは古くなるかもしれないため、実行前に公式ドキュメントを参照すること。

リポジトリのセットアップ

sudo apt-get update
sudo apt-get install \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg

echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

インストールと確認

sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin

sudo docker run hello-world

非ルートユーザーでも実行可能に設定

sudo groupadd docker
sudo usermod -aG docker $USER

# reboot じゃなく exit でも良いかも
sudo reboot

# 確認
docker run hello-world

6. 接続確認

上記で設定完了。あとは VSCode で実際に接続できるかを確認する。

1. Mac 上の VSCode で [Remote-SSH: Connect to Host] でリモートの Linux VM に接続
2. SSH: hoge-vm に接続した VSCode で devcontainer.json を含む Git リポジトリをクローン
3. SSH: hoge-vm に接続した VSCode で [Re-Open in Container] を選択

以上。