Xpraを使ってWebブラウザから操作できるリモートデスクトップ環境を簡単に構築する方法

## はじめに

本記事ではWebブラウザをクライアントとして利用可能なリモートデスクトップ環境を[Xpra](https://github.com/Xpra-org/xpra/tree/master)を用いて構築する。

Xpraの基本的なインストール方法から、SSL対応、パスワード認証、音声転送などリモートデスクトップ環境の構築に役立つ実践的な手順を詳述する。

リモートデスクトップ環境の構築は、ソフトウェア開発者にとって重要な課題の一つであり、サクサクと動作するリモートディスクトップ環境は開発効率を大きく改善するだろう。XRDPやVNCなどのパフォーマンスに不満もっているユーザーは多いと思う。Xpraのサクサク感はその解決策になるかもしれない。また、クライアントアプリとしてWebブラウザが使えるため、エンドユーザーからすると気軽にリモートデスクトップ環境を試すことが可能になる。


## まとめ

#### 所見

Webブラウザから気軽にリモートディスクトップにアクセスすることができた。また筆者の環境ではパフォーマンスよくサクサクと動作した。スクロールやキー入力、YouTubeの動画再生にまったくストレスを感じない。
残念な事が１つあり、日本語のCopy＆Pasteをうまく動作させる方法が見つからなかった。アルファベットは問題なくCopy&Pasteできるため開発環境としては困らないだろう。

#### Xpraの設定
```bash
sudo apt-get update
sudo apt-get install xpra
openssl req -new -x509 -days 365 -nodes -out cert.pem -keyout key.pem -sha256
cat key.pem cert.pem > ssl-cert.pem
```

#### Xpraの起動

暗号化、パスワード認証、音声転送をサポートしてXpraでリモートディスクトップを起動する

```bash
xpra start :100 --bind-ssl=0.0.0.0:10000 --html=on --start-child=gnome-terminal --ssl-cert=ssl-cert.pem --ssl-auth=sys
```

#### Webブラウザからリモートディスクトップにログイン

Webブラウザから https://192.168.1.113:10000/connect.html (IPアドレスは環境に応じて変更する) にアクセスし、ユーザー名とパスワードを入力することで、リモートデスクトップに接続することができる。

## テスト環境

|役割|OS|説明|
|:-|:-|:-|
|サーバー|Ubuntu 24.04 |Xpraでリモートデスクトップを提供する|
|クライアント|MacOS 14.2.1 |Webブラウザ(Chrome)からリモートディスクトップにアクセスする|

## Xpraのインストール

Xpraはリモートデスクトップのセッションを管理し、アプリケーションのリモート表示を実現するためのツールである。Ubuntu環境において、Xpraをインストールするには、以下のコマンドを実行する。

```bash
sudo apt-get update
sudo apt-get install xpra
```

この手順により、最新バージョンのXpraがシステムにインストールされる。

## XpraをWebブラウザ対応で起動する

`DISPLAY=:100`でポート番号10000にてWebブラウザからの接続を待つコマンドを実行する

```bash
xpra start :100 --bind-tcp=0.0.0.0:10000 --html=on  --start-child=gnome-terminal
```

Chromeを使って http://192.168.1.133:10000 (IPアドレスは環境に応じて変更する)　にアクセスし、192.168.1.133のリモートディスクトップに接続する。`start-child`でしていた`gnome-terminal`が自動起動されている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017489/655e4891-0d8c-cc60-788c-5e2c5a9940bd.png)

リモートディスクトップのターミナルでChromeブラウザを起動する

```bash
google-chrome
```

ChromeブラウザでYouTubeを表示できる（音声は非対応）ことを確認した。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017489/278d3bb6-04c7-3734-9f92-4171bfbb7324.png)


## XpraをSSLに対応させる

リモート接続のセキュリティを強化するためには通信を暗号化することが重要である。ここでは、自己署名証明書を生成し、SSL対応でXpraを起動する手順を説明する。

#### 証明書を生成する。

```bash
openssl req -new -x509 -days 365 -nodes -out cert.pem -keyout key.pem -sha256
cat key.pem cert.pem > ssl-cert.pem
```

#### 生成した証明書を使用してXpraを起動する

```bash
xpra start :100 --bind-ssl=0.0.0.0:10000 --html=on --start-child=gnome-terminal --ssl-cert=ssl-cert.pem
```

:::note info
`--bind-tcp`オプションを使用すると、HTTPでも接続が可能になるため、セキュリティ上の理由から`--bind-ssl`オプションに変更する。
:::

この設定により、ブラウザでHTTPS経由での安全なアクセスが可能になる。

#### HTTPSでリモートディスクトップに接続する

自己署名証明書を使用しているため、リモートディスクトップに接続する際にWebブラウザからは警告が表示される。しかし、信頼できる接続であることが明らかであるため、警告を無視してアクセスする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017489/02cf9a8f-3fab-e1df-613b-29e6ac2c6dfa.png)

#### HTTPS接続を確認する
Devtoolsでhttps接続が確認できる

![スクリーンショット 2024-08-21 11.40.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017489/132d2fa5-b9a7-8184-b5d6-dc880e2ccff9.png)


## パスワードによるアクセス制御の導入

XpraではSSL認証を使用してパスワードによるアクセス制御を行うことができる。`--ssl-auth=sys`を追加した以下のコマンドでシステムのユーザ名とパスワードを用いた認証を有効にする。

```bash
xpra start :100 --bind-ssl=0.0.0.0:10000 --html=on --start-child=gnome-terminal --ssl-cert=ssl-cert.pem --ssl-auth=sys
```

Chromeで https://192.168.1.113:10000/connect.html (IPアドレスは環境に応じて変更する) にアクセスし、ユーザー名とパスワードを入力することで、リモートデスクトップに接続することができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017489/320d38a8-ed4c-f9bd-bac3-38f8e054a995.png)


## 音声のリモート転送設定

リモートデスクトップでの音声転送にも対応しており、例えばYouTubeの動画をリモートで再生することが可能である。設定は、ブラウザで`https://192.168.1.113:10000/connect.html`にアクセスし、`Advanced options`を開いて、`Audio forwarding, codec:`の項目で`legacy:wav`を選択することで行う。

他のコーデックでは、筆者の環境で処理落ちが発生したが、最適な設定は環境に依存するため、個別に調整することが推奨される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017489/963632af-2651-6317-e998-5c36fe1d3eca.png)

音声再生をサポートした形でYouTubeの動画を再生できた。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017489/5d445001-1126-24ea-92ed-8ba5d09d21ea.png)


YouTube再生中はXpraから大量のWebP画像がクライアントのWebブラウザに送信されていることが確認される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017489/7ef991ec-8421-8f8d-7e3e-b9c7de75c16a.png)

## OpenGLサポートの検討

OpenGLサポートを有効にすることで、リモートでの3Dレンダリングが可能になる。VirtualGLを利用することで対応できるが、nVidia以外のチップセットにおける互換性については未確認である。

詳細については、[XpraのOpenGLサポートに関するドキュメント](https://github.com/Xpra-org/xpra/blob/master/docs/Usage/OpenGL.md)を参照されたい。

## おわりに

Xpraを用いることで、セキュアで柔軟なリモートデスクトップ環境を構築することができる。本記事で紹介した手順を参考に、リモート環境での開発作業を効率的に進めてほしい。今後、さらに高度な設定やカスタマイズが必要な場合は、公式ドキュメントやコミュニティフォーラムを活用することで、より深い知識を得ることができる。