【図解・Mac・Windows】VSCodeでRemote Developmentを使うときのSSHの設定いろいろ【多段・HTTPプロキシ(認証あり・なし)・Socks5プロキシ・Port指定】

VSCodeでリモートのサーバーと接続して開発するためのエクステンションRemote DevelopmentでSSH接続する場合の設定方法についてです。Mac・Windows両方の設定例を多段接続・HTTPプロキシ・Socks5プロキシ・認証・Port指定等いくつかの接続方法別にまとめました。

# Remote Developmentをインストール【Mac・Windows】
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

上記URLのRemote Developmentのエクステンションをインストールしてください。もし会社等のプロキシ環境下でVSCodeを使用している場合VSCodeのプロキシ設定が必要なことに注意してください。また、VSCodeのバージョンが古いとプロキシ設定がうまく反映されないことがあるようなので最新版に更新しましょう。



# OpenSSHのインストール【Windows】
参考: https://docs.microsoft.com/ja-jp/windows-server/administration/openssh/openssh_install_firstuse

上記URLを参考にOpenSSHをインストールしてください。
Macの場合はデフォルトでSSHが使えるので不要です。

管理者として PowerShell を起動し以下を実行。

```powershell
# OpenSSHの確認
Get-WindowsCapability -Online | ? Name -like 'OpenSSH*'

# Name  : OpenSSH.Client~~~~0.0.1.0
# State : Installed ※ clientがinstalledならOK
# 
# Name  : OpenSSH.Server~~~~0.0.1.0
# State : NotPresent

# OpenSSH Client・Serverインストール
Add-WindowsCapability -Online -Name OpenSSH.Client~~~~0.0.1.0
Add-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0
```

# sshのconfig設定【Mac・Windows】
Windowsの場合のsshのconfigの設定です。
以下の手順でsshのconfigファイルを開きます。

1. F1キー
2. 「Remote-SSH: connect to Host...」を入力・選択
3. 「Configure SSH Hosts...」を選択
4. 「***/.ssh/config」を選択

configファイルが開くので、接続先情報を以下で紹介する接続パターンに合わせて設定します。

## 直接つながる場合【Mac・Windows】
ローカルのPCから接続先のリモートサーバーまで直接つながる場合です。
Hostは任意の名前を設定、HostName、User、IdentityFileを接続先に合わせて設定します。
※ WindowsだとIdentityFileのパスに日本語が入るとうまくいかない

