VSCode Remote開発入門：Remote SSH・Dev Containers・WSLの使い方

はじめに

VSCodeの「Remote Development」拡張機能パックを使うと、ローカルのVSCodeからリモートサーバー・Dockerコンテナ・WSL内のコードを直接編集できます。ファイル転送や手動同期が不要で、ローカルと同じ操作感で開発できるのが特徴です。

この記事ではRemote SSH・Dev Containers・Remote WSLの基本的な使い方と、複数人で同じコードを編集できるLive Shareについてまとめます。

インストール

「Remote Development」拡張機能パックをインストールすると、以下の3つが一括で入ります。

拡張機能ID: ms-vscode-remote.vscode-remote-extensionpack

コマンドパレット（Cmd+Shift+P）から「Extensions: Install Extensions」を開き、「Remote Development」で検索してインストールします。

インストール後、左サイドバーにリモートエクスプローラーのアイコンが追加されます。

Remote SSH — リモートサーバーに接続する

前提条件

ローカルマシンにSSH鍵が設定済みであること
リモートサーバーへのSSH接続が可能であること

SSH設定ファイルを用意する

~/.ssh/config にサーバーの接続情報を書いておくと、VSCodeから選択して接続できます。

# ~/.ssh/config

Host myserver
    HostName 192.168.1.100
    User ubuntu
    IdentityFile ~/.ssh/id_rsa
    Port 22

Host staging
    HostName staging.example.com
    User deploy
    IdentityFile ~/.ssh/id_ed25519

接続する

コマンドパレット（Cmd+Shift+P）→「Remote-SSH: Connect to Host...」
~/.ssh/config に書いたホスト名の一覧が表示される
接続先を選ぶと新しいウィンドウが開き、リモートサーバーに接続される

接続後はリモートサーバーのファイルシステムがエクスプローラーに表示され、ターミナルはサーバー上のシェルが起動します。

拡張機能をリモートにインストールする

Remote SSH接続中は、一部の拡張機能をリモート側にもインストールする必要があります。拡張機能パネルで「Install in SSH: myserver」ボタンから個別にインストールできます。

よく使う言語のLSP（rust-analyzer・ruby-lsp など）はリモート側にインストールします。

ポートフォワーディング

リモートサーバーで起動したWebサーバーにローカルのブラウザからアクセスできます。

ターミナルパネルの「PORTS」タブを開く
「Forward a Port」からポート番号を入力（例：3000）
ローカルの http://localhost:3000 でアクセス可能になる

Dev Containers — Dockerコンテナ内で開発する

前提条件

Dockerがローカルにインストール済みであること

devcontainer.json を作成する

プロジェクトルートに .devcontainer/devcontainer.json を置くことでコンテナの設定を定義します。

// .devcontainer/devcontainer.json
{
  "name": "Ruby on Rails",
  "image": "mcr.microsoft.com/devcontainers/ruby:3.3",
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "22"
    }
  },
  "postCreateCommand": "bundle install",
  "customizations": {
    "vscode": {
      "extensions": [
        "Shopify.ruby-lsp",
        "esbenp.prettier-vscode"
      ]
    }
  },
  "forwardPorts": [3000]
}

既存の docker-compose.yml を使う場合：

{
  "name": "My App",
  "dockerComposeFile": "../docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/workspace"
}

コンテナで開く

コマンドパレット →「Dev Containers: Open Folder in Container...」
または、プロジェクトを開いた状態で右下に表示される「Reopen in Container」をクリック

コンテナのビルドが完了すると、VSCodeがコンテナ内のファイルシステムに接続されます。ターミナルはコンテナ内のシェルになります。

GitHub Codespaces との互換性

devcontainer.json は GitHub Codespaces でもそのまま使えます。リポジトリに .devcontainer/ をコミットしておけば、チームメンバーが同じ環境をすぐに再現できます。

Remote WSL — Windows上のWSLで開発する

前提条件

Windows上でWSL2が有効になっていること

接続する

WSLのターミナルでプロジェクトディレクトリに移動
code . を実行するとWSL内のディレクトリがVSCodeで開く

または、コマンドパレット →「Remote-WSL: New WSL Window」から接続します。

WSL接続中はLinuxのファイルシステムとパッケージが使われるため、WSL側にインストールしたツール（rbenv・nvm など）がそのまま動きます。

# WSLターミナルで
cd ~/projects/myapp
code .    # VSCodeがWSLモードで開く

インストール

拡張機能ID: ms-vsliveshare.vsliveshare

Remote Development パックとは別にインストールします。

セッションを開始する

コマンドパレット →「Live Share: Start Collaboration Session」
GitHubまたはMicrosoftアカウントでサインイン
共有URLが生成されてクリップボードにコピーされる
URLを参加者に共有する

参加者はURLを開くとVSCodeが起動し、ホストのファイルをリアルタイムで閲覧・編集できます。

できること

ファイルの同時編集（カーソル位置が相手に表示される）
共有ターミナル（ホストが許可した場合）
共有デバッグセッション
音声通話（Live Share Audio を追加インストール）

コードレビューやペアプログラミング、ハンズオン形式の勉強会などで活用できます。

まとめ

拡張機能	用途
Remote SSH	リモートサーバーのコードをローカルVSCodeで直接編集
Dev Containers	Dockerコンテナ内で開発。チームで環境を統一しやすい
Remote WSL	Windows上でWSL2環境のコードを快適に編集
Live Share	リアルタイム共同編集・ペアプログラミング

VSCodeのキーボードショートカットや言語別セットアップは「VSCodeチートシート：ショートカット・settings.json・言語別セットアップまとめ」を参照してください。

VSCode Remote開発入門：Remote SSH・Dev Containers・WSLの使い方

はじめに

インストール

Remote SSH — リモートサーバーに接続する

前提条件

SSH設定ファイルを用意する

接続する

拡張機能をリモートにインストールする

ポートフォワーディング

Dev Containers — Dockerコンテナ内で開発する

前提条件

devcontainer.json を作成する

コンテナで開く

GitHub Codespaces との互換性

Remote WSL — Windows上のWSLで開発する

前提条件

接続する

Live Share — 複数人で同じコードをリアルタイム編集する

インストール

セッションを開始する

できること

まとめ