SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

開発用エディタのド定番「VSCode」を使いこなそう

VSCodeの拡張機能を使ってリモート開発しよう

開発用エディタのド定番「VSCode」を使いこなそう 第12回

SSHによるシンプルなリモート接続

 リモート先にSSHで接続し、ファイル操作するのは最も基本的なリモート開発の形態です。

 拡張機能「Remote – SSH」によってリモート先へのSSH接続を隠ぺいし、ローカルで開発しているようにリモート側のファイルを作成、編集、操作できます(図1)。リモート接続先ではSSHサーバ機能を用意するだけなので、手軽にリモート開発を行えます。

図1:SSHによるシンプルなリモート開発
図1:SSHによるシンプルなリモート開発

 拡張機能「Remote Development」のインストールによって、アクティビティバーに[リモート エクスプローラー]アイコン()が配置されるので、クリックしてリモート エクスプローラーをプライマリサイドバーに表示します。リモート エクスプローラーでは、SSHや後述するトンネルの接続を管理します(図2)。

図2:リモート エクスプローラー
図2:リモート エクスプローラー

 接続先を登録するために、リモート エクスプローラー上部の「リモート(トンネル/SSH)」配下の「SSH」にマウスカーソルをホバーさせ、表示される歯車アイコンをクリックします(右クリックして[SSH構成ファイルを開く]でも同様)。コマンドパレットに、「/Users/user/.ssh/config」など、いくつかの候補が表示されるので、「/Users/user/.ssh/config」を選択します(図3、user部分は各自のユーザ名)。

図3:SSH構成ファイルを開く
図3:SSH構成ファイルを開く

 エディタグループに/Users/user/.ssh/configが開かれるので、このファイルを編集します(図4)。

図4:SSH構成ファイルの編集
図4:SSH構成ファイルの編集

 構成ファイルには、既定で以下の項目が記述されています。

  • Host:接続の名前
  • Hostname:ホスト名またはIPアドレス
  • User:リモートホストのユーザ名

 ひとまず、この3つを設定しておけばリモート接続できます。ファイルを保存すると、リモート エクスプローラーの「SSH」欄に、指定した名前で接続が表示されるので、マウスカーソルをホバーさせて表示される右矢印アイコンをクリックします。

 コマンドパレットに、「"Ubuntu"のフィンガープリントは"SHA-256:……"です。」などと表示されるので、[続行]を選択します(図5)。1回承認すれば、次回以降は表示されません。

図5:フィンガープリントの承認
図5:フィンガープリントの承認

 続けて、SSH構成ファイルのUserに指定したユーザのパスワードを要求されるので入力します(図6)。

図6:パスワードの入力
図6:パスワードの入力

 ここで、リモート側に拡張機能VS Code Serverが自動的にインストールされます。この拡張機能によって、リモート側のファイルや拡張機能、設定の管理が実行されます。

 ファイル エクスプローラーには「リモートに接続しました。」と表示されています。リモート側のフォルダーを開いたり、ファイルを作成してリモート側に保存したりできます(図7)。

図7:リモート接続完了
図7:リモート接続完了

 ターミナルを開くと、リモート側のプロンプトが表示されているはずなので、ここで直接リモート側のファイルシステムにアクセスして操作することもできます(図8)。

図8:リモート側のターミナルのオープン
図8:リモート側のターミナルのオープン

 ローカルのVS Codeにインストールされている拡張機能は、リモート側のVS Codeにもインストールできます(図9)。

図9:リモート側に拡張機能をインストール
図9:リモート側に拡張機能をインストール

 設定も、リモート側に独自に保存できます(図10)。保存先は、~/.vscode-server/data/Machine/settings.jsonとなります(Linuxの場合)。

図10:リモート側に設定を保存
図10:リモート側に設定を保存

 なお、拡張機能と設定はユーザのVS Code Serverの作業領域に保存されるので、後述するトンネル接続と共有されます。

 リモート接続が不要になったら、[ファイル]-[リモート接続を閉じる]を選択してリモート接続をクローズしてください。

次のページ
トンネルによるリモート接続

この記事は参考になりましたか?

開発用エディタのド定番「VSCode」を使いこなそう連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/21241 2025/04/04 11:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー