VSCodeでサーバーに接続する完全ガイド！Remote-SSHで快適リモート開発

プログラミング・IT

「サーバーにあるファイルを編集するのに、毎回コマンドラインで作業するのは大変…」「ローカルとリモートでファイルを同期させるのが面倒…」そんな悩みを抱えていませんか？

Visual Studio Code（VSCode）のRemote-SSH拡張機能を使えば、リモートサーバー上のファイルを、まるでローカルのファイルのように編集できます。コード補完、デバッグ、拡張機能まで、すべてがリモート環境で使えるようになります。

この記事では、VSCodeを使ってSSH接続でサーバーに接続する方法を、初心者にも分かりやすく完全解説します。画像がなくても理解できるよう、手順を丁寧に説明していきます。

スポンサーリンク
  1. Remote-SSHとは？何ができるの？
    1. Remote-SSHでできること
    2. 従来の方法との違い
  2. 事前準備：必要なものを揃えよう
    1. 1. 必要なソフトウェア
    2. 2. SSH接続の基本情報
    3. 3. SSH鍵の準備（推奨）
  3. ステップ1：SSH鍵を作成する（鍵認証の場合）
    1. Windows での鍵作成
    2. macOS / Linux での鍵作成
    3. 公開鍵をサーバーに登録
  4. ステップ2：VSCodeにRemote-SSH拡張機能をインストール
    1. 拡張機能のインストール手順
    2. インストール完了の確認
  5. ステップ3：SSH設定ファイルを編集する
    1. SSH設定ファイルを開く
    2. 設定ファイルに接続情報を追加
    3. 設定項目の説明
    4. 設定を保存
  6. ステップ4：サーバーに接続する
    1. 接続の手順
    2. 初回接続時の手順
    3. 接続成功の確認
  7. ステップ5：リモートフォルダを開く
    1. フォルダを開く手順
    2. フォルダが開いたら
  8. ステップ6：ターミナルを開く
    1. ターミナルを開く方法
    2. ターミナルでできること
  9. リモート開発の便利な機能
    1. 1. ポートフォワーディング
    2. 2. リモート拡張機能のインストール
    3. 3. デバッグ
    4. 4. 複数の接続を同時に管理
  10. よくあるトラブルと解決方法
    1. トラブル1：接続がハングする
    2. トラブル2：パスワードを何度も聞かれる
    3. トラブル3：権限エラーが出る
    4. トラブル4：接続先が表示されない
    5. トラブル5：GitHubの認証を求められる
  11. 応用テクニック
    1. ジャンプホスト経由の接続
    2. ファイアウォール内のサーバーへの接続
  12. 接続を終了する方法
    1. 切断の方法
  13. まとめ：Remote-SSHで開発が変わる

Remote-SSHとは？何ができるの？

まず、Remote-SSH拡張機能がどんなものか理解しましょう。

Remote-SSHでできること

Remote-SSHは、VSCodeからSSH経由でリモートサーバーに接続し、リモート環境で直接開発できるようにする拡張機能です。

具体的に何ができる？

  1. リモートのファイルを直接編集
  • サーバー上のファイルをローカルと同じように編集
  • FTP/SFTPでアップロードする必要なし
  1. コード補完・入力支援が使える
  • インテリセンス（自動補完）が完全動作
  • ローカル開発と同じ快適さ
  1. デバッグもできる
  • ブレークポイント設定
  • ステップ実行
  • 変数の確認
  1. 統合ターミナル
  • サーバーのターミナルをVSCode内で使用
  • 別途SSH接続する必要なし
  1. 拡張機能が使える
  • GitLens、Python、ESLintなど、各種拡張機能がリモートでも動作

従来の方法との違い

従来の開発スタイル：

  • ローカルで編集 → FTP/SCPでアップロード → 動作確認
  • またはVimやnanoでサーバー上で直接編集

Remote-SSHを使った開発スタイル：

  • リモートファイルをVSCodeで直接編集
  • 保存すると即座にサーバーに反映
  • ローカル開発と同じ快適さ

事前準備：必要なものを揃えよう

Remote-SSHを使う前に、いくつか準備が必要です。

1. 必要なソフトウェア

