VSCode で SSH した先の GUI アプリを VSCode のターミナルから実行して手元で表示させる方法（拡張機能なし）

動機

• SSH 先で開発しているときにも Cypress や、ブラウザを表示させた上での RSpec (Capybara) を実行したい
• Webページを経由する認証にて、SSH 先の Webブラウザ で認証したい*1

結論

まず制限事項があります。それは「別途、当該 SSH 先に接続し続けておく必要がある」ということです*2。

github.com

その上で、以下の手順を踏みます。

1. SSH 先に接続するための config 設定に以下の二行を加える

その他、ローカルマシンや接続先にて一般的な X11 の設定は行っておきます。

  ForwardX11 yes
  ForwardX11Trusted yes

2. 「別途つなげた SSH」にて環境変数 DISPLAY の値を調べる

$ echo $DISPLAY
localhost:10.0

3. VSCode でつなげたターミナルにて、環境変数 DISPLAY を設定する

設定する値は「2.」で取得した値です。ここは SSH先 のシェルの設定ファイルに書いてもいいです。

$ export DISPLAY=localhost:10.0

VSCode でつなげたターミナルでは DISPLAY の値は自動で設定されないので、手動で設定する必要があります。

4. SSH先で適当なアプリを立ち上げて動作確認をする

xeyes や xclock などを起動して、手元のローカルマシンで GUI のアプリが立ち上がるかを確認します*3。

xeyes

$ xeyes

gyazo.com

xclock

$ xclock

gyazo.com

Cypress

$ mkdir -p /tmp/foo
$ cd /tmp/foo
$ yarn add --dev cypress
$ npx cypress open

gyazo.com

注意点

Windows の場合は「Windows の SSH 機能」で SSH先 に接続するので、configファイル や 鍵 の置き場所に注意する必要があります。WSL2 を常用しているとつい忘れがちです。

補足

一番楽なのは「VSCode 内のターミナルで GUI アプリ を起動しないこと」ではあります…。

*1:URL をコピペして手元で認証するという手段はあるが

*2:がんばって回避する方法はあるが、そこまで頑張るメリットは少ないと考えています

*3:インストールされていない場合は apt ならば x11-apps というパッケージをインストールします