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の接続情報に書き換えてください。
aaa
{
    "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" にログがあるので、これを確認すれば解決のヒントが得られるかも。

tips : vscode(Win10)から、Ubuntu(Vagrant)上で起動した、LXDコンテナ内のソースファイルを編集する。

(直接sshでつなげることができないマシンのソースをvscodeで編集したい場合、git bash の ssh でポートフォワードすればよい)

  • 構成はこんな感じ
vscode(Win10) --> git bash(Win10) --> vagrant-bionic(Ubuntu) --> c1.lxd(Ubuntu)
  • vscodeからsshでコンテナのsshdに直接つながるようにする。
    • vscode から localhost:22 に接続すると、c1.lxd コンテナの 22 へつながるようにする。(VG:vagrantによるポートフォワード設定、PF:sshによるポートフォワード設定)
localhost:22 ==(PF)==> localhost:2222 ==(VG)==> vagrant-bionic:22 ==(PF)==> c1.lxd:22

1) Windows10(git bash) での設定

  • ~/.ssh/config (vagrant ssh-config からコピー)
Host vagrant-bionic
  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
$ ls -al ~/.ssh
total 31
drwxr-xr-x 1 myuser 197121    0 9月  20 23:55 ./
drwxr-xr-x 1 myuser 197121    0 9月  20 23:55 ../
-rw-r--r-- 1 myuser 197121  372 9月  20 23:29 config
-rw-r--r-- 1 myuser 197121 1679 9月  17 21:17 id_rsa
-rw-r--r-- 1 myuser 197121  403 9月  17 21:17 id_rsa.pub
-rw-r--r-- 1 myuser 197121 1737 9月  20 23:38 known_hosts
  • ポートフォワード設定
$ ssh -L 22:c1.lxd:22 vagrant-bionic
$ ssh ubuntu@localhost -p 22

2) Windows10 vscode の ワークスペース設定ファイル(.code-workspace)

  • c1.code-workspace
{
  "folders": [
    {
      "uri": "sftp://ubuntu@localhost:22/home/ubuntu?debug=1&key=C:/Users/username/.ssh/id_rsa&dirMode=775&mode=664",
      "name": "c1.lxd"
    },
  ],
  "settings": {}
}