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

本文涉及的产品
运维安全中心(堡垒机),企业双擎版 50资产 7天
运维安全中心(堡垒机),免费版 6个月
简介: 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先通过连接堡垒机再跳转到目标开发服务器的场景


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

相关文章
|
2月前
|
自然语言处理 API C++
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
SmartVscode插件深度解析:自然语言控制VS Code的革命性工具及其开源框架App-Controller
|
2月前
|
人工智能 C++ iOS开发
ollama + qwen2.5-coder + VS Code + Continue 实现本地AI 辅助写代码
本文介绍在Apple M4 MacOS环境下搭建Ollama和qwen2.5-coder模型的过程。首先通过官网或Brew安装Ollama,然后下载qwen2.5-coder模型,可通过终端命令`ollama run qwen2.5-coder`启动模型进行测试。最后,在VS Code中安装Continue插件,并配置qwen2.5-coder模型用于代码开发辅助。
5888 6
|
1天前
|
监控 前端开发 应用服务中间件
小游戏源码开发搭建技术栈和服务器配置流程
近些年不同场景游戏层出不穷,现就小游戏开发技术应用及功能详细剖析!
|
5天前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
39 10
|
1月前
|
存储 人工智能 自然语言处理
ChatMCP:基于 MCP 协议开发的 AI 聊天客户端,支持多语言和自动化安装 MCP 服务器
ChatMCP 是一款基于模型上下文协议(MCP)的 AI 聊天客户端,支持多语言和自动化安装。它能够与多种大型语言模型(LLM)如 OpenAI、Claude 和 OLLama 等进行交互,具备自动化安装 MCP 服务器、SSE 传输支持、自动选择服务器、聊天记录管理等功能。
207 15
ChatMCP:基于 MCP 协议开发的 AI 聊天客户端,支持多语言和自动化安装 MCP 服务器
|
2月前
|
安全 开发工具 Swift
Swift 是苹果公司开发的现代编程语言,具备高效、安全、简洁的特点,支持类型推断、闭包、泛型等特性,广泛应用于苹果各平台及服务器端开发
Swift 是苹果公司开发的现代编程语言,具备高效、安全、简洁的特点,支持类型推断、闭包、泛型等特性,广泛应用于苹果各平台及服务器端开发。基础语法涵盖变量、常量、数据类型、运算符、控制流等,高级特性包括函数、闭包、类、结构体、协议和泛型。
53 2
|
2月前
|
开发工具 C++ git
利用VS Code提升开发效率的五大插件推荐
本文推荐了五款能显著提升开发效率的VS Code插件:ESLint用于代码质量和风格检查;Prettier自动格式化代码;GitLens增强Git功能;Live Server提供前端实时预览;Docker支持容器管理。
|
2月前
|
监控 Ubuntu Linux
使用VSCode通过SSH远程登录阿里云Linux服务器异常崩溃
通过 VSCode 的 Remote - SSH 插件远程连接阿里云 Ubuntu 22 服务器时,会因高 CPU 使用率导致连接断开。经排查发现,VSCode 连接根目录 ".." 时会频繁调用"rg"(ripgrep)进行文件搜索,导致 CPU 负载过高。解决方法是将连接目录改为"root"(或其他具体的路径),避免不必要的文件检索,从而恢复正常连接。
|
2月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
674 4
|
2月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
362 1