【Windows10】VScodeからリモートサーバ上のファイルを直接編集する方法

はじめに

「Visual Studio Code Remote - SSH extension」というVSCodeの拡張機能を利用することで、サーバ上のファイルを直接編集できます。

環境

Windows10 ver2004
VSCode ver1.52.1

手順1. OpenSSHをWindows10にインストールする ※インストール済みなら不要

以下に詳細が記載されています。
https://docs.microsoft.com/ja-jp/windows-server/administration/openssh/openssh_install_firstuse
「PowerShell を使用した OpenSSH のインストール」

手順2. Visual Studio Code をインストールする ※インストール済みなら不要

以下からダウンロードすることが可能です。
https://code.visualstudio.com/

手順3. Remote Development extension pack をインストールする

以下を参照すると、Remote Development extension packは、①Remote - SSH、②Remote - Containers、③Remote - WSLの3つになります。
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

今回は、リモートサーバ上のファイルをSSH接続した上で編集したいため、上記①を利用します。
インストール後、VSCodeのアクティビティバーに「リモートエクスプローラー」という機能が表示されます。

手順4. 接続元PCのssh設定ファイルを編集する。

Windows10であれば、通常「C:\Users\ユーザ名\.ssh\」にconfigファイルが配置されていると思いますので、そのファイルを以下のように編集します。※編集はVSCodeで行うと楽です。XXXはユーザー環境に合わせて修正して下さい。

Host XXX.XXX.XXX.XXX ※接続先IPアドレス
  HostName XXX.XXX.XXX.XXX ※接続先IPアドレス
  Port 22
  User user1 ※ユーザ名
  IdentityFile ~/.ssh/XXX.pem ※秘密鍵

手順5 リモートサーバに接続

VSCodeのアクティビティバーに「リモートエクスプローラー」から「SSH TARGETS」上で+ボタン(Add New)を押下し、「ssh [e-mail]」を入力しエンターキーを押下する。
「SSH TARGETS」配下に追加した接続先IPアドレスが表示されるので、その右側の別Windows表示ボタンを押下すると接続が可能になります。
その後、編集先フォルダパスに移動することでリモートサーバ上でファイルを直接編集することが出来ます。

参考

以下を参考にしました。
https://code.visualstudio.com/docs/remote/ssh
https://docs.microsoft.com/ja-jp/windows-server/administration/openssh/openssh_install_firstuse
https://code.visualstudio.com/
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack