vscode 远程(隧道/ssh) remote 开发 linux 显示远程桌面GUI 配置 SSH X11 服务

原文地址

https://www.cnblogs.com/Bubgit/p/18829192

实现效果

  • windows显示ubuntu 的 GUI 桌面显示内容, 以wails 项目为例 搭建远程linux 跨平台* 桌面应用程序;
  • 最终效果,在远程ssh连接上开发环境后,可以在本地windows 上看到显示的远程桌面信息,实现远程linux开发GUI程序
  • 同理可以实现Python matplotlib,ROS机器人可视化界面等需要在无GUI环境的linux中调试开发GUI陈旭:
    image

基本原理

  • X11 是一个图形显示协议:X11(也称为 X Window System)是一个用于在计算机上显示图形界面的底层协议。它的主要职责是处理图形的绘制、窗口管理以及输入设备(如键盘和鼠标)的交互;
  • 几乎所有 Linux 上的 GUI 应用程序都基于 X11 构建,确保了广泛的兼容性;
  • X11 的网络透明性使得远程显示图形界面成为可能;

本地环境

windows 10:其他版本暂时没有尝试
VSCode: 需要安装 remote ssh 插件
VcXsrv:作为X11服务器下载地址:https://sourceforge.net/projects/vcxsrv/

远程开发服务器

ubuntu 22
其他自动下载:

注意

本文章仅记录配置x11服务端和客户端的配置,不涉及wails 项目的配置,wails的项目初始化配置请参考其他文章,这里只用于示例远程显示Linux 桌面GUI信息

本地windows软件安装配置 如下图

  1. 下载 VcXsrv 安装包,示例版本为:64.1.20.14.0
    image

  2. VcXsrv 安装过程略,一路默认下一步即可;

  3. 配置windows 环境变量, 注意用户变量和系统变量不一定都需要添加,只需要添加环境变量后,在windows shell中可以拿到环境变量即可, DISPLAY: localhost:0.0

image

image

  1. 安装完成后,运行Xlaunch -> Multiple windows -> start no client -> Disable access control ;详细步骤如下:

image

image

image

image

VsCode 配置 如下图

# 安装必要组件
sudo apt install xauth

# 安装x11 测试工具
sudo apt install x11-apps

# 安装中文支持包 可以不安,不安中文显示乱码
sudo apt install fonts-wqy-zenhei
# 编辑SSH配置文件
sudo nano /etc/ssh/sshd_config

# 确保以下两行未被注释
X11Forwarding yes
X11UseLocalhost no

# 重启SSH服务
sudo systemctl restart sshd

# 安装xauth(关键!)
sudo apt install xauth  # Debian/Ubuntu
sudo yum install xauth  # CentOS/RHEL
  • 启用ssh 的 x11 支持,相当于 ssh -Y user@host
  • 特别注意! 配置完成后要重启 VsCode,否则可能会无法生效,重启的概念是关闭VsCode的所有窗口,再打开,最稳妥的是重启电脑,VsCode老毛病了;
    image

image

image

VsCode 重启完成后验证

在 VsCode 连接上远程ssh 服务器后,开一个终端,输入xeyes 或者 xclock 测试能否显示远程服务器的图像:
image
前置条件,远程服务器的环境变量也能获取到 $DISPLAY 的值是localhost:10.0
注意:远程服务器的$DISPLAY环境变量是

验证业务开发应用 (仅做展示)

wails dev

image

参考博文:
[1] https://zhuanlan.zhihu.com/p/27155499043

From:https://www.cnblogs.com/Bubgit/p/18829192
Bubgit
100+评论
captcha