Windows10のVSCodeでRemoteSSHによるリモート開発

Windows10上のVSCodeを利用して、リモートサーバ内のファイルを直接VSCodeから編集する方法をまとめています。

ポイントは、WSL側の設定とWindows側の設定を混合しないということです。

あくまでWindows10からリモートサーバにアクセスするので、SSHの鍵作成やSSHの設定ファイルはWindows側で行います

ポイント
  • パスワード入力は面倒なので、リモートサーバには公開鍵認証方式で接続する
  • sshに必要な鍵やconfigファイルは、Windows側のC:\Users\${user}.sshに配置する
  • あくまでWindowsの設定なので、WSLは関係ない

RemoteSSHのインストール

VSCodeを開いて、”Remote – SSH”という拡張機能をインストールします。

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh

“Remote – SSHを”インストールすると、VSCodeの左タブに”Remote Exploler”タブができるので、そこからリモートサーバにアクセスできます。

”Remote – SSH”の他に、”Remote – Containers”や”Remote – WSL”をインストールしておくと、接続先を選ぶことができます。

公開鍵方式でリモートサーバに接続する

パスワードを毎回入力するのは面倒なので、公開鍵方式でリモートサーバに接続します。

下記手順で設定をおこないます。

  • Windows上でC:/Users/${user}/.ssh配下に公開鍵と秘密鍵の作成
  • 公開鍵をリモートサーバに登録
  • Windows上のC:/Users/user/.ssh/confingファイルの作成
  • VSCodeで接続テスト

Windows上でC:/Users/${user}/.ssh配下に公開鍵と秘密鍵の作成

Windows上からssh-keygenで鍵を作成します。

PowerShellを起動してssh-keygenを実行し、こだわりがない場合はデフォルトのC:/Users/user/.ssh以下に鍵を作成しましょう。

PS C:\Users\user> ssh-keygen -t rsa -b 4096
Generating public/private rsa key pair.
Enter file in which to save the key (C:\Users\user/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in C:\Users\user/.ssh/id_rsa.
Your public key has been saved in C:\Users\user/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:nf4PIet8jTRg8aVXA7D4TQ2vy7HWpM8JkIAfr/DcnhQ user@DESKTOP-SQPN38F
The key's randomart image is:
+---[RSA 4096]----+
| ..o. |
| . o . =..|
| . + + + +.|
| ..B.* o |
| .So+E.= . |
| +.oo*.B |
| +o+.@ . |
| oo.=.= .|
| o+...+ |
+----[SHA256]-----+

公開鍵をリモートサーバに登録

作成した公開鍵をリモートサーバの~/.ssh/authorized_keysに登録します。

【こちらはWindows上で実行】

PS C:\Users\user> cat .\.ssh\id_rsa.pub
ssh-rsa ...

出力された文字列をコピーしましょう

【リモートサーバで操作】

$ vim ~/.ssh/authorized_keys
コピーした公開鍵を貼り付け

Windows上のC:/Users/user/.ssh/confingファイルの作成

ssh用のconfigファイルをWindows上に作成します。

$ cat ~/.ssh/config
Host <ip address or host name> HostName <ip address> ForwardAgent yes User <user name> PreferredAuthentications publickey IdentityFile C:/Users/<user dir>/.ssh/id_rsa

上記ファイルを作成することで、Windows上で作成した秘密鍵を利用してアクセスすようになります。

VSCodeで接続テスト

左タブから”Remote Explore”をクリックして、リモートサーバにアクセスするためのコマンドを入力します。

ssh -A user@ipアドレスを入力しましょう(-Aは多段SSHを利用する場合に必要です)。

パスワードレスでサーバにアクセスできたら成功です。

まとめ:WSLに惑わされずにWindowsで実行

この記事ではVSCodeのRemoteSSHを利用してリモートサーバにアクセスする方法を紹介しました。

ネットで検索していると、WSLを利用している記事もあります。

ただ、VSCodeはあくまでWindows上で実行されているので、設定ファイルを置くべきはWindows上です。

WSLに混乱されないように気を付けてください。