例:
![Untitled Diagram (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/e7dc1ca0-3d14-a9ce-a09e-479c79878504.png)

- Windowsの例

```***/.ssh/config
Host remote-server
    HostName 203.0.113.10
    User *******
    IdentityFile C:\Users\*******\*****.pem
```

- Macの例

```***/.ssh/config
Host remote-server
    HostName 203.0.113.10
    User *******
    IdentityFile /Users/*****/.ssh/*****.pem
```

## 多段接続の場合【Mac・Windows】
目的のサーバーへの接続に別のサーバーへのSSHを経由する場合です。

まず1段目(Host humidai-server)の接続情報を作成。
これは上記の「直接つながる場合」と同様。
一段目がプロキシを通る必要がある場合は後述のプロキシ設定を行う場合を参照。

2段目の設定、
Hostは任意、HostName、User、IdentityFileを接続先に合わせて設定。
※ IdentityFileはローカルPC上のpath
※ WindowsだとIdentityFileのパスに日本語が入るとうまくいかない
※ 2段目HostNameは1段目から2段目にSSHする時のHostName
ProxyCommandはsshのWオプションを使う。
ProxyCommandはWindowsの場合はssh.exeをフルパスで指定(OpenSSHのpath、以下の例のpathは異なる場合もあるので自分の環境を要確認)

例:
![Untitled Diagram (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/a6091fe8-de0d-b80a-da9a-af44956e55a2.png)


- Windowsの例

```***/.ssh/config
Host humidai-server
    HostName 203.0.113.254
    User *******
    IdentityFile C:\Users\*******\*****.pem

Host remote-server
    HostName 192.0.2.10
    User *******
    IdentityFile C:\Users\*******\*****.pem
    ProxyCommand C:\Windows\System32\OpenSSH\ssh.exe -W %h:%p humidai-server
```

- Macの例

```***/.ssh/config
Host remote-server
    HostName 203.0.113.10
    User *******
    IdentityFile /Users/*****/.ssh/*****.pem

Host remote-server
    HostName 192.0.2.10
    User *******
    IdentityFile /Users/*****/.ssh/*****.pem
    ProxyCommand ssh -W %h:%p humidai-server
```



## HTTPプロキシを通る場合-認証なし【Windows】
Hostは任意、HostName、User、IdentityFileを接続先に合わせて設定。
プロキシを通るためにProxyCommandでconnect.exeを使用します。これはGitをインストールしている場合、PC内のどこかに存在し、環境によっては`C:\Program Files (x86)\Git\bin\connect.exe`や`C:\Program Files\Git\mingw64\bin\connect.exe`等pathが異なる場合があるようです。Gitのインストールディレクトリ周辺を探してみてください。
connect.exeがない場合はGit for Windows( https://gitforwindows.org/ )をインストールしてください。
ProxyCommandは以下の例を参考にしてください。connect.exeはフルパス指定。
※ WindowsだとIdentityFileのパスに日本語が入るとうまくいかない

HTTPプロキシを通る場合、会社等の環境では外向きの通信は80・443ポートのみ許可している場合があります。この場合SSHは通常22番ポートのためこの設定をしてもリモートサーバーへは接続できません。

例：

![Untitled Diagram (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/f8af0a7f-fc7b-ce4c-0cd8-5997be1234e2.png)

```***/.ssh/config
Host remote-server
    HostName 203.0.113.10
    User *******
    IdentityFile C:\Users\*******\*****.pem
    ProxyCommand C:\Program Files (x86)\Git\bin\connect.exe -H proxy-address.com:8080 %h %p
```

## HTTPプロキシを通る場合-認証あり【Windows】
プロキシがユーザーとパスワードで認証がかかっている場合です。
ProxyCommandにconnect.exeを使用します。
connect.exeについては上記「HTTPプロキシを通る場合-認証なし【Windows】」を参照してください。
以下の例のようにProxyCommandでプロキシのアドレスの前に`ユーザーネーム@`を付けます。

例:
![Untitled Diagram (14).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/618298c6-b74f-1d0d-5d4b-869b3517d029.png)


プロキシの認証が

- User: proxy-user
- Pass: proxy-pass

とします。configファイルを

```***/.ssh/config
Host remote-server
    HostName 203.0.113.10
    User *******
    IdentityFile C:\Users\*******\*****.pem
    ProxyCommand C:\Program Files (x86)\Git\bin\connect.exe -H proxy-user@proxy-address.com:8080 %h %p
```

とし、この後、Remote Developmentで接続するときにパスワードを入力します。

![スクリーンショット 2020-04-23 18.57.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/f3896eb2-a65c-9ba1-4100-0fc3c070a00c.png)

図の1~4の順番でクリックしていくとターミナルが開き、パスワードの入力が求められるのでproxy-passを入力すると接続できます。

本当はProxyCommandを`-H proxy-user:proxy-pass@proxy-address.com:8080`のようにUserとPasswordを指定して保存すれば、パスワード入力なしで繋がると思うのですが、パスワードに記号が入っていると場合によってはエラーになるようです。


## Socks5プロキシを通る場合【Windows】
Hostは任意、HostName、User、IdentityFileを接続先に合わせて設定。
connect.exeについては上記「HTTPプロキシを通る場合-認証なし【Windows】」を参照してください。
ProxyCommandは以下の例を参考にしてください。connect.exeはフルパス指定。
※ WindowsだとIdentityFileのパスに日本語が入るとうまくいかない

例：
![Untitled Diagram (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/a4ab810e-15cc-754f-fedf-74b57cfe16bd.png)


```***/.ssh/config
Host remote-server
    HostName 203.0.113.10
    User *******
    IdentityFile C:\Users\*******\*****.pem
    ProxyCommand C:\Program Files (x86)\Git\bin\connect.exe -S proxy-address.com:1080 %h %p
```
## HTTPプロキシを通る場合-認証なし【Mac】
Hostは任意、HostName、User、IdentityFileを接続先に合わせて設定。
netcat(nc コマンド)を使用してプロキシを通ります。
ProxyCommandは以下の例を参考にしてください。

例：
![Untitled Diagram (12).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/051e43d6-f978-76a5-6ffd-1353770a0ace.png)


```***/.ssh/config
Host remote-server
    HostName 203.0.113.10
    User *******
    IdentityFile /Users/*****/.ssh/*****.pem
    ProxyCommand nc -X connect -x proxy-address.com:8080 %h %p
```

## HTTPプロキシを通る場合-認証あり【Mac】
プロキシに認証がある場合netcatが使えません。connectをインストールしてプロキシを通ります。
ターミナルを起動し以下を実行します。

```terminal
# connectのインストール
brew install connect
```

ProxyCommandを以下の例を参考に設定します。CONNECT_USERとCONNECT_PASSWORDにプロキシの認証情報をセットしてください。

例:
![Untitled Diagram (13).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/d41a760b-370d-942d-c45d-0536c5a53fcc.png)


```***/.ssh/config
Host remote-server
    HostName 203.0.113.10
    User *******
    IdentityFile /Users/*****/.ssh/*****.pem
    ProxyCommand env CONNECT_USER=****** CONNECT_PASSWORD=****** connect -H proxy-address.com:8080 %h %p
```

## Socks5プロキシを通る場合【Mac】
Hostは任意、HostName、User、IdentityFileを接続先に合わせて設定。
netcat(nc コマンド)を使用してプロキシを通ります。
ProxyCommandは以下の例を参考にしてください。

例：
![Untitled Diagram (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/1ee03734-3580-66ff-f837-521ea0aa60ca.png)

```***/.ssh/config
Host remote-server
    HostName 203.0.113.10
    User *******
    IdentityFile /Users/*****/.ssh/*****.pem
    ProxyCommand nc -X 5 -x proxy-address.com:1080 %h %p
```

## SSHが22ポート以外の場合【Mac・Windows】
ローカルのPCから接続先のリモートサーバーまで直接つながる場合です。
Hostは任意の名前を設定、HostName、User、IdentityFileを接続先に合わせて設定します。
PortにSSHの待ち受けポートを指定します。
※ WindowsだとIdentityFileのパスに日本語が入るとうまくいかない

例:
![Untitled Diagram (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/012400c5-8382-3653-e9c1-31e0328c05ab.png)

- Windowsの例

```***/.ssh/config
Host remote-server
    HostName 203.0.113.10
    User *******
    Port 80
    IdentityFile C:\Users\*******\*****.pem
```

- Macの例

```***/.ssh/config
Host remote-server
    HostName 203.0.113.10
    User *******
    Port 80
    IdentityFile /Users/*****/.ssh/*****.pem
```

# まとめ

VSCodeでRemote Developmentを使うときの`***/.ssh/config`ファイルの設定方法を解説しました。基本的にはSSHの経路が複雑(3段以上のSSH、認証プロキシ+多段接続等)でも今回解説したものの組み合わせで大体の環境では接続できるのではないかと思います。