クライアント側（あなたのパソコン）：

  • Visual Studio Code（最新版推奨）
  • SSH クライアント
  • Windows 10/11： OpenSSH Client（標準搭載）
  • macOS： 標準で利用可能
  • Linux： openssh-client パッケージ

サーバー側：

  • SSH サーバーが動作していること
  • Linux、Unix系 OS（WindowsやmacOSのSSHサーバーはまだ正式サポート外）

2. SSH接続の基本情報

接続に必要な情報を確認しておきましょう：

  • サーバーのIPアドレスまたはホスト名
  • ユーザー名
  • 認証方法（パスワード認証または鍵認証）
  • ポート番号（通常は22）

3. SSH鍵の準備（推奨）

パスワード認証でも接続できますが、鍵認証の方がセキュアで便利です。

ステップ1：SSH鍵を作成する（鍵認証の場合）

すでに鍵認証を使っている場合は、このステップをスキップできます。

Windows での鍵作成

手順：

  1. PowerShellまたはコマンドプロンプトを開く
  2. .sshディレクトリに移動：
   cd C:\Users\あなたのユーザー名\.ssh
  1. SSH鍵を生成：
   ssh-keygen -t rsa -b 2048 -f id_rsa_vscode
  1. パスフレーズを聞かれたら：
  • セキュリティを高めたい場合：パスフレーズを入力
  • 手軽に使いたい場合：何も入力せずEnterを2回押す
  1. 2つのファイルが作成されます：
  • id_rsa_vscode（秘密鍵）
  • id_rsa_vscode.pub（公開鍵）

macOS / Linux での鍵作成

手順：

  1. ターミナルを開く
  2. .sshディレクトリに移動：
   cd ~/.ssh
  1. SSH鍵を生成：
   ssh-keygen -t rsa -b 2048 -f id_rsa_vscode
  1. パスフレーズの入力（Windowsと同様）
  2. 鍵ファイルが生成される

公開鍵をサーバーに登録

作成した公開鍵（.pub）をサーバーに登録します。

方法1：ssh-copy-idコマンドを使う（Linux/macOS）

ssh-copy-id -i ~/.ssh/id_rsa_vscode.pub ユーザー名@サーバーアドレス

方法2：手動で登録

  1. 公開鍵の内容をコピー：
   cat ~/.ssh/id_rsa_vscode.pub
  1. サーバーにSSH接続
  2. ~/.ssh/authorized_keysに公開鍵を追加：
   mkdir -p ~/.ssh
   echo "公開鍵の内容" >> ~/.ssh/authorized_keys
   chmod 700 ~/.ssh
   chmod 600 ~/.ssh/authorized_keys

ステップ2：VSCodeにRemote-SSH拡張機能をインストール

いよいよVSCode側の設定です。

拡張機能のインストール手順

  1. VSCodeを起動
  2. 拡張機能ビューを開く
  • サイドバーの拡張機能アイコン（四角が4つ重なったマーク）をクリック
  • または、Ctrl + Shift + X（Mac: ⌘ + Shift + X）
  1. 検索バーに入力
  • 「Remote Development」と入力
  • または「Remote-SSH」と入力
  1. Remote Developmentをインストール
  • 「Remote Development」という拡張機能を見つける
  • 「インストール」ボタンをクリック

Remote Developmentには以下が含まれます：

  • Remote – SSH
  • Remote – WSL
  • Remote – Containers
  • Remote – SSH: Editing Configuration Files

インストール完了の確認

インストールが完了すると：

  1. 左下に緑色のアイコンが表示される
  • 「><」のような形
  • これをクリックすると、リモート接続のメニューが開く
  1. サイドバーに新しいアイコンが追加される
  • 「リモートエクスプローラー」というアイコン

ステップ3：SSH設定ファイルを編集する

接続先の情報をVSCodeに登録します。

SSH設定ファイルを開く

  1. 左下の緑色のアイコン「><」をクリック
  2. メニューから「Remote-SSH: SSH構成ファイルを開く」を選択
  3. 設定ファイルの場所を選択：
  • Windows: C:\Users\ユーザー名\.ssh\config
  • macOS/Linux: ~/.ssh/config

どちらを選ぶ？

通常は一番上に表示される、ユーザーのホームディレクトリにあるconfigを選びます。

