本文更新於2025年08月10日

前言

架構圖

懶懶平時出門上班在外，偶有連回自己 VPS 主機進行圖形環境操作的需求 (說白就是利用遠端桌面瀏覽 PTT 八卦版或巴哈姆特)，便開始尋找能夠遠端操作電腦的方法。

懶懶平常是使用公司的電腦，若還要安裝 VNC 的客戶端軟體稍嫌麻煩，但如果能使用瀏覽器直連就方便很多囉！

目前發現的方便使用的軟體：

  1. Google Remote Desktop (安裝方便，使用 Google 伺服器中轉安全快速，但要綁定 Google 帳戶)
  2. Kasm WorkSpace (可以使用 Docker 安裝，配合Cloudflare Tunnel 中轉，網頁端直接輸入帳號密碼登入使用)
  3. Cloudflare Tunnel + VNC Server (安裝繁瑣，使用 Cloudflare 數據中心伺服器中轉，網頁端可直接輸入密碼登入使用)

由於 Cloudflare Tunnel 與 VNC 服務端安裝較為複雜，故本篇將逐步介紹安裝流程，需要工具有:

  1. Cloudflare 帳戶 (需綁定信用卡)
  2. Top-level Domain 頂級域名1個 (可使用eu.org域名)
  3. 你的遠端主機

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

教學 - 伺服器端

1. Ubuntu 24.04 安裝 LXQt 桌面環境

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

  1. 首先更新軟體庫清單以及更新軟體套件
1

sudo apt update && sudo apt upgrade -y
  1. apt指令安裝LXQt桌面環境
1

sudo apt install lxqt -y

安裝 LXQt 桌面環境大約需要 2GB 左右的空間，請先注意硬碟空間是否足夠！

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

sudo reboot

2. 安裝 VNC Server

安裝 LXQt 桌面環境完成後，接續開始安裝 VNC Server

根據 Cloudflare 官方文檔是使用 TightVNC 作為服務端使用，但是因為自身使用習慣，懶懶改為採用 TigerVNC 作為服務端！

  1. 安裝 TigerVNC Server
1

sudo apt install tigervnc-standalone-server -y
  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
6

Would you like to enter a view-only password (y/n)? n
A view-only password is not used
/usr/bin/xauth:  file /home/ubuntu/.Xauthority does not exist

New Xtigervnc server 'oracle:1 (ubuntu)' on port 5901 for display :1.
Use xtigervncviewer -SecurityTypes VncAuth -passwd /tmp/tigervnc.pKPnIx/passwd :1 to connect to the VNC server.
  1. 在htop任務管理器裡，我們可以看到Xtigervnc :1 正在運行(黃色高亮部分)
htop 任務管理器

3. 修改 TigerVNC 的設定文件

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

vncserver -kill :1
  1. 開啟~/.vnc/xstartup文件進行修改
1

vim ~/.vnc/xstartup
  1. 新增下列段落後保存
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. 新增文件執行權限
1

chmod +x ~/.vnc/xstartup
  1. 使用localhost模式運行 TigerVNC 進行測試
1

vncserver :1

1
2
3
4
5

# 輸出
ubuntu@oracle:~$ vncserver :1

New Xtigervnc server 'oracle:1 (ubuntu)' on port 5901 for display :1.
Use xtigervncviewer -SecurityTypes VncAuth -passwd /tmp/tigervnc.QkL4b6/passwd :1 to connect to the VNC server.
  1. 使用ss指令查看網路狀態，可以看到程式Xtigervnc占用在127.0.0.1:5901
1

ss -lntp
localhost模式的TigerVNC

4. 設定 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終端機 - 懶懶部落 https://lanwp.org/15-how-to-use-cloudflaretunnel-build-webbase-sshterminal/

請在詳細參閱以上文章後，注意 與建立 SSH 服務時，有以下幾點不同：

  1. 新增 Cloudflare Tunnel 的「公用主機名稱」設定時，需留意以下幾點：
1
2
3
4
5
6
7
8

主機名稱
	子網域： vnc          # 選擇你喜歡的子網域名稱
	網域： lanlan.eu.org  # 選擇你使用的網域名稱(該網域僅作為範例使用)
	路徑：                # 保持空即可

服務
	類型： TCP            # 選擇TCP
	URL： localhost:5901  # 依照範例輸入 localhost:5901
公用主機名稱設定範例
  1. 進入 Zero Trust 的 「Access 概觀」副欄目，我們選擇「建立應用程式」
建立應用程式
  1. 跳出子畫面後，我們在「自我裝載」區塊選擇「新增應用程式」
新增應用程式
  1. 輸入「應用程式名稱」後，點選「＋ 新增公用主機名稱」
1
2
3
4
5
6
7
8

基本資訊
	應用程式名稱： myvnc             # 選擇你的名稱
	工作階段持續時間： 24 hours      # 保持預設值即可

公用主機名稱
	子網域： vnc          # 同上
	網域： lanlan.eu.org  # 同上
	路徑：                # 保持空即可
加入應用程式設定
  1. 瀏覽器轉譯設定中，下拉選單選擇「VNC」
選擇「VNC」

  1. Access 原則的部分，請依照您的實際需求，建立所需要的驗證方式（如：電子郵件、Service Token… 等等）

  2. 完成後可以看見頁面出現您的「應用程式名稱」

加入應用程式設定

如何連結到 VNC 遠端桌面

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

訪問您先前設定的網址（如：vnc.lanlan.eu.org），會出現驗證畫面，接著依據您的授權方式通過驗證後，即可訪問您的服務。

驗證畫面

無法連線的處理方法

  1. 請注意 TigerVNC 主程序有沒有開啟
  2. 輸入vncserver :1指令查看是否開啟 (記得設定 systemd 自動啟用 TigerVNC )
  3. 確認是否有其他 VNC 程式占用 5901 端口
  4. 確認 cloudflared 的 Docker Network 網路，是否有設定為 host 模式

補充 - LXQt中文化及安裝新酷音輸入法

1. LXQt 中文化

  1. 請依據圖片的路徑，找到Local軟體
左下角選單依次選取
  1. 至Region下拉選單找到台灣 - 繁體中文 (zh-TW)
選擇台灣 - 繁體中文 (zh-TW)
  1. 重新開機即可！
1

sudo reboot

2. 安裝 fcitx5 及安裝新酷音輸入法

1
2
3
4
5

# 安裝 fcitx5 輸入法及相關套件
sudo apt install fcitx5*

# 設定輸入法的預設值
im-config
輸入指令 im-config 選擇輸入法
選擇 YES
選擇 fcitx5 然後 OK
1
2
3
4
5
6
7
8

# 新建 autostart 資料夾
mkdir -p ~/.config/autostart/

# 複製 fcitx5 的啟動連結至autostart 資料夾
cp /usr/share/applications/org.fcitx.Fcitx5.desktop ~/.config/autostart/

# 重新開機
sudo reboot
實際畫面

參考資料

  1. Render a VNC client in browser - Cloudflare Docs

    https://developers.cloudflare.com/cloudflare-one/tutorials/vnc-client-in-browser/

  2. How to Install & Configure VNC Server on Ubuntu 22.04 - ByteXD

    https://bytexd.com/how-to-install-configure-vnc-server-on-ubuntu/

  3. Ubuntu繁體中文輸入法？改用Fcitx5來輸入中文吧！ - Ivon的部落格

    https://ivonblog.com/posts/ubuntu-fcitx5/