動機
- SSH 先で開発しているときにも Cypress や、ブラウザを表示させた上での RSpec (Capybara) を実行したい
- Webページを経由する認証にて、SSH 先の Webブラウザ で認証したい*1
結論
まず制限事項があります。それは「別途、当該 SSH 先に接続し続けておく必要がある」ということです*2。
その上で、以下の手順を踏みます。
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
xclock
$ xclock
Cypress
$ mkdir -p /tmp/foo $ cd /tmp/foo $ yarn add --dev cypress $ npx cypress open
注意点
Windows の場合は「Windows の SSH 機能」で SSH先 に接続するので、configファイル や 鍵 の置き場所に注意する必要があります。WSL2 を常用しているとつい忘れがちです。
補足
一番楽なのは「VSCode 内のターミナルで GUI アプリ を起動しないこと」ではあります…。