設定ファイルに接続情報を追加

configファイルが開いたら、以下の形式で接続情報を記述します。

基本的な書式：

Host 接続名（任意の名前）
    HostName サーバーのIPアドレスまたはホスト名
    User ログインユーザー名
    Port 22
    IdentityFile 秘密鍵のフルパス（鍵認証の場合）

具体例1：パスワード認証の場合

Host myserver
    HostName 192.168.1.100
    User webadmin
    Port 22

具体例2：鍵認証の場合（Windows）

Host production-server
    HostName 203.0.113.50
    User deploy
    Port 22
    IdentityFile C:\Users\username\.ssh\id_rsa_vscode

具体例3：鍵認証の場合（macOS/Linux）

Host dev-server
    HostName dev.example.com
    User developer
    Port 22
    IdentityFile ~/.ssh/id_rsa_vscode

具体例4：カスタムポートを使う場合

Host custom-server
    HostName example.com
    User admin
    Port 2222
    IdentityFile ~/.ssh/id_rsa_vscode

設定項目の説明

Host：

  • 接続先を識別する名前（自由に設定可能）
  • この名前がVSCodeの接続先リストに表示される
  • 短くて分かりやすい名前がおすすめ

HostName：

  • サーバーの実際のアドレス
  • IPアドレスまたはドメイン名

User：

  • SSH接続に使用するユーザー名

Port：

  • SSH接続に使用するポート番号
  • デフォルトは22
  • サーバー側でポート番号を変更している場合は、その番号を指定

IdentityFile：

  • 秘密鍵のパス（鍵認証を使う場合のみ）
  • 必ずフルパスで指定
  • パスにスペースが含まれる場合は、引用符で囲む

設定を保存

  1. 設定の記述が終わったら、Ctrl + S（Mac: ⌘ + S）で保存
  2. ファイルを閉じてOK

ステップ4：サーバーに接続する

いよいよサーバーに接続してみましょう！

接続の手順

方法1：リモートエクスプローラーから接続

  1. サイドバーの「リモートエクスプローラー」アイコンをクリック
  2. 上部のドロップダウンから「リモート（トンネル/SSH）」を選択
  3. 「SSH」セクションに、configで設定した接続先が表示される
  4. 接続先の名前の右側にある矢印アイコンをクリック
  • →アイコン：現在のウィンドウで接続
  • +アイコン：新しいウィンドウで接続

方法2：コマンドパレットから接続

  1. Ctrl + Shift + P（Mac: ⌘ + Shift + P）でコマンドパレットを開く
  2. 「Remote-SSH: Connect to Host」と入力して選択
  3. リストから接続先を選択

初回接続時の手順

初めて接続するサーバーの場合、以下の確認が行われます。

Step 1：プラットフォームの選択

サーバーのOSを選択：

  • Linux
  • macOS
  • Windows

通常はLinuxを選択します。

Step 2：フィンガープリントの確認

「このサーバーのフィンガープリントを信頼しますか？」と聞かれます。

  • 問題なければ「続行」または「Continue」をクリック

Step 3：パスワードまたはパスフレーズの入力

  • パスワード認証の場合： サーバーのパスワードを入力
  • 鍵認証（パスフレーズあり）の場合： 鍵のパスフレーズを入力
  • 鍵認証（パスフレーズなし）の場合： 自動でログイン

Step 4：VS Code Serverのインストール

初回接続時、サーバー側にVS Code Serverが自動インストールされます。

  • 数分かかることがあります
  • 進行状況が画面右下に表示される
  • 完了するまで待つ

接続成功の確認

接続に成功すると：

  1. 画面左下に接続先の名前が表示される
  • 例：「SSH: myserver」
  1. 新しいウィンドウが開く（新しいウィンドウで接続を選択した場合）
  2. ウィンドウ全体がリモート環境になる

ステップ5：リモートフォルダを開く

接続できたら、サーバー上のフォルダを開きましょう。

フォルダを開く手順

  1. 「ファイル」メニュー → 「フォルダーを開く」
  • またはCtrl + K → Ctrl + O
  1. サーバー上のパスを入力
  • 例：/home/username/project
  • 例：/var/www/html
  1. 「OK」をクリック
  2. パスワードまたはパスフレーズの入力を求められる場合がある
  • これが最後の認証です

