前言

架構圖
網頁版的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. 首先更新軟體庫清單
sudo apt update
  1. APT指令安裝LXQt
sudo apt install lxqt

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

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

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

noVNC後台

安裝 VNC Server

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

  1. 安裝TigerVNC Server
sudo apt install tigervnc-standalone-server
  1. 設定初始密碼

執行vncserver指令初始運行TigerVNC Server

vncserver
  1. 接著設定登入VNC Server的密碼(需輸入兩次確認)
You will require a password to access your desktops.
Password:
Verify:
  1. 軟體會詢問你是否設定view-only密碼，懶懶這裡輸入n代表不需要
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 程序

vncserver -kill :1

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

nano ~/.vnc/xstartup

新增下列段落後保存

#!/bin/sh
xhost +

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

/usr/bin/startlxqt

修改文件權限

chmod +x ~/.vnc/xstartup

使用localhost模式運行TigerVNC

vncserver :1

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

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)

重新開機即可!

sudo reboot
  1. 安裝fcitx5
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/