前言

架構圖
網頁版的VNC客戶端預覽

因為懶懶出門上班在外，偶爾有連回自己VPS主機進行圖形環境操作的需求(說白就是利用遠端桌面瀏覽PTT八卦版或巴哈姆特啦~)，便開始找尋使用VNC的方法，由於在外使用電腦，若要使用各式VNC Client軟體來連結稍嫌麻煩，若能使用瀏覽器直連就方便很多囉!目前發現方便好用的有:

  1. Google Remote Desktop (安裝方便，使用Google伺服器中轉安全快速，但要綁定Google帳戶)
  2. Cloudflare Tunnel (安裝複雜，使用CF自家伺服器中轉，網頁端可直接輸入密碼登入使用)

由於Cloudflare Tunnel安裝較為繁瑣，故本篇介紹如何使用Cloudflare Tunnel自帶的VNC Client功能連結遠端桌面，需要工具有:

  1. Cloudflare Tunnel
  2. Cloudflare Zero Trust
  3. 頂級域名1個 (可以使用懶懶介紹的eu.org域名)
  4. 你的機器(VPS.SBC. etc..)

使用的桌面系統為 Ubuntu 22.04 Server版，桌面環境為 LXQt 0.17版本，然後附帶安裝新酷音輸入法的教學!

教學 - 伺服器端

Ubuntu 22.04 安裝 LXQt 桌面環境

若你想使用VNC連結到你的VPS主機，那你的系統必須具備桌面環境，由於懶懶使用Ubuntu 22.04 Server版本身不自帶桌面環境，故須先安裝桌面環境，再行安裝VNC Server，懶懶使用LXQt作為範例，當然你也可以使用自己喜歡的桌面環境!

  1. 首先更新軟體庫清單
1

sudo apt update
  1. APT指令安裝LXQt
1

sudo apt install lxqt

安裝LXQt桌面環境大約需要2GB左右的空間，請注意硬碟空間夠不夠喔!

安裝LXQt過程
  1. 重新啟動
1

sudo reboot

懶懶這裡使用VPS管理後台的noVNC進入查看，已經可以進入顯示管理器(Display Manager)頁面囉!

noVNC後台

安裝 VNC Server

在安裝LXQt桌面環境後，我們接著安裝VNC Server，根據Cloudflare官方文檔使用TightVNC作為服務端使用，但經懶懶實測它與LXQt桌面不合，所以懶懶改用TigerVNC作為服務端!

  1. 安裝TigerVNC Server
1

sudo apt install tigervnc-standalone-server
  1. 設定初始密碼

執行vncserver指令初始運行TigerVNC Server

1

vncserver
  1. 接著設定登入VNC Server的密碼(需輸入兩次確認)
1
2
3

You will require a password to access your desktops.
Password:
Verify:
  1. 軟體會詢問你是否設定view-only密碼，懶懶這裡輸入n代表不需要
1
2
3
4
5

Would you like to enter a view-only password (y/n)? n
A view-only password is not used

New Xtigervnc server 'lanlanblog:1 (i9)' on port 5901 for display :1.
Use xtigervncviewer -SecurityTypes VncAuth -passwd /home/i9/.vnc/passwd :1 to connect to the VNC server.
  1. 在htop任務管理器裡，我們可以看到Xtigervnc :1 正在運行(黃色高亮部分)
任務管理器
  1. 接著我們來修改TigerVNC的設定文件

首先關閉使用中的Xtigervnc :1 程序

1

vncserver -kill :1

開啟~/.vnc/xstartup文件進行修改

1

nano ~/.vnc/xstartup

新增下列段落後保存

1
2
3
4
5
6
7
8

#!/bin/sh
xhost +

export GTK_IM_MODULE=fcitx
export QT_IM_MODULE=fcitx
export XMODIFIERS=@im=fcitx

/usr/bin/startlxqt

修改文件權限

1

chmod +x ~/.vnc/xstartup

使用localhost模式運行TigerVNC

1

vncserver :1

使用ss指令查看網路狀態，可以看到程序Xtigervnc占用在127.0.0.1:5901

1

ss -lntp
localhost模式的TigerVNC
注意事項

關於如何建立Systemd自啟動TigerVNC及其他桌面環境安裝，請參閱

How to Install & Configure VNC Server on Ubuntu 22.04|20.04 -ByteXD https://bytexd.com/how-to-install-configure-vnc-server-on-ubuntu/

教學 - 客戶端

使用Cloudflare Tunnel 連結到你的VNC遠端桌面

關於如何安裝及建立Cloudflare Tunnel，請參閱懶懶過往的文章

如何使用Cloudflare Tunnel建立網頁版的SSH終端機
如何使用Cloudflare Tunnel建立網頁版的SSH終端機 - 懶懶部落
https://lanwp.org/15-how-to-use-cloudflaretunnel-build-webbase-sshterminal/

與建立SSH不一樣的地方有以下幾點

  1. 儲存Cloudflare tunnel設定時，選擇tcp以及輸入網址localhost:5901
Cloudflare Tunnel
  1. 進入Cloudflare Zero Trust 控制面板後，再來要建立Cloudflare Appliacations時，在最後一步「Browser rendering」選擇VNC
Cloudflare Zero Trust
  1. 輸入你綁定的網址，認證完Cloudflare Zero Trust後，輸入TigerVNC初始設定的密碼後即可進入!
注意事項

無法連線的處理方法

  1. 請注意TigerVNC主程序有沒有開啟，輸入vncserver :1查看是否開啟(記得設定Systemd自啟動TigerVNC)
  2. 有沒有其他VNC程式占用port 5901

教學 - LXQt中文化及安裝新酷音輸入法

  1. LXQt中文化
右下角選單依次選取
選擇台灣-繁體中文(zh-TW)

重新開機即可!

1

sudo reboot
  1. 安裝fcitx5
1
2
3
4
5
6
7
8
9

sudo apt install fcitx5*

im-config

mkdir -p ~/.config/autostart/

cp /usr/share/applications/org.fcitx.Fcitx5.desktop ~/.config/autostart/

sudo reboot
輸入指令im-config選擇輸入法
選擇YES
選擇fcitx5

重新開機之後，開啟Firefox瀏覽器按下"ctrl"+“空格鍵"就可以切換新酷音輸入法囉!!

最終成果!

參考資料

  1. https://developers.cloudflare.com/cloudflare-one/tutorials/vnc-client-in-browser/
  2. https://bytexd.com/how-to-install-configure-vnc-server-on-ubuntu/
  3. https://ivonblog.com/posts/ubuntu-fcitx5/