フォルダが開いたら

  • エクスプローラーにサーバー上のファイル一覧が表示される
  • ローカルファイルと同じように操作できる
  • ファイルを開いて編集すると、保存時にサーバーに直接反映される

ステップ6：ターミナルを開く

サーバー上でコマンドを実行したい場合、統合ターミナルを使います。

ターミナルを開く方法

  1. 「ターミナル」メニュー → 「新しいターミナル」
  • またはCtrl + Shift + @（Mac: ⌘ + Shift + @）
  1. VSCode下部にターミナルが開く
  2. サーバー上のシェルが起動している
  • bashやzshなど、サーバーの標準シェル

ターミナルでできること

  • サーバー上のコマンドを実行
  • Gitコマンド
  • パッケージのインストール（npm、pip など）
  • サーバーの起動（node、python -m http.server など）

リモート開発の便利な機能

Remote-SSHには、さらに便利な機能があります。

1. ポートフォワーディング

サーバー上で動作しているWebアプリを、ローカルのブラウザで確認できます。

手順：

  1. サーバー上でアプリを起動（例：ポート5000で起動）
  2. コマンドパレットを開く（Ctrl + Shift + P）
  3. 「Forward a Port」を選択
  4. ポート番号を入力（例：5000）
  5. ローカルのブラウザでhttp://localhost:5000にアクセス

自動フォワーディング：

VSCodeが自動的に起動中のポートを検出し、フォワーディングを提案してくれることもあります。

2. リモート拡張機能のインストール

拡張機能は、ローカルとリモートで別々に管理されます。

リモート環境に拡張機能をインストール：

  1. 拡張機能ビューを開く
  2. インストールしたい拡張機能を見つける
  3. 「SSH: 接続先名 にインストール」ボタンをクリック

よく使う拡張機能を自動インストール：

設定（settings.json）に以下を追加：

"remote.SSH.defaultExtensions": [
    "ms-python.python",
    "eamodio.gitlens",
    "esbenp.prettier-vscode"
]

3. デバッグ

リモート環境でもデバッグが可能です。

デバッグの手順：

  1. .vscode/launch.jsonでデバッグ設定を作成
  2. ブレークポイントを設定
  3. F5キーでデバッグ開始
  4. アプリはサーバー上で実行され、デバッガがアタッチされる

4. 複数の接続を同時に管理

複数のサーバーに同時接続することもできます。

手順：

  1. 最初のサーバーに接続
  2. もう一度左下の「><」アイコンをクリック
  3. 「Remote-SSH: Connect to Host」を選択
  4. 別のサーバーを選択
  5. 新しいウィンドウで2つ目のサーバーに接続

よくあるトラブルと解決方法

Remote-SSHを使っていると、いくつかのトラブルに遭遇することがあります。

トラブル1：接続がハングする

症状：

  • 接続中に止まってしまう
  • 「Connecting to SSH Host…」から進まない

解決方法：

  1. コマンドパレットを開く
  2. 「Remote-SSH: Kill VS Code Server on Host」を実行
  3. もう一度接続を試みる

根本的な解決：

サーバー側の~/.vscode-serverフォルダを削除：

rm -rf ~/.vscode-server

トラブル2：パスワードを何度も聞かれる

症状：

  • 接続のたびに何度もパスワード入力が必要

解決方法1：鍵認証に切り替える

パスワード認証より鍵認証の方が快適です。

解決方法2：ControlMaster を使う（macOS/Linux）

SSH設定ファイルに以下を追加：

Host *
    ControlMaster auto
    ControlPath ~/.ssh/sockets/%r@%h-%p
    ControlPersist 600

これにより、一度の認証で複数の接続を共有できます。

トラブル3：権限エラーが出る

症状：

  • Permission denied
  • ファイルが開けない、保存できない

原因：

  • SSH鍵のパーミッションが不適切
  • サーバー側のファイルパーミッションの問題

解決方法：

秘密鍵のパーミッション修正（ローカル）：

chmod 600 ~/.ssh/id_rsa_vscode

公開鍵のパーミッション修正（サーバー）：

