VSCodeで多段SSH接続

はじめに

会社や大学などでサーバにSSH接続する際に、社内ネットワークサーバをいくつか経由しなければならないことがたまにあります。毎度毎度、手動で接続することは面倒なので、一度に接続できるように設定をし、さらにVSCode環境で作業できるように整えていきたいと思います。
※SSH接続の初期設定やVSCodeのインストールは既にできていると仮定して、話を進めていきます。
※多段SSH接続の設定はMACやLinux環境（コマンドなど）を想定していますが、Windows環境でもコマンドなどを適宜変更することにより設定可能です。
※VSCodeの設定については共通です。

多段SSH接続

多段SSH接続では毎回のログイン時に結構な手間が生じ、またSFTPを使用してファイルを送受信する際に少々手間が掛かってしまいます。
sshディレクトリ下でconfigを設定することにより、その手間を解消する方法を紹介します。
※MACやLinux環境を想定しているため、Windows環境では適宜GUIや適切なコマンドを用いてください。
※接続先の環境に応じて適宜変更してください。

1. まず.sshディレクトリに移動します。コマンド「cd .ssh」
2. 移動した.sshディレクトリ下に「config」ファイルを作成します。コマンド「touch config」
3. vimなどでconfigを以下のように書き換えます。コマンド「vim config」

※（）は適宜消してください
※以下は「[e-mail]」→「[e-mail]」→「[e-mail]」としてSSH接続すると仮定

config

Host HogeServer（←任意のホスト名1）
        HostName hogehoge.hoge.jp（←接続先アドレス）
        port 22（←既定のポート番号を指定してください）
        User hoge（←ユーザ名を指定）
        IdentityFile ~/.ssh/id_hoge_com（←共通鍵のPATHを指定）
Host FooServer（←任意のホスト名2）
        HostName foofoo.foo.jp（←接続先アドレス）
        port 22（←既定のポート番号を指定してください）
        User foo（←ユーザ名を指定）
        ProxyCommand  ssh -W %h:%p HogeServer
Host BarServer（←任意のホスト名3）
        HostName barbar.bar.jp（←接続先アドレス）
        port 22（←既定のポート番号を指定してください）
        User bar（←ユーザ名を指定）
        ProxyCommand  ssh -W %h:%p FooServer

※Hostの名前（上記ならHogeServerなど）を変更したら、ProxyCommand内のホスト名も変更してください。

4.保存して終了。(:wq)
5.ディレクトリを一つ戻る。コマンド「cd ..」
6.コマンド「ssh (任意のホスト名３)」を実行する。（それぞれ適当なパスワードを入力する）

これで、二つのサーバをジャンプして目的サーバに接続することができると思います。以降はコマンド「ssh (任意のホスト名３)」を実行するだけで（パスワードは毎回必要ですが）サーバに接続することができます。
嬉しいことに、SFTPも簡単に行うことができます。コマンド「sftp (任意のホスト名３)」を実行するだけです。後は「put」や「get」でファイルを送受信することが可能です。
ただし、今回はMacで環境構築を行いましたので、Windowsでは若干異なる部分も生じる可能性があります。

VSCodeでSSH接続

ここでは、VSCodeでSSH接続する方法を簡単に説明します。
まず、VSCodeでMarketを開きます。「View」→「Extensions」または「左の四角マークが４つあるところ」をクリックするとマーケットを開くことができます。

ここの検索フォームで「Remote-SSH」と「Remote Development」を検索して、インストールします。


インストール後に、左下に緑色の「><」マークが出ていればOK！

接続してみよう！

左下の緑色のボタンを押してSSH接続します。緑色のボタンを押してみると以下のようなポップが出ます。

ここで、「Connect to Host」を選択すると、先ほど設定した任意のホスト名が表示されると思います。

最終的に接続したいサーバ（BarServer）を選択すると、それぞれのパスワード入力が求められるので、適宜入力してください。すると、まるでローカルのように快適に作業することができます。

リモートでコードもターミナルも出力結果も同時に見ることができる！なんて素晴らしいのでしょうか！

最後に

上記設定はMACやLinux環境を想定していましたが、Windows環境でも設定可能です。（VSCodeの画像はWindows環境でスクショしているぐらいなので。）
どこかのタイミングでWindows環境の設定も掲載できればと思います。