VSCode 之 Remote-SSH，远程编辑服务器项目

桦小哥
5,048 阅读3分钟

前言

vscode 是一个轻量级的前端代码编辑器，它有一个功能，就是能够连接服务器，远程编辑服务器中的项目代码，这个功能需要安装Remote-SSH插件，接下来我们来记录下，怎么使用这个插件进行远程开发的。

安装插件

1、搜索remote-ssh 插件，安装

2、安装好后，左侧侧边栏出现新的功能tab(Remote Explorer)

3、点击SSH TARGETS 右侧的 “ + ” 号，添加需要连接的服务器信息

4、按提示输入服务器公网ip和用户名

例如：

ssh hello@110.110.110.110

5、选择ssh连接信息存放的文件

第一个文件是用户默认存放ssh配置的文件，默认选择这个文件。当然，也可以选择第三个选项，自定义配置存放文件的路径。这里我们选择第一项。

6、连接服务器

此时，我们发现，左侧SSH TARGETS 多出了一个配置信息栏目，鼠标右键点击，出现有两个选项的菜单栏，点击“Connect to Host in Current Window”,接下来输入用户密码

7、报错了

此时，我们发现，连接失败了。

8、安装remote development

在mac上，安装了remote-SSH,就能成功连接了。window却会报错，那我们再安装另一个插件配合使用，Remote Development,如下图安装。安装后再次连接。

9、成功连接服务器

此时，我们发现，已经成功通过SSH与服务器连接了

10、打开项目

点击Open Folder，打开服务器中项目存放的文件夹。

11、打开Terminal

  1. 打开项目后，还要再次输入密码，每次打开都要输入两次密码，极其麻烦，待会我们用ssh key的方式连接服务器，不用每次都输入密码；

  2. vscode 有个比较强大的功能，就是集合了terminal,能够远程控制我们已经连接的服务器。不过此时底部的TERMINAL是不能输入指令的，需要我点击顶部菜单栏的Terminal -> New Terminal 去打开另一个终端，这个终端才能输入控制指令。

12、成功

到现在，我们已经成功通过vscode 连接服务器，可以开心地编写代码了。

SSH KEY 连接

  1. 服务器生成id_rsa.pub和id_rsa文件，把id_rsa私钥发送到客户端。
  2. 找到客户端ssh配置文件（C:\Users\用户名\.ssh）,把私钥文件放在这个目录下
  3. 修改config文件如下
#Old:
Host AAA
  HostName 110.110.110.110
  User AAA
  
#New:
Host AAA
  HostName 110.110.110.110
  User AAA
  Port 22
  IdentityFile ~/.ssh/my_id_rsa
  #注意，这个配置，是之前vscode 中生成的，我们只是在之前的基础上，增加了点配置信息。
  1. 保存文件后，客户端终端可以通过
ssh AAA

连接服务器。

  1. vscode中，通过原先的方式连接，不用做任何改动，此时，不会再有提示输入密码的弹框。

结语

到这里，我们已经通过要输入密码和SSH key的方式，通过vscode连接服务器，并能够远程修改项目代码了。在window中，可能不同的操作系统版本会出现各种奇奇怪怪的问题，百度上的解决方案也各有不同，总之，折腾成功就万事大吉了。mac上倒是没那么多麻烦事，怪不得前端都喜欢用mac开发，确实能省心不少。。。

avatar
文章
阅读
粉丝