阅读 5607

远程开发利器:VS Code Remote - SSH 远程开发实践

VS Code Remote 是微软推出的远程开发插件,支持多种方式,连接远程服务器目录进行开发

坐标深圳,因疫情影响,需要在家远程办公两周,以现在前后端分离的研发模式来说,远程的本地开发,对前端应该没有影响,但无奈,还有一些旧的项目基于 PHP 环境的开发方式。

一开始有两种方案可以解决

  • 方案一:使用 NFS 挂载到公司的开发目录
  • 方案二:以共享文件的方式访问公司的开发目录

两种方案差不多,通过 VS Code 访问共享的或者挂载的开发目录,但是这两种方式都会存在 Git 无法操作,文件搜寻功能无法使用的问题,所以才想试试 VS Code Remote

本文介绍的操作主要是 Mac (个人) 连接 Linux(公司服务器)

安装

首先,需要在我们的 VS Code 编辑器上安装扩展 Remote Development

这是一个扩展包,安装的同时会安装 Remote - WSLRemote - SSHRemote - Containers 三个插件,这三个插件的作用分别是:

  • Remote - SSH:SSH 连接虚拟/实体Linux主机
  • Remote - Containers:连接容器,简单理解就是可以连接 docker 容器
  • Remote - WSL: 适用于 Linux 的 Windows 子系统

大家也可以根据自己的需求,自行安装对应的插件

使用Remote - SSH 进行连接

安装完 Remote 插件后,会在 VS Code 编辑器的左下角出现一个连接远程窗口的区域

点击之后出来下拉选项,进行连接,我们选择

输入用户名和 host,确认连接!

这个需要服务器端进行配置和提供,我们公司技术运维团队,问他们要之🤩

这里碰到了两个坑:

第一个坑:提示远程主机的 glibclibstdc++ 不满足 VS Code Server 的条件,先看看提示信息截图

这个问题的原因是,VS Code Server 需要在 CentOS 7 及以上版本,而公司的远程主机是 CentOS 6 的,需要升级 glibclibstdc++ 才行,具体如何升级在这里就不展开,如有需要可以自行 Google

因为是公司的服务器,所以请运维大佬,基于 CentOS 7 的服务器,重新创建了一个 SSH,连接成功,这个坑填上了

第二个坑:下载 wget 失败

截了部分的图,为什么需要下载 wget 以及它的作用我就不知道了,如果有知道的可以告知一下

最后还是我们亲爱的技术老大东哥,找到了问题,主要原因是我们的网络出口在香港,下载资源在澳大利亚,速度只有 10kb/s,把网络出口更换到台湾后,速度就上来了😂。

查看网上,发现蛮多人也遇到,issue 地址,可以进行参考

以上填了两个坑后,才真正进入到远程开发的阶段 😄

开发

下图是完成连接的状态,已经连接到服务器的主机啦

点击打开文件夹,选择需要开发的文件目录即可

这里又遇到一个问题,远程主机的 git 仓库显示有 5K+ 的文件修改,但是对比没有发现任何更改,Google 之,原来是不同系统下的换行符不同导致的。

VS Code 官方也有介绍出现这种问题的解决方案, 建议使用添加 .gitattributes 文件进行配置,是比较好的方案,代码同步后就可以解决所有人的问题

总结

通过 VS Code Remote 方式,我们可直接连接服务器进行开发,同时也解决了使用 NFS 以及文件共享的方式导致的问题,即不能使用 git 和文件搜寻。

这次实践,客户端的问题不大,但是对于远端服务器的配置和响应的概念,对于一个前端工程师来说还是有一定困难的,很多远端的问题都是依赖运维童鞋们的协助,要不可能遇到第一个坑的时候就放弃了,所以我们可以有职业定位,但是不要有技术定位。

感谢东哥,洋洋的大力支持和帮助😘

文章分类
开发工具