Linux
vagrant
VSCode
VisualStudioCode
新人プログラマ応援

vscodeがインストールされていないサーバ(要sshd)のファイルを、vscodeで編集する方法

最初に

  • リモートサーバのファイル編集方法を探したところ、拡張機能 Remote VSCode を使った方法が多くヒットしましたが、「リモートにsshで接続してrmateをインストール&動かさなければならない。1ファイル単位でしか編集できない」といった制約がありました。
  • 他の方法を探したところ、最近の vscode のアップデートにより「リモートサーバのフォルダを(ローカルのフォルダと同じように)ワークスペースに追加できるようになった」ようです。
  • これを実現する拡張機能として Remote WorkspaceSSH FS などいくつかありました。
  • 利用者が多く、設定が簡単そうに見えたので Remote Workspace を使ってみました。
  • sshさえつながる環境があれば、vscodeの簡単な設定だけで、リモートサーバのファイルを(あたかもローカルファイルと同じように) vscode で編集できるようになります。
  • つまり、vscode がインストールされていないサーバのファイルを、ローカルの vscode を使って編集できるようになります。

これは何?

  • ローカルの Visual Studio Code から、リモートサーバのフォルダを vscode のワークスペースへ追加し、編集できるよう設定します。
  • 拡張機能 Remote Workspace - Visual Studio Marketplace を使います。

    • ここでは SFTP を使いますが、FTP、S3、WebDav、slack、dropbox にも接続できるようです。
  • この拡張機能を使ったときの画面イメージです。リモートサーバ(vagrantで動かしている仮想サーバ)の /home/vagrant フォルダ以下が見えてます。当然編集もできます。
    image.png

使用条件

  • ネットワーク的には、リモートサーバにSSHで接続できればOKです。(SFTP=SSHを使ったFTP を使います)
  • ローカルのvscodeの設定だけで、リモートサーバへの設定は不要です。
  • Windows10のvscodeを使いましたが、恐らく他のOSのvscodeでも大丈夫だと思います。
ローカル                              リモートサーバ
+-----------+                        +-------------+
| vscode    |--------(SFTP)--------->| sshd        |
|           |<-----------------------|             |
+-----------+                        +-------------+
| Windows10 |                        | Linux       |
+-----------+                        +-------------+

設定方法

  • ここではリモートサーバとして、vagrantの仮想マシンへ接続する例をあげます。

0) リモートへのSSH接続情報を確認しておきます。

  • vagrant ssh-config で接続情報を表示します。
  • ここでチェックしておくのは、HostNameUserPortIdentityFile です。
$ vagrant ssh-config
Host default
  HostName 127.0.0.1・・・これと
  User vagrant・・・これと
  Port 2222・・・これと
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile C:/hoge/.vagrant/machines/default/virtualbox/private_key・・・これ。
  IdentitiesOnly yes
  LogLevel FATAL

1) 拡張機能 Remote Workspace をインストールします。

  • remote workspace で探して、インストールしてください。

    image.png

2) test-remote-workspace.code-workspace ファイルを作ります。

  • 新規に以下の内容でファイルを作ります。(拡張子が .code-workspace であればファイル名は何でもいいです)
  • folders[].uri は、先にチェックしておいたSSHの接続情報に書き換えてください。
{
    "folders": [
        {
            "uri": "sftp://vagrant:vagrant@127.0.0.1:2222/home/vagrant?debug=1&key=C:/hoge/.vagrant/machines/default/virtualbox/private_key&dirMode=775&mode=664",
            "name": "vagrant@127.0.0.1"
        }
    ],
    "settings": {}
}

3) test-remote-workspace.code-workspace ファイルをダブルクリックします。

  • ダブルクリックで vscode が起動すると自動的にリモートサーバに接続します。

  • 接続成功した場合は、次の画面になります。
    image.png

  • folders[].uri に含まれる debug=1debug=0 に変更しておきましょう。(デバッグログ出力をOFF)

  • もしも、接続に失敗したときは、次の画面になります。
    image.png

  • "C:\Users\<ユーザ名>\.vscode-remote-workspace\.logs\<YYYYMDD>.log" にログがあるので、これを確認すれば解決のヒントが得られるかも。