VSCode 远程开发与调试

阳光穿透心脏的1/2处 2022-12-12 04:59 197阅读 0赞

# 简介 #

本次要用到的插件叫 **Remote Development**，使用这个插件可以避免每次修改代码打包后都要重新打包部署到目标服务器上进行测试。在目标服务器上进行开发就跟在本地开发一样。

# 远程主机配置 #

安装 ssh

<table> 
 <thead> 
  <tr> 
   <th align="left">OS</th> 
   <th align="left">Instructions</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Debian / Ubuntu</td> 
   <td align="left">sudo apt-get install openssh-server</td> 
  </tr> 
  <tr> 
   <td align="left">RHEL / Fedora / CentOS</td> 
   <td align="left">sudo yum install openssh-server &amp;&amp; sudo systemctl start sshd.service &amp;&amp; sudo systemctl enable sshd.service</td> 
  </tr> 
 </tbody> 
</table>

使用 `ps -ef | grep ssh` 判断是否启动成功，openssh-server 必须看到 sshd 字样才说明启动成功

![在这里插入图片描述][20201006173711852.png]

# 客户端配置 #

<table> 
 <thead> 
  <tr> 
   <th align="left">OS</th> 
   <th align="left">Instructions</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Windows</td> 
   <td align="left">安装Git，并将 C:\Program Files\Git\usr\bin 添加到环境变量中</td> 
  </tr> 
  <tr> 
   <td align="left">macOS</td> 
   <td align="left">已预装（Comes pre-installed）</td> 
  </tr> 
  <tr> 
   <td align="left">Debian / Ubuntu</td> 
   <td align="left">sudo apt-get install openssh-client</td> 
  </tr> 
  <tr> 
   <td align="left">RHEL / Fedora / CentOS</td> 
   <td align="left">sudo yum install openssh-client</td> 
  </tr> 
 </tbody> 
</table>

# 配置 VSCode #

## 安装 Remote Development 插件 ##

（我这里用 Java 做测试，因此额外要安装 Java Extension Pack）  
![在这里插入图片描述][20201006174835279.png]![在这里插入图片描述][20201007173827370.png]

## 配置自动打开SSH终端 ##

单击左下角绿标，或Ctrl + Shift + P，输入 `remote ssh settings`。勾选 `Always reveal the SSH login terminal`  
![在这里插入图片描述][20201007172930806.png]

## 连接远程主机 ##

单击左下角绿色 Remote Development 图标

*  window系统选 Remote-WSL
 *  Linux系统选 Rmote-SSH  
    ![在这里插入图片描述][20201007173535840.png]  
    选择 Remote-SSH：Connect to Host -——> Configure SSH Hosts -——> 选择当前用户目录下的 ssh config 文件。之后会自动打开一个配置 config 的文件，Host 是名字标识，HostName 是远程主机的IP地址，User 是登录名。编辑完后，保存关闭。

![在这里插入图片描述][20201007174300450.png]

然后依旧是，单击左下角绿色 Remote Development 图标，选择 Connect to Host。这时候出来的列表里就有我们刚刚创建的主机了。  
![在这里插入图片描述][20201007175014553.png]  
单击后会打开一个新的窗口，让你输入密码  
![在这里插入图片描述][20201007175114796.png]  
该图有数据表示连接成功！  
![在这里插入图片描述][20201009100413141.png]

先创建一个test，然后VSCode打开这个Folder

![在这里插入图片描述][20201009102516125.png]

创建一个 test.html  
![在这里插入图片描述][20201009102729933.png]

安装一个新插件，Live Server 用于开启服务器（安装了本地的还不够，还需要在远程安装该组件）

![在这里插入图片描述][20201009105504296.png]

![在这里插入图片描述][20201009102146484.png]  
启动 Live Server 的方法有两种

*  右键 Open With Live Server
 *  右下角 Go Live  
    ![在这里插入图片描述][20201009103848462.png]

[20201006173711852.png]: /images/20221123/3d034b48f4204e609b65a97e25f5df3b.png
[20201006174835279.png]: https://img-blog.csdnimg.cn/20201006174835279.png
[20201007173827370.png]: /images/20221123/3622ee26ff3c462e8177f9c35b555e59.png
[20201007172930806.png]: /images/20221123/8c4c5db251304f5c96b3b8726a348055.png
[20201007173535840.png]: /images/20221123/087be550a54d4647b27a558edb1a1350.png
[20201007174300450.png]: /images/20221123/f29bd77dad3b42db81d72b6f1b32d70c.png
[20201007175014553.png]: /images/20221123/8b59599837404a0e90236c732d2c9bea.png
[20201007175114796.png]: /images/20221123/030759d1c872451fa5c2f0e952747561.png
[20201009100413141.png]: /images/20221123/c6446237e5eb48469f5c65a5b421c493.png
[20201009102516125.png]: /images/20221123/37a4addce17f498d9cdae4e52b60af63.png
[20201009102729933.png]: /images/20221123/2cc91b82554a40589b1826fea519e292.png
[20201009105504296.png]: /images/20221123/cc8c55bba0e34f88a45cc9eb2844c855.png
[20201009102146484.png]: /images/20221123/8445dd3b975a4626a388ae224b699c26.png
[20201009103848462.png]: /images/20221123/0c9f5f34d3f5476f8f068105c4d96a89.png