[VS Code]Remote Developmentで動かない拡張機能はポートフォワーディングしてみる

はじめに

Remote Development すごい！はかどる！
でも、プレビュー機能をもつ拡張機能（ Git History , Swagger Viewer など）がうまく動いてくれない……。

と悩んでましたがちゃんと動きました、という報告。

Name	Version
Visual Studio Code	1.36.1
Remote Development	0.15.0
OpenSSH for Windows	7.6p1

結論

問題が発生する原因として、

1. 拡張機能は http://localhost:xxxx を使おうとする
2. リモート側 のポートが使用される
3. http://localhost:xxxx にアクセスしようとする
4. このときの localhost の解釈が ローカル側 になる
5. 当然ローカルのポートは機能していないので動作してないように見える

ということが考えられます。

したがって、これの対策として ポートフォワーディング することで解決しました。

VS Codeでのポートフォワーディング方法

接続方式（ SSH , Containers ）によってやり方が異なるようです。

今回は SSH の方法しか試していないので、Containers の場合は ドキュメント を参考にしてみてください。

SSH

• 一時的なポートフォワーディング

  VS Code上から一時的にポートフォワーディングを設定可能。

  1. コマンドパレット開く（ F1 ）
  2. Remote-SSH: Forward Port from Active Host... コマンド実行
  3. ポート番号入力
  4. ポートフォワーディングの名称入力（空白可）

  以上でポートフォワーディングされます。

• 常時ポートフォワーディング

  リモート接続時には常にポートフォワーディングをしたい場合。
  ssh_config（一般的に ~/.ssh/config ファイル）において、LocalForward 項目（ディレクティブ）を追記する。

  ~/.ssh/config

  Host hoge
      HostName hoge.com
      User foo
      LocalForward localhost:8080 localhost:8080
  

  • LocalForward の 2番目の引数 における localhost は HostName （上記例では hoge.com ）を示す。

    LocalForwardの書式

    LocalForward [bindするアドレス:]<ローカル側ポート> <ホスト名>:<ホスト側ポート>
    

Containers

こちらのドキュメント を参考にしてください。

拡張機能 Git History について

2019/7現在、使用するポートが固定されていない。
（参考：Git Histrry don't work on vs code remote environment·Issue #389·DonJayamanne/gitHistoryVSCode）

よって

1. Git History 起動
2. 出力 -> Git History のログから使用するポートを確認
   
3. Git History タブを一度閉じる
4. 確認したポートでフォワーディングする
5. 再度 Git History 起動

という手順をとる必要があります。

Git Graph（追記）

Git History と同様にコミット履歴をグラフで表示する拡張機能として Git Graph もおすすめです。
この Git Graph はリモートでもそのまま動いてくれる（本記事のような操作・設定が不要）ので、最近はこちらを使ってます。

GitHub: mhutchie/vscode-git-graph

おわりに

自分の環境ではRemote-SSH上だけ動かない拡張機能はポートフォワーディングが原因のものばかりでしたので、ポートフォワーディングすれば何とかなるはず。

ポートフォワーディングするのを思いつくまでに時間がかかったので今回記事にしました。
（というかすぐにドキュメント確認してれば……！）

とりあえず、これでますます Remote Development が気持ちよく使っていけそうです！

参考

• Visual Studio Code Remote Development
• SSH_CONFIG (5)