VS Code通过跳板机连接服务器进行远程代码开发

本文涉及的产品
运维安全中心(堡垒机),免费版 6个月
运维安全中心(堡垒机),企业双擎版|50资产|一周时长
简介: VS Code通过跳板机连接服务器进行远程代码开发

VS Code通过跳板机连接服务器进行远程代码开发


VScode发布了远程编程与调试的插件Remote Development包含(remote-ssh插件),使用这个插件可以在很多情况下代替vim直接远程修改与调试服务器上的代码,同时具备代码高亮与补全功能,就和在本地使用VScode一样,不用在服务器端翻来覆去的配置vim插件


640.jpg


场景1:内网VScode直接SSH远程服务器


如下图所示,开发工程师在公司内网直接通过VScode直接SSH远程服务器

640.png


在VS code中修改与调试服务器上的代码,具体步骤如下


1、在vscode中安装remote-ssh插件


直接在vscode中搜索Remote-SSH或者Remote Development插件即可安装 具体参考如下链接


https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh


640.jpg

2、Win10机器上生成SSH密钥对


ssh-keygen -b 4096 -t rsa


640.jpg

3、并将公钥拷贝到开发服务器上


开发服务器IP:192.168.31.232


cat id_rsa.pub
cat id_rsa.pub >> /root/.ssh/authorized_keys


640.jpg


并在Win10机器上验证免密登录是否OK


cmd命令行中验证


ssh root@192.168.31.232

640.jpg


4、VScode中SSH连接服务器


1)、点击远程资源管理器


SSH TARGETS 然后Enter SSH Connection Command输入框中输入 ssh


root@192.168.31.232


640.jpg


2)、选择SSH配置文件


可以选择默认的用户目录下.ssh/config作为默认VScode SSH连接的配置文件

640.jpg

3)、点击Connect


640.jpg

4)、选择目标服务器的操作系统平台:Linux

640.jpg


Tips:


当出现如下报错时可以更改为其它路径下配置文件作为VScode SSH连接的配置文件


640.jpg

640.jpg


例如D:\YuanFan.ssh\config


但实际的原因是因为主机名与用户一致导致的,参考如下链接


https://github.com/PowerShell/openssh-portable/pull/418


连接成功后,进行文件编辑


640.jpg640.jpg

也可以在资源管理器中选择服务器上文件直接编辑

640.jpg

场景2:VScode通过跳板机SSH远程到目标服务器


当然在家远程办公时或者其它有跳板机的情况下

以下图为例


640.png



192.168.31.105为跳板机,也是Linux服务器  


为了安全起见只将跳板机192.168.31.105映射到公网,例如映射成的地址为192.168.1.3(模拟为公网IP进行测试)  


这里为了演示方便,我直接用家用路由器模拟配置DMZ 192.168.31.105  

路由器WAN口192.168.1.3


640.jpg


在VScode SSH连接的配置文件中添加如下配置


Host JumperServer
  HostName 192.168.1.3
  User root
  Port 22
Host DevloperServer
  HostName 192.168.31.232
  User root
  ProxyCommand ssh.exe -W %h:%p JumperServer


640.jpg



为何这样配置,可以参考如下几个链接


[https://zhuanlan.zhihu.com/p/103578899]
[https://www.cnblogs.com/azureology/p/14620969.html]
[https://www.edwardzcn98yx.com/post/658f5f87.html]


并将公钥也拷贝到跳板机192.168.31.105服务器上


640.jpg

640.jpg

效果演示


640.jpg

640.jpg

640.jpg


以上就是VSode通过跳板机的方式SSH远程调试修改开发服务器上代码的步骤


3、延展待研究讨论


不过企业内网里部署了商业堡垒机,也就是图中Linux跳板机替换为商业堡垒机

640.png

640.png


这种VSCode先通过连接堡垒机再跳转到目标开发服务器的场景


目前暂未测试过,有兴趣的堡垒机厂商朋友可以研究一下

相关文章
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
242 2
|
18天前
|
监控 Ubuntu Linux
使用VSCode通过SSH远程登录阿里云Linux服务器异常崩溃
通过 VSCode 的 Remote - SSH 插件远程连接阿里云 Ubuntu 22 服务器时,会因高 CPU 使用率导致连接断开。经排查发现,VSCode 连接根目录 ".." 时会频繁调用"rg"(ripgrep)进行文件搜索,导致 CPU 负载过高。解决方法是将连接目录改为"root"(或其他具体的路径),避免不必要的文件检索,从而恢复正常连接。
|
25天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
252 4
|
23天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
52 1
|
1月前
|
网络安全 Docker 容器
VScode远程服务器之远程 远程容器 进行开发(五)
VScode远程服务器之远程 远程容器 进行开发(五)
36 1
|
1月前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
40 2
|
1月前
|
IDE 网络安全 开发工具
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
本文介绍了如何使用VS Code通过Remote-SSH插件连接远程服务器进行代码开发,并与PyCharm进行了对比。作者认为VS Code在连接和配置多个服务器时更为简单,推荐使用VS Code。文章详细说明了VS Code的安装、远程插件安装、SSH配置文件编写、服务器连接以及如何在连接后切换文件夹。此外,还提供了使用密钥进行免密登录的方法和解决权限问题的步骤。
494 0
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
90 2
|
1月前
|
IDE 网络安全 开发工具
IDE之pycharm:专业版本连接远程服务器代码,并配置远程python环境解释器(亲测OK)。
本文介绍了如何在PyCharm专业版中连接远程服务器并配置远程Python环境解释器,以便在服务器上运行代码。
331 0
IDE之pycharm:专业版本连接远程服务器代码,并配置远程python环境解释器(亲测OK)。
|
1月前
|
网络安全 数据安全/隐私保护 C++
VS Code 的SSH连接不成功问题分析与解决
VS Code 的SSH连接不成功问题分析与解决
下一篇
无影云桌面