「リモートのサーバーやVMにアクセスしたいけど、VNCクライアントをインストールするのは面倒…」「スマホやタブレットからでもデスクトップにアクセスできたらいいのに」そんな悩みを抱えていませんか?
今回ご紹介するnoVNCは、Webブラウザだけでリモートデスクトップにアクセスできる画期的なツールです。専用のVNCクライアントをインストールする必要がなく、Chrome、Firefox、Safari、さらにはスマホのブラウザからでもVNC接続が可能になります。
この記事では、noVNCの基本から実践的な使い方、トラブルシューティングまで、初心者の方にも分かりやすく解説します。
noVNCとは?ブラウザで動くVNCクライアント
noVNC(ノーブイエヌシー)は、HTML5ベースのVNCクライアントです。従来のVNC接続では専用のクライアントソフトウェア(RealVNC、TigerVNC、UltraVNCなど)をインストールする必要がありましたが、noVNCを使えばWebブラウザだけでリモートデスクトップにアクセスできます。
noVNCの主な特徴
- クライアントソフト不要:ブラウザさえあればどこからでもアクセス可能
- クロスプラットフォーム:Windows、Mac、Linux、iOS、Androidすべてで動作
- HTML5技術:JavaScript、WebSockets、Canvas APIを使用して実装
- モバイル対応:スマートフォンやタブレットからも快適に操作
- 豊富な導入実績:OpenStack、Docker、Proxmox、Digital Oceanなど多数の製品で採用
noVNCは2010年頃から開発されているオープンソースプロジェクトで、現在では仮想化環境やクラウドサービスの管理画面など、さまざまな場面で活用されています。
noVNCの仕組み:WebSocketでVNCプロトコルをブリッジ
noVNCがどのように動作するのか、技術的な仕組みを理解しておくと、トラブルシューティングやカスタマイズに役立ちます。
通常のVNC接続との違い
従来のVNC接続:
VNCクライアント ←→ VNCサーバー(5900番ポート)
(専用ソフト) (リモートマシン)
従来のVNC接続では、RFB(Remote Framebuffer)プロトコルを使って、クライアントとサーバーが直接TCP通信を行います。しかし、ブラウザはこのRFBプロトコルを直接扱えません。
noVNCの接続:
ブラウザ ←WebSocket→ websockify ←TCP/RFB→ VNCサーバー
(HTTP/HTTPS) (プロキシ) (リモートマシン)
noVNCでは、間にwebsockifyという変換プログラムが入ります。websockifyは、ブラウザからのWebSocket通信をVNCサーバーのTCP/RFBプロトコルに変換する「通訳」の役割を果たします。
主要コンポーネント
noVNCシステムは以下の3つのコンポーネントで構成されています:
- noVNC(クライアント側)
- HTML、CSS、JavaScriptで書かれたWebアプリケーション
- ブラウザ上で動作し、画面の描画とユーザー入力を処理
- Canvas APIを使って画面を高速に描画
- websockify(プロキシ)
- WebSocketとTCPソケット間のプロトコル変換を行う
- Pythonで実装されている(一部Node.js版もあり)
- SSL/TLS暗号化にも対応
- VNCサーバー
- リモートマシン上で動作する標準的なVNCサーバー
- TigerVNC、x11vnc、RealVNC、QEMUなど
対応しているVNCエンコーディング
noVNCは以下のVNCエンコーディング方式に対応しています:
- raw:無圧縮の画像データ
- copyrect:画面の一部をコピー
- rre、hextile:タイル方式の圧縮
- tight、tightPNG:高圧縮方式
- ZRLE:Zlib圧縮を使用
- JPEG:JPEG圧縮
- H.264:動画圧縮(動きの多い画面で有効)
帯域幅に応じて最適なエンコーディングが自動的に選択されるため、通常は設定を変更する必要はありません。
noVNCの基本セットアップ
それでは、実際にnoVNCをセットアップしてみましょう。ここでは最もシンプルな構成から始めます。
前提条件
- Linux環境(Ubuntu/Debian/CentOS等)
- VNCサーバーが既にインストールされているか、これからインストールする
- Python 3.x
- モダンなWebブラウザ(Chrome 89+、Firefox 89+、Safari 15+等)
ステップ1:VNCサーバーのセットアップ
まず、リモートアクセスしたいマシンにVNCサーバーをインストールします。
# Ubuntuの場合
sudo apt update
sudo apt install tigervnc-standalone-server
# デスクトップ環境も必要なら
sudo apt install xfce4 # 軽量なXfce環境
VNCサーバーを起動します:
# 初回起動時にパスワードを設定
vncserver :1 -geometry 1280x720 -depth 24
# パスワード入力を求められるので、6-8文字で設定
# (VNC接続時に使用します)
ディスプレイ番号:1は、ポート番号5901(5900 + 1)に対応します。
ステップ2:noVNCとwebsockifyのインストール
最も簡単な方法は、Pythonのpipを使う方法です:
# pipでインストール
pip install novnc
# または、GitHubから直接クローン
git clone https://github.com/novnc/noVNC.git
cd noVNC
websockifyはnoVNCに含まれているので、別途インストールする必要はありません。
ステップ3:websockifyの起動
noVNCに付属のnovnc_proxyスクリプトを使って、websockifyとWebサーバーを同時に起動できます:
# pipでインストールした場合
novnc --listen 0.0.0.0:6080 --vnc localhost:5901
# GitHubからクローンした場合
./utils/novnc_proxy --vnc localhost:5901
起動すると、以下のようなメッセージが表示されます:
Starting webserver and WebSockets proxy on port 6080
Navigate to this URL:
http://localhost:6080/vnc.html?host=localhost&port=6080
ステップ4:ブラウザでアクセス
表示されたURLにブラウザでアクセスします。接続画面が表示されたら、VNCサーバーのパスワードを入力して「Connect」ボタンをクリックすれば、リモートデスクトップが表示されます!
パラメータの説明
noVNCの接続URLには、いくつかのパラメータを指定できます:
http://サーバーIP:6080/vnc.html?host=VNCサーバーのIP&port=6080&password=VNCパスワード&autoconnect=true
- host:VNCサーバーのホスト名またはIPアドレス
- port:websockifyのポート番号
- password:VNC接続パスワード(セキュリティ上、通常は省略)
- autoconnect:
trueにすると自動接続 - resize:
scale、remoteなどの表示モード
実践的な使用例
noVNCの実力は、さまざまな環境での活用で真価を発揮します。ここでは代表的な使用例を紹介します。
例1:Dockerコンテナ内のGUIアプリケーション
Dockerコンテナ内で動作するGUIアプリケーションをブラウザから操作できます。
Dockerfileの例:
FROM ubuntu:22.04
# 必要なパッケージをインストール
RUN apt-get update && \
DEBIAN_FRONTEND=noninteractive apt-get install -y \
xfce4 \
tigervnc-standalone-server \
novnc \
websockify \
supervisor
# スーパーバイザー設定
COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf
# VNCとnoVNCのポートを公開
EXPOSE 5901 6080
CMD ["/usr/bin/supervisord"]
supervisord.conf:
[supervisord]
nodaemon=true
command=/usr/bin/startxfce4 autorestart=true environment=DISPLAY=”:1″
command=vncserver :1 -geometry 1280×720 -depth 24 -SecurityTypes None autorestart=true
command=websockify –web /usr/share/novnc/ 6080 localhost:5901 autorestart=true
コンテナを起動すれば、http://localhost:6080/vnc.htmlでアクセスできます。
例2:Kubernetesでの活用
Kubernetes環境でnoVNCを使うと、複数のVNCサーバーをスケーラブルに管理できます。
deployment.yaml:
apiVersion: apps/v1
kind: Deployment
metadata:
name: novnc
namespace: novnc
spec:
replicas: 1
selector:
matchLabels:
app: novnc
template:
metadata:
labels:
app: novnc
spec:
containers:
- name: novnc
image: theasp/novnc:latest
ports:
- name: novnc
containerPort: 8080
env:
- name: DISPLAY_WIDTH
value: "1600"
- name: DISPLAY_HEIGHT
value: "900"
---
apiVersion: v1
kind: Service
metadata:
name: novnc
namespace: novnc
spec:
type: LoadBalancer
ports:
- protocol: TCP
port: 6080
targetPort: 8080
selector:
app: novnc
例3:Raspberry PiでのnoVNC設定
Raspberry PiにnoVNCをセットアップすれば、ヘッドレス(モニター不要)で使いつつ、必要なときだけブラウザから画面にアクセスできます。
# Raspberry Pi上で実行
sudo apt update
sudo apt install novnc websockify
# VNC設定(raspi-config)
sudo raspi-config
# Interface Options → VNC → Enable
# noVNCの自動起動設定
sudo nano /etc/systemd/system/novnc.service
novnc.service:
[Unit]
Description=noVNC service
After=vncserver-x11-serviced.service
[Service]
ExecStart=/usr/share/novnc/utils/launch.sh --listen 6080 --vnc localhost:5900
Restart=always
Type=simple
User=pi
[Install]
WantedBy=multi-user.target
# サービスの有効化と起動
sudo systemctl daemon-reload
sudo systemctl enable novnc
sudo systemctl start novnc
# ブラウザからアクセス
# http://ラズパイのIP:6080/vnc.html
例4:NGINXリバースプロキシ経由でのSSL対応
本番環境では、SSL/TLS暗号化とリバースプロキシを組み合わせるのがベストプラクティスです。
server {
listen 80;
server_name novnc.example.com;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl http2;
server_name novnc.example.com;
ssl_certificate /etc/letsencrypt/live/novnc.example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/novnc.example.com/privkey.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers HIGH:!aNULL:!MD5;
# noVNCへのプロキシ
location /vnc/ {
proxy_pass http://127.0.0.1:6080/;
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
# WebSocket接続用
location /websockify {
proxy_pass http://127.0.0.1:6080/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_set_header Host $host;
# WebSocket接続を維持
proxy_read_timeout 600s;
proxy_buffering off;
}
}
トラブルシューティング:よくある問題と解決策
noVNCを使っていると、さまざまな問題に遭遇することがあります。ここでは代表的なトラブルとその対処法を紹介します。
問題1:「Failed to connect to server」と表示される
症状:
接続ボタンを押しても「Failed to connect to server」というエラーが表示される。
原因と対策:
- VNCサーバーが起動していない
# VNCサーバーの状態を確認
vncserver -list
# 起動していなければ起動
vncserver :1
- websockifyが正しく起動していない
# websockifyのプロセスを確認
ps aux | grep websockify
# 再起動してみる
pkill websockify
novnc --listen 0.0.0.0:6080 --vnc localhost:5901
- ファイアウォールでポートがブロックされている
# UFWの場合
sudo ufw allow 6080/tcp
# firewalldの場合
sudo firewall-cmd --permanent --add-port=6080/tcp
sudo firewall-cmd --reload
- VNCサーバーがlocalhostのみリッスンしている VNCサーバーの設定で
-localhost noオプションを付ける必要がある場合があります:
vncserver :1 -localhost no
問題2:接続できるが画面が真っ黒
症状:
「Connected」と表示されるが、画面が真っ黒のまま何も表示されない。
原因と対策:
- デスクトップ環境が起動していない VNCサーバーの設定ファイル
~/.vnc/xstartupを確認:
#!/bin/bash
unset SESSION_MANAGER
unset DBUS_SESSION_BUS_ADDRESS
exec startxfce4 &
実行権限を付与:
chmod +x ~/.vnc/xstartup
- VNCサーバーを再起動
vncserver -kill :1
vncserver :1 -geometry 1280x720
- ブラウザのキャッシュをクリア 特にChromeやEdgeで問題が起きる場合は、キャッシュをクリアしてハードリロード(Ctrl+Shift+R)。
- 解像度の問題 解像度を下げてみる:
vncserver :1 -geometry 1024x768
問題3:SSL/TLS接続で「Mixed Content」エラー
症状:
HTTPSでアクセスすると「Mixed Content」エラーが発生する。
原因と対策:
HTTPSページからHTTP通信を行おうとすると、ブラウザがブロックします。
解決策:websockifyでもSSLを有効化
# 自己署名証明書の作成(テスト用)
openssl req -new -x509 -days 365 -nodes \
-out cert.pem -keyout key.pem
# SSL付きでwebsockifyを起動
websockify --cert=cert.pem --key=key.pem \
--web /usr/share/novnc/ \
6443 localhost:5901
本番環境では、Let’s Encryptなどの正式な証明書を使用します:
# Certbotで証明書取得
sudo certbot certonly --standalone -d novnc.example.com
# 証明書を指定してwebsockifyを起動
websockify \
--cert=/etc/letsencrypt/live/novnc.example.com/fullchain.pem \
--key=/etc/letsencrypt/live/novnc.example.com/privkey.pem \
--web /usr/share/novnc/ \
443 localhost:5901
問題4:接続が頻繁に切れる
症状:
接続が不安定で、頻繁に切断される。
原因と対策:
- WebSocketタイムアウトの設定 NGINXを使っている場合、
proxy_read_timeoutを長めに設定:
location /websockify {
proxy_pass http://127.0.0.1:6080/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
# タイムアウトを10分に設定
proxy_read_timeout 600s;
proxy_send_timeout 600s;
}
- ネットワークの帯域幅が不足 VNCのエンコーディングを変更して、データ量を減らす:
- noVNCの設定画面から「Quality」を「Low」に変更
- 「Compression」を「High」に設定
- システムリソース不足 サーバーのCPU/メモリ使用率を確認し、必要に応じてリソースを増強。
問題5:日本語入力ができない
症状:
日本語が入力できない、または文字化けする。
原因と対策:
- サーバー側の日本語環境を確認
# ロケールの確認
locale
# 日本語ロケールがない場合
sudo apt install language-pack-ja
sudo update-locale LANG=ja_JP.UTF-8
- 日本語入力システムのインストール
sudo apt install ibus-mozc
# または
sudo apt install fcitx-mozc
- VNCサーバーを再起動
vncserver -kill :1
vncserver :1
デバッグ方法:ログの確認
問題の原因が分からない場合は、ログを確認するのが効果的です。
noVNCのデバッグログ:
ブラウザのJavaScriptコンソールを開いて、詳細なログを確認できます:
http://サーバーIP:6080/vnc.html?logging=debug
websockifyのログ:
# 詳細ログ付きで起動
websockify --verbose --web /usr/share/novnc/ 6080 localhost:5901
VNCサーバーのログ:
# ログファイルの場所
tail -f ~/.vnc/*.log
セキュリティ対策:安全にnoVNCを使うために
noVNCをインターネット上に公開する場合、セキュリティ対策は必須です。以下のベストプラクティスを実践しましょう。
1. SSL/TLS暗号化は必須
平文通信(HTTP)では、パスワードや画面内容がすべて盗聴される可能性があります。必ずHTTPSを使用してください。
Let’s Encryptで無料のSSL証明書を取得:
# Certbotのインストール
sudo apt install certbot
# 証明書の取得
sudo certbot certonly --standalone -d novnc.example.com
# 自動更新の設定
sudo systemctl enable certbot.timer
2. Basic認証の追加
VNCのパスワードだけでは不十分です。Webサーバーレベルで認証を追加しましょう。
NGINXの場合:
# パスワードファイルの作成
sudo apt install apache2-utils
sudo htpasswd -c /etc/nginx/.htpasswd username
NGINX設定に追加:
location /vnc/ {
auth_basic "Restricted Access";
auth_basic_user_file /etc/nginx/.htpasswd;
proxy_pass http://127.0.0.1:6080/;
}
3. ファイアウォールの設定
不要なポートは閉じ、必要なIPアドレスからのみアクセスを許可します。
# UFWの場合
sudo ufw default deny incoming
sudo ufw default allow outgoing
# 特定のIPからのみ6080ポートへのアクセスを許可
sudo ufw allow from 192.168.1.0/24 to any port 6080
# SSHは別途許可
sudo ufw allow 22/tcp
sudo ufw enable
4. VNCパスワードの強化
VNCのデフォルトパスワードは最大8文字という制限がありますが、推測されにくい複雑なパスワードを設定しましょう。
# パスワードの再設定
vncpasswd
# より安全なVNCサーバーの起動(TLS認証)
vncserver :1 -SecurityTypes VeNCrypt,TLSVnc
5. アクセスログの監視
不審なアクセスを検知するため、ログを定期的にチェックします。
# NGINXアクセスログ
tail -f /var/log/nginx/access.log | grep novnc
# VNCログ
tail -f ~/.vnc/*.log
6. レート制限
Brute Force攻撃を防ぐため、NGINXでレート制限を設定します。
# http コンテキストに追加
limit_req_zone $binary_remote_addr zone=novnc_limit:10m rate=5r/s;
# server コンテキストに追加
location /vnc/ {
limit_req zone=novnc_limit burst=10;
# その他の設定...
}
7. Read-Onlyモードの活用
デモや監視目的の場合、読み取り専用モードを使用します。
# Docker環境での例
docker run -it -p 6901:6901 \
-e VNC_VIEW_ONLY=true \
-e VNC_PW=viewpassword \
consol/rocky-xfce-vnc
よくある質問(FAQ)
Q1:noVNCは無料で使えますか?
A: はい、noVNCは完全に無料のオープンソースソフトウェアです。ライセンスはMPL 2.0(Mozilla Public License 2.0)で、商用利用も可能です。
Q2:noVNCとGuacamoleの違いは何ですか?
A: どちらもブラウザベースのリモートアクセスツールですが、以下の違いがあります:
noVNC:
- VNC専用のクライアント
- 軽量でシンプル
- 設定が簡単
- HTML5とJavaScriptのみ
Guacamole:
- VNC、RDP、SSHに対応
- サーバーサイドはJavaで実装
- より多機能(ファイル転送、録画など)
- 複雑な構成
単純にVNCだけ使いたい場合はnoVNCがシンプルで使いやすいです。
Q3:音声は転送できますか?
A: 標準のVNCプロトコルでは音声転送に対応していません。音声が必要な場合は、以下の方法があります:
- PulseAudio over SSH:SSHトンネリングで音声を転送
- RDPの使用:音声対応が必要ならRDP(リモートデスクトッププロトコル)を検討
- 別途ストリーミング:音声だけWebRTCなどで別途配信
Q4:複数ユーザーが同時接続できますか?
A: できますが、設定が必要です:
# ユーザーごとに異なるディスプレイ番号を割り当て
# ユーザー1用
vncserver :1 # ポート5901
novnc --listen 6081 --vnc localhost:5901 &
# ユーザー2用
vncserver :2 # ポート5902
novnc --listen 6082 --vnc localhost:5902 &
各ユーザーは異なるポート経由でアクセスします。
Q5:モバイルデバイスでの使い勝手は?
A: iOS、Androidともに動作しますが、以下の点に注意:
良い点:
- タッチ操作がマウス操作に変換される
- ピンチでズーム可能
- スクリーンキーボードも使用可能
制限:
- 小さい画面では操作しづらい
- 複雑なマウス操作(右クリック長押し等)が必要
- 解像度を下げる(1024×768程度)と快適
Q6:どのブラウザが最も快適ですか?
A: 現代のブラウザならどれでも動作しますが、推奨は:
- Chrome/Edge:最も高速で安定
- Firefox:良好なパフォーマンス
- Safari:iOS/macOSで快適
古いブラウザは避けてください:
- Chrome 89未満
- Firefox 89未満
- Safari 11未満
Q7:Dockerコンテナで使う時のベストプラクティスは?
A: 以下のポイントを押さえましょう:
# 1. 共有メモリサイズを増やす
docker run --shm-size=256m ...
# 2. 適切なユーザー権限で実行
docker run --user $(id -u):$(id -g) ...
# 3. 環境変数で解像度を設定
docker run -e VNC_RESOLUTION=1280x720 ...
# 4. 永続化が必要ならボリュームをマウント
docker run -v novnc-data:/home/user ...
Q8:パフォーマンスを改善するには?
A: 以下の設定を試してください:
サーバー側:
# 色深度を下げる
vncserver :1 -depth 16
# 解像度を下げる
vncserver :1 -geometry 1024x768
# 軽量なデスクトップ環境を使う
# GNOMEやKDEではなくXfce、LXDEなど
クライアント側:
- noVNCの設定で「Compression Level」を高く
- 「Quality」を低く設定
- 不要なエフェクトを無効化
ネットワーク:
- 可能な限り有線接続
- VPN経由の場合は帯域幅に注意
Q9:商用製品での利用は可能ですか?
A: はい、可能です。noVNCはMPL 2.0ライセンスで、商用利用が明示的に許可されています。実際、OpenStack、Proxmox、Digital Oceanなど多くの商用製品で採用されています。
ただし、改変した場合はその部分のソースコードを公開する必要があります(詳細はライセンス文を参照)。
Q10:VNCサーバーが既にある場合、何をインストールすれば良いですか?
A: noVNCとwebsockifyだけで十分です:
# Pipでインストール(最も簡単)
pip install novnc
# または、システムパッケージ
sudo apt install novnc websockify # Ubuntu/Debian
sudo yum install novnc # CentOS/RHEL
# すぐに起動可能
novnc --vnc localhost:5901
既存のVNCサーバーはそのまま使えます。
まとめ:noVNCで実現する柔軟なリモートアクセス
noVNCは、ブラウザだけでVNC接続を可能にする革新的なツールです。専用クライアントのインストールが不要なため、出先のPCやモバイルデバイスからでも気軽にリモートデスクトップにアクセスできます。
noVNCが活躍する場面:
- 開発環境:Dockerコンテナ内のGUIアプリケーションをブラウザから操作
- サーバー管理:データセンターのサーバーやVMをリモート管理
- 教育・トレーニング:学生や研修生に簡単にアクセス環境を提供
- IoTデバイス:Raspberry Piなどの組み込み機器をヘッドレスで管理
- クラウドサービス:仮想デスクトップサービスの基盤として
セットアップは非常にシンプルで、基本的には:
- VNCサーバーを起動
- noVNC + websockifyを起動
- ブラウザでアクセス
の3ステップだけです。
本番環境で使用する場合は、SSL/TLS暗号化、認証の追加、ファイアウォール設定などのセキュリティ対策を忘れずに実施しましょう。適切な設定を行えば、noVNCは安全で便利なリモートアクセス手段として活躍してくれます。
ぜひnoVNCを活用して、場所を選ばない柔軟なリモートワーク環境を構築してください!
参考リンク:


コメント