VSCode 连接远程服务器使用图形化界面(GUI)

您所在的位置:网站首页 服务器链接电脑主机怎么进入服务器界面 VSCode 连接远程服务器使用图形化界面(GUI)

VSCode 连接远程服务器使用图形化界面(GUI)

2024-02-18 06:01| 来源: 网络整理| 查看: 265

1.基本环境

本地电脑系统:window10

远程服务器系统:Ubuntu18.04.2

VSCode版本:1.51.1

 

2.问题描述

vscod提供了优秀的远程连接插件(Remote-SSH),我们可以方便地连接远程服务器进行编程。但是如果我们程序涉及到操作显示图像,由于程序运行在服务器上,无法直接将图像显示到我们的本地系统。或者我们想使用gedit这中需要图形化界面支持的linux命令,也会报错。

 

3.解决思路

使用X协议进行转发,也就是把显示在远程服务器上的图像转发到我们的本地系统。具体原理如下:

X 协议由 X server 和 X client 组成(这里X server对应本地电脑,X Client对应服务器):

X server 管理主机上与显示相关的硬件设置(如显卡、硬盘、鼠标等),它负责屏幕画面的绘制与显示,以及将输入设置(如键盘、鼠标)的动作告知 X client。X client (即 X 应用程序) 则主要负责事件的处理(即程序的逻辑)。

举个例子,如果用户点击了鼠标左键,因为鼠标归 X server 管理,于是 X server 就捕捉到了鼠标点击这个动作,然后它将这个动作告诉 X client,因为 X client 负责程序逻辑,于是 X client 就根据程序预先设定的逻辑(例如画一个圆),告诉 X server 说:“请在鼠标点击的位置,画一个圆”。最后,X server 就响应 X client 的请求,在鼠标点击的位置,绘制并显示出一个圆。

 4.操作步骤 在本地系统中安装并开启x11服务(这里使用X ming)本地vscode安装Remote-SSH 和Remote X11插件设置本地vscode Remote-SSH中与服务器连接相关的设置在服务器要使用GUI的工程中设置.vscode/launch.json (使得工程中的程序能使用GUI)在服务器中设置DISPLAY的环境变量(使得terminal也能使用GUI) 4.1本地系统(win10)安装X ming 4.1.1下载连接:

Xming下载

4.1.2安装Xming

此步可以修改安装路径,其他步骤全点击下一步直至完成。

4.1.3开启X11服务

打开x11launch,一直点下一步,直至完成。记住第二张图片的Display number,等下要用。

4.1.4 修改x ming 设置

我们需要在x ming安装目录中找到X0.hosts文件,并且在localhost下添加你的服务器ip(X0.hosts中的0就是刚才需要记住的Display number)

4.2本地vscode安装Remote-SSH 和Remote X11插件 4.2.1安装插件

在vsocde软件的extensions中搜索对应插件名,并点击安装(以Remote X11为例)。

4.3设置本地vscode Remote-SSH 4.3.1按如下步骤打开remote-ssh设置

4.3.2加入如下字段 比如你的服务器地址是 192.168.133.111, 用户名是aaa Host sdfasdf #这里可以随便取一个名字 HostName 192.168.133.111 ForwardX11 yes ForwardX11Trusted yes ForwardAgent yes User aaa 4.4在服务器要使用GUI的工程中设置.vscode/launch.json 4.4.1设置.vscode/launch.json

用vscode连接上服务器,并且打开一个工程,在.vscode/launch.json尾部添加红框内代码,如果已有env属性,则在里面添加"DISPLAY":"localhost:10.0"就可。

4.5在服务器中设置DISPLAY的环境变量 4.5.1向~/.bashrc添加环境变量,并使用source ~/.bashrc更新。

4.5.2验证环境变量设置成功

 

5.验证 5.1验证工程程序可使用服务器GUI

可使用下面python程序,如果出现图像则安装成功。如果不成功,可以重启vscode再试试。

import matplotlib.pyplot as plt import numpy as np from mpl_toolkits.mplot3d import Axes3D ax = plt.axes(projection='3d') ax.scatter(np.random.rand(10),np.random.rand(10),np.random.rand(10)) plt.show()

5.2验证terminal可使用GUI

再vscode的terminal中输入xclock,出现时钟则安装成功。如果不成功,可以重启vscode再试试。

参考连接

X协议相关

https://blog.csdn.net/akuoma/article/details/82182913

https://blog.csdn.net/zb12138/article/details/107160825

 



【本文地址】


今日新闻


推荐新闻


    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3