chmod 700 ~/.ssh
chmod 600 ~/.ssh/authorized_keys

トラブル4：接続先が表示されない

症状：

  • configで設定したのに、接続先リストに表示されない

解決方法：

  1. リモートエクスプローラーのリフレッシュアイコンをクリック
  2. VSCodeを再起動
  3. configファイルの記述ミスを確認
  • インデントは半角スペース4つ
  • タブ文字は使わない

トラブル5：GitHubの認証を求められる

症状：

  • VSCode 1.82.0以降で、GitHub認証のポップアップが表示される

原因：

  • 新しいバージョンでは、Remote機能にGitHub認証が統合された

対処法：

  1. GitHubアカウントを持っている場合：
  • 「許可」をクリック
  • ブラウザでGitHubにログイン
  • VSCodeに戻る
  1. GitHubアカウントを持っていない場合：
  • GitHubアカウントを作成するか
  • 認証をスキップ（一部機能が制限される可能性）

応用テクニック

より高度な使い方を紹介します。

ジャンプホスト経由の接続

会社のネットワークなどで、直接サーバーに接続できない場合に使います。

シナリオ：

  • 踏み台サーバー（jump-box）経由でしか本番サーバーにアクセスできない

設定例：

# 踏み台サーバー
Host jump-box
    HostName 203.0.113.10
    User jumpuser
    IdentityFile ~/.ssh/jump_key

# 本番サーバー（踏み台経由）
Host production
    HostName 10.0.1.50
    User produser
    IdentityFile ~/.ssh/prod_key
    ProxyJump jump-box

この設定で「production」に接続すると、自動的にjump-box経由で接続されます。

ファイアウォール内のサーバーへの接続

インターネットに接続できないサーバーの場合、VS Code Serverを手動でインストールする必要があります。

手順：

  1. 別のマシンでVS Code Serverをダウンロード
  2. サーバーに手動で転送
  3. 特定の場所に配置

詳細は公式ドキュメントを参照してください。

接続を終了する方法

作業が終わったら、接続を切断しましょう。

切断の方法

方法1：メニューから

  1. 「ファイル」メニュー → 「リモート接続を閉じる」

方法2：左下のアイコンから

  1. 左下の「SSH: 接続先名」をクリック
  2. 「Close Remote Connection」を選択

方法3：VSCodeを閉じる

  • VSCodeを閉じると自動的に接続も切断される

まとめ：Remote-SSHで開発が変わる

VSCodeのRemote-SSH拡張機能を使えば、リモート開発が驚くほど快適になります。

このガイドで学んだこと

  1. Remote-SSH拡張機能のインストール
  2. SSH鍵の作成と登録
  3. SSH設定ファイルの編集
  4. サーバーへの接続手順
  5. リモートフォルダの操作
  6. ターミナルの使用
  7. トラブルシューティング

Remote-SSHのメリット

✅ ローカルとリモートでファイルを同期する手間がなくなる
✅ リモート環境でも快適なコード補完が使える
✅ デバッグもローカルと同じように使える
✅ 複数のサーバーを簡単に切り替えられる
✅ ターミナルもVSCode内で完結

こんな人におすすめ

  • Webサーバー上で開発している人
  • クラウド環境（AWS、Azure、GCPなど）で作業する人
  • 複数のサーバーを管理している人
  • ローカルPCのスペックが低く、リモートの高性能マシンを使いたい人
  • IoTデバイスやRaspberry Piで開発している人

注意点

  • 初回接続時、サーバー側に数百MBのデータがインストールされる
  • サーバーのリソース（CPU、メモリ）を若干消費する
  • ネットワーク接続が不安定だと作業に支障が出る

次のステップ

Remote-SSHに慣れたら、以下も試してみましょう：

  • Remote – Containers： Docker環境に接続
  • Remote – WSL： Windows上のLinux環境（WSL）に接続
  • GitHub Codespaces： ブラウザだけでクラウド開発環境

VSCodeのRemote Development機能は、開発者の働き方を大きく変える可能性を秘めています。ぜひこの記事を参考に、快適なリモート開発環境を構築してください！

困ったときは、VSCodeの公式ドキュメントやコミュニティフォーラムも活用してみましょう。それでは、快適なリモート開発ライフを！

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました