通过 VS Code 的 Remote-SSH 连接到服务器时如何显示服务器端 GUI

文章目录

一、vscode下载
二、连接服务器
- 1. 安装remote development套件
- 2. 配置ssh
- 3. 连接服务器
- 4. 打开服务器文件路径
三、支持GUI显示
- 1. windows系统安装xserver服务：可以用xming或VcXsrv
- 2. windows系统(安装了vscode的系统)下安装插件
- 3. vscode实现免密登录远程服务器
- 4.配置
- - 4.1 客户端(windows系统)配置
  - 4.2 服务器(ubuntu系统)配置
  - - 第一步：确认$DISPLAY变量的值
- 5. 整体运行步骤
- - 5.1 运行VcXsrv
  - 5.2 打开vscode连接到服务器
  - 5.3 验证GUI是否正常显示
  - - 5.3.1 验证终端terminal使用GUI
    - 5.3.2 在服务器要使用GUI的工程中设置.vscode/launch.json (使得工程中的程序能使用GUI)
四、使用上常见一些问题
- 1. 代码中文显示乱码问题

参考链接：
利用VScode连接远程服务器进行代码调试及可视化界面
VSCode『SSH』连接服务器『GUI界面』传输
当通过 VS Code 的 Remote-SSH 连接到服务器时如何显示服务器端 GUI（以 Windows 本地 → Ubuntu 远程为例）
VScode远程调试C++工程含X11（局域网）

一、vscode下载

vscode官网，下载页面如下，根据需要下载
在这里插入图片描述
对于windows系统，有两个版本：

User Installer版：会安装在当前计算机帐户目录,意味着如果使用另一个账号登陆计算机将无法使用别人安装的vscode。
System Installer版：安装在非用户目录,例如C盘根目录,任何帐户都可以使用。(建议使用此版本)
vscode默认提供的User Installer版,大多数人都是用的这个版本。

我这里选择System Installer版。

二、连接服务器

1. 安装remote development套件

在这里插入图片描述

2. 配置ssh

在这里插入图片描述
并选择ssh配置文件

在配置文件中设置你的服务器信息，输入 HostName 服务器IP地址和 User 服务器用户名，保存以后左侧会出现对应机器名称。我C:\Users\chenky190417.ssh\config内容如下：

Host 192.168.162.103
  HostName 192.168.162.103
  User firefly

3. 连接服务器

在这里插入图片描述

连接过程需要输入服务器对应用户的密码。

4. 打开服务器文件路径

打开服务器文件，只需要在文件菜单下，点击 Open Folder，就能在右侧窗口查找自己想要打开的文件路径了，点击 OK 打开。此时对文件的编辑就可以实时同步到服务器上。
在这里插入图片描述
连接成功并打开服务器代码路径后如下图：

三、支持GUI显示

调试以及运行一些GUI显示项目会碰到
Error: Can’t open display:

问题描述

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

解决思路

使用X协议进行转发，也就是把显示在远程服务器上的图像转发到我们的本地系统。具体原理如下：
在这里插入图片描述

操作步骤

(1) 在本地系统中安装并开启x11服务（这里使用X ming）
(2) 本地vscode安装Remote-SSH 和Remote X11插件（在前面顺便装了）
(3) ssh免密的设置
(4 )在服务器中设置DISPLAY的环境变量（使得terminal也能使用GUI)

1. windows系统安装xserver服务：可以用xming或VcXsrv

参考链接：
VScode远程调试C++工程含X11（局域网）
VScode环境搭建+远程连接服务器+x11

微软官方推荐安装VcXsrv下载地址
在这里插入图片描述

在这里插入图片描述

2. windows系统(安装了vscode的系统)下安装插件

vscode上安装Remote X11（SSH）和 Remote X11 插件
在这里插入图片描述

3. vscode实现免密登录远程服务器

(1) 在windows中按下win+R快捷键进入cmd命令框中运行命令

ssh-keygen

会在C:\Users\chenky190417.ssh生成两个文件

id_rsa.pub # 公钥
id_rsa # 私钥

(2) 登录linux服务器，将windows用户的公钥文件追加到~/.ssh/authorized_keys
登录服务器，如果当前用户目录下没有.ssh目录，用ssh-keygen方法生成，在.ssh目录下生成authorized_keys，该文件包含一系列允许登录该服务器的公钥，如没有就新建该文件。将公钥内容追加到~/.ssh/authorized_keys中，追加的方法可以是：

cat id_rsa.pub >> authorized_keys

并在配置文件config中添加如下内容：

IdentityFile "C:\Users\chenky190417\.ssh\id_rsa"

这样就可以免密登录远程服务器了。

4.配置

4.1 客户端(windows系统)配置

在配置文件C:\Users\chenky190417.ssh\config中添加如下内容：

    ForwardAgent yes
    ForwardX11 yes
    ForwardX11Trusted yes

4.2 服务器(ubuntu系统)配置

第一步：确认$DISPLAY变量的值

确认的方法是：服务器端输入下图命令，如果出现> echo $DISPLAY localhost:10.0

如果没有，需要设置DISPLAY的值，可以在~/.bashrc默认增加：

export DISPLAY="localhost:10.0"

修改完后要source ~/.bashrc，即可，下面的内容不容处理也可以：

vim /etc/ssh/sshd_config
 # 找到这一行 这条配置的意义是允许 ssh 的 x11 转发
 X11Forwrding yes
 PubkeyAuthentication yes
 RSAAuthentication yes  #没有找到这条，增加
 AuthorizedKeysFile      .ssh/authorized_keys  #没有找到这条，增加

保存退出
service sshd restart # 重启 sshd
echo $DISPLAY # 输出 localhost:10.0