VSCode – X11 Forwarding を使用してリモートマシンの GUI アプリを Windows 上で表示する方法

概要

X11 Forwarding を使用することで、リモートマシン上で動作する GUI アプリケーションをローカルマシンで表示することが可能です。この記事では、X サーバーとして Xming を使用して、VSCode でリモート接続し、X11 Forwarding を設定する方法について解説します。

注意

以下で説明する方法は Windows マシンからリモートの Linux マシンと X11 Forwarding で通信する方法です。 Windows マシンと WSL 上の Linux マシンと通信する方法ではないので、注意してください。

X Window System (X11)

X Window System (X11) とは、Unix 系オペレーティングシステムで利用される、クライアント・サーバー型のグラフィカルユーザーインターフェイス (GUI) システムです。X サーバーが画面表示や入力イベントを管理し、各アプリケーション (X クライアント) はネットワーク経由やローカル環境で X サーバーと通信する仕組みになっています。

X11 Forwarding

X11 Forwarding は、リモートマシン上で動作する GUI アプリケーションを、ローカルの X サーバーで表示できる仕組みです。 SSH の機能の 1 つとして提供され、リモートサーバー上の X クライアントアプリケーションとローカルの X サーバーで通信し、GUI 画面を表示できます。

Windows で動作する X11 サーバー

X11 Forwarding でリモートマシンの X クライアントアプリケーションと通信するために、Windows 上に X サーバーを起動する必要があります。 Windows で使用できる X サーバーとして以下のものがあります。

今回は、このうち無料で安定して使える VcXsrv を使用します。

手順

1. VcXsrv のインストールと設定

まず、VcXsrv をインストールし、設定を行います。

1. VcXsrv の公式サイトからインストーラーをダウンロードし、インストールします。
2. インストールが完了したら、XLaunch を起動します。

3. 「Multiple windows」を選択し、「Next」をクリックします。

   

4. 「Start no client」を選択し、「Next」をクリックします。

   

5. 「Extra settings」で「Next」をクリックします。

   

6. 「Finish」をクリックして VcXsrv を起動します。

   

   起動すると、タスクバーにアイコンが現れます。

2. 環境変数 DISPLAY の設定

コマンドプロンプトで以下を実行し、環境変数 DISPLAY を定義します。

setx DISPLAY "127.0.0.1:0.0"

実行後、VSCode は一度再起動してください。

3. VSCode のリモート接続設定

初めての接続先の場合

1. VSCode を起動し、拡張機能「Remote – SSH」をインストールします。
2. VSCode のコマンドパレット (Ctrl + Shift + P) を開き、「Remote-SSH: Add New SSH Host…」を選択します。

3. SSH 接続設定を入力します。以下のように設定します。

   ssh -XY <ユーザー名>@<リモートホストの IP アドレスまたはドメイン名>

   Bash

   Copy

すでにある接続先の場合

1. VSCode のコマンドパレット (Ctrl + Shift + P) を開き、「Remote-SSH: Open Configuration File…」を選択します。

2. 接続設定が保存されているファイルを選択し、設定を編集します。以下のように設定を追加または編集します。

   Host <リモートホスト名>
      HostName <リモートホストの IP アドレスまたはドメイン名>
      User <リモートユーザー名>
      ForwardX11 yes
      ForwardX11Trusted yes

   Conf

   Copy

4. VSCode の SSH の設定

設定より remote.SSH.enableX11Forwarding が有効になっていることを確認してください。(デフォルトでは有効)

5. リモートマシンでの設定

リモートマシン上で、X11 Forwarding を有効にするための設定を行います。

1. リモートマシンに SSH 接続し、/etc/ssh/sshd_config ファイルを編集します。

   sudo vim /etc/ssh/sshd_config

   Bash

   Copy

2. 以下の設定項目を確認し、必要に応じて変更します。

   X11Forwarding yes
   X11DisplayOffset 10

   Conf

   Copy
   • X11Forwarding: X11 Forwarding を有効にする
   • X11DisplayOffset: X11Forwarding で使用する際の最小のディスプレイ番号。リモートマシンの既存の X サーバーで使用しているディスプレイ番号と競合しないための設定。

3. 設定を保存し、SSH サービスを再起動します。

   sudo systemctl restart sshd

   Bash

   Copy

6. VSCode でリモート接続

VSCode でリモート接続を行い、X11 Forwarding を確認します。

1. VSCode のコマンドパレット (Ctrl + Shift + P) を開き、「Remote-SSH: Connect to Host…」を選択し、リモートホストに接続します。

2. 接続が完了したら、DISPLAY 環境変数を出力して、設定値が表示されれば成功です。

   $ echo $DISPLAY
   localhost:10.0

   Bash

   Copy

   GUI アプリケーションを起動すると、ローカルマシン上にアプリの画面が表示されます。

   firefox

   Bash

   Copy

   

VcXsrv を自動起動する

1. 設定ファイルを保存する

XLaunch を起動して、最後の画面で「Save configuration」をクリックし、ドキュメントフォルダに「config.xlaunch」を保存します。

2. ショートカットを作成する

1. デスクトップ上で右クリックし、「新規作成」 > 「ショートカット」を選択します。

2. 「項目の場所を入力してください」フィールドに以下を入力します。

   "C:\Program Files\VcXsrv\xlaunch.exe" -run "%HOMEPATH%\Documents\config.xlaunch"

   Plain text

   Copy

3. 「次へ」をクリックします。

4. ショートカットの名前を入力します。例えば、「VcXsrv」とします。
5. 「完了」をクリックします。

3. スタートアップに登録する

1. Windows キー + R を押して「ファイル名を指定して実行」ダイアログを開きます。
2. 「shell:startup」と入力して Enter キーを押します。これにより、スタートアップフォルダが開きます。
3. デスクトップに作成したショートカットを、このスタートアップフォルダにドラッグ＆ドロップします。

これで、次回 Windows を起動する際に、指定されたショートカットが自動的に実行されるようになります。