1.前言

记得笔者小时候看电视,看到影视角色总是用一个老式的键盘,噼里啪啦的在电脑屏幕上输入一行行字符,那时候觉得能这么操作电脑真的好帅,从而立下了长大以后也要这样使用电脑的志向。

长大以后,笔者的愿望终于实现,整天坐在电脑面前敲代码抓BUG;而小时候印象深刻的黑色屏幕白色字符,也被VS code成功复刻……。不过有一说一,VS Code确实好用,其丰富多样的插件,能方便的进行多语言编辑,而且VS code还拥有免费的远程开发功能,这对于使用者来说真的很实用。话不多说,现在就以安装在Windows系统上的VS code,如何使用Cpolar内网穿透与VS code配合,实现在Ubuntu(Linux)系统上远程写代码吧。

2.VS code的安装和设置

VS code作为微软这样的大厂推出的软件,自然不会在下载安装上为难用户,只要在浏览器中输入VS code,就能找到很多关于VS code的下载链接,不过为了安全起见,我们还是在VS code的官网上下载(code.visualstudio.com)。

2.1 VS code的下载安装

打开VS code的官方网站,可以轻松找到适应各操作系统版本的VS code程序,我们只要按需下载即可。

20230314102201

下载完成后,双击.exe文件安装即可启动安装程序,接着一路“下一步”即可。

20230314102202

20230314102203

只要稍等一会儿,VS code就安装到本地电脑的开始菜单和桌面都生成软件快捷方式。

20230314102204

2.2 OpenSSH的启用

完成VS code的安装后,我们还需要在Windows系统电脑上启用OpenSSH,以提供.NET对象的支持。启用过程也很简单,只要在Windows的搜索界面,输入PowerShell。以管理员身份运行该命令行界面(如果不是管理员身份运行,可能导致修改设置不成功)

20230314102205

20230314102206

接着输入以下命令:

Add-WindowsCapability -Online -Name OpenSSH.Client~~~~0.0.1.0

如果这个Windows系统没有安装过OpneSSH,那么就会进行OpenSSH的安装程序

20230314102207

只要PowerShell显示如上内容,就说明OpenSSH安装成功。如果不知道是否安装了OpenSSH,那么可以输入命令:

Get-WindowsCapability -Online | ? Name -like 'OpenSSH*'

尝试启动OpenSSH,如果出现如下显示,就需要安装OpenSSH。

20230314102208

在OpenSSH安装完成后,再打开cmd输入命令ssh,只要显示如下内容,就说明OpenSSH启用成功。

20230314102209

2.3 为VS code配置ssh

在成功安装启动OpenSSH后,接着就可以对VS code进行ssh配置。在VS code软件主界面左侧的“扩展”页面中,输入“ssh”寻找相关插件,这里我们选择第一个Remote - SSH进行安装。

20230314102210

Remote – SSH插件安装完成后,点击VS code主界面左下方的齿轮图表按钮,进入设置(settings)页面。

20230314102211

在设置页面,点击扩展(Extensions)按钮,并在下拉列表中找到Remote - SSH选项,将Remote.SSH:Show login Terminal选项勾选上(该选项会在页面较下方的位置,因此要多下拉几个页面),再保存关闭即可。

20230314102212

2.4 局域网内测试VS code的ssh连接

在完成VS code的ssh设置后,我们有必要测试下ssh连接功能是否正常,正好笔者手边有一台安装了Ubuntu系统的设备,就用它来测试下吧。首先取得Ubuntu在局域网内的地址。

点击Ubuntu桌面右上角的小箭头,从下拉菜单中选择有线连接内的有线设置

20230314102213

在新开的设置窗口,点击有线选项右侧的齿轮(设置),就能在新窗口中看到Ubuntu系统在本地局域网的地址。

20230314102214

将这个地址记录下来,在回到VS code,点击VS code主界面左侧的远程按钮,进入远程连接设置页面。在这里,需要按照ssh Ubuntu用户名@局域网地址格式,将需要连接的地址输入页面上方的地址框内,再按回车输入。

20230314102215

在下拉列表中选择一个配置文件,就能将这个连接加入连接列表中

20230314102216

20230314102217

此时点击这个SSH,会出现ubuntu系统的连接密码,输入正确的密码后,就能连接进Ubuntu系统中进行操作。

20230314102218

20230314102219

虽然此时已经在局域网内,使用VS code连接上了ubuntu系统,但这明显不是我们的最终目标,我们的目标是在任何地方(公共互联网内)都能轻松连接到局域网的Ubuntu系统。这时我们就需要使用cpolar内网穿透,为Ubuntu生成一个公共互联网地址,让VS code能通过公共互联网准确找到。

2.5 Cpolar下载安装

为了能让局域网内的Ubuntu系统得到一个公共互联网地址,我们得在Ubuntu系统中安装一个内网穿透软件——cpolar,并使用cpolar为Ubuntu生成可供连接的公共互联网地址。

首先是在Ubuntu系统内安装cpolar,它支持一键自动安装脚本:

  • 安装cpolar
curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash

(注:如果是国外安装,可以输入短连接安装)

curl -sL https://git.io/cpolar | sudo bash

20230314102220

  • 查看版本号,正常显示即为安装成功
cpolar version
  • token认证

登录cpolar官网后台,点击左侧的验证,查看自己的认证token,之后将token贴在命令行里

cpolar authtoken xxxxxxx

20230314104744

  • 简单穿透测试,有正常生成相应的公网地址,按ctrl+c退出
cpolar http 8080
  • 向系统添加服务
sudo systemctl enable cpolar
  • 启动cpolar服务
sudo systemctl start cpolar
  • 查看服务状态,显示如下图所示为active则为已启动状态
sudo systemctl status cpolar

20230314104849

  • 登录 cpolar web UI管理界面

Cpolar在Ubuntu系统中安装完成后,就可以在Ubuntu的浏览器中,输入localhost:9200,打开cpolar的Web-UI界面。出于网络安全的考虑,cpolar为每个用户分配了单独通道,并且以口令码和不对称加密方式保障数据安全,因此在本地电脑上登录cpolar客户端需要先免费注册用户。

在cpolar客户端登录页面可以直接点开cpolar的官网,转入cpolar新用户注册页面。当然,也可以登录cpolar官网(https://www.cpolar.com/)进行新用户注册

20230314102221

20230314102222

最后,在Ubuntu系统上登录,就能进入cpolar客户端的主界面。

20230314102223

3.Cpolar端口设置

Cpolar安装完毕后,就可以进行进一步设置,为Ubuntu系统设置一个公共互联网地址,让VScode能够远程连入进行操作。由于笔者不想每天更新VScode的远程连接地址(免费版cpolar24小时内会重置一次免费连接地址,也就是临时连接),因此将cpolar升级至专业版套餐,获得了拥有固定TCP地址的权限,而要获取固定TCP地址,需要在cpolar云端和cpolar客户端两方面进行设置(临时连接只需要在cpolar客户端进行设置,免费用户可以参见Cpolar本地设置章节)。

3.1 Cpolar云端设置

在登录cpolar官网后,在cpolar主界面左侧,点击预留按钮,进入预留数据隧道设置页面,在这里,我们可以创建个人专属的空白数据隧道(TCP\HTTP\FTP等),而这条数据隧道与cpolar客户端连接起来,就能生成稳定的内网穿透数据隧道,只有知道这条数据隧道入口(即隧道的公共互联网地址)的人,才能连入客户端所指的硬件(或软件)。

20230314102224

由于我们需要远程登录的是Ubuntu系统,因此采用TCP方式连接,在预留页面找到保留的TCP地址栏位,并对这个栏位的信息进行简单设置。设置内容主要为两项:

  • 地区 – 只要在下拉菜单中,就近选择即可(就近选择降低延迟);
  • 描述 – 该栏可以看做数据隧道的备注,方便分辨即可;

20230314102225

这两项内容设置完成后,就可以点击栏位右侧的保留按钮,将这条数据隧道保存下来,并生成一个公共互联网地址(也就是内网穿透数据隧道的入口)。这里我们需要将刚刚保留成功的公网地址复制下来。

3.2 Cpolar本地设置

完成cpolar云端的设置后,我们回到Ubuntu系统的cpolar客户端,将云端的空白数据隧道与本地Ubuntu系统连接起来。
点击cpolar客户端左侧隧道管理项下的创建隧道按钮,就能进入本地数据隧道的设置页面。免费版cpolar想要创建数据隧道,也是这样操作。

同样的,我们在登录cpolar客户端后,也需要进行几项设置。这几项设置为:

  • 隧道名称——就是这条数据隧道的备注,用来区分不同隧道的用处;
  • 协议——就是这条数据隧道的传输协议,如网页、数据传输、设备互联等,这里选择TCP协议;
  • 本地地址——这里需要填入软件(或内网设备)的端口号,因此我们填入Ubuntu系统的固定输出端口号22;
  • 端口类型——也就是内网穿透数据隧道类型,在cpolar云端设置了保留隧道的,就可以选择“固定TCP端口”;若只是临时测试,就可以选择“随机临时TCP端口”(需要注意,固定TCP端口要将cpolar升级至专业版及以上);
  • 预留的TCP地址——在选择了“固定TCP端口”后就会出现该栏位,我们将cpolar云端生成的地址粘贴进来(若勾选的是“随机临时TCP端口”选项,则不会出现该栏位);

各项设置都填入后,点击下方的创建按钮,就能将云端空白数据隧道与本地Ubuntu连接起来,让VS code可以通过这条数据隧道穿透内网,对Ubuntu系统进行操作。

20230314102226

创建的数据隧道,可以在隧道管理项下的隧道列表页面进行操作,包括启动、暂停、关闭和删除隧道,或者对隧道进行重新编辑,修改已有信息等(新安装的用户会有两条预创建隧道,我们也可以在这里进行重新编辑和修改)。

20230314102227

而这条数据隧道的入口(公共互联网地址),可以在状态项下的在线隧道列表中找到。

20230314102228

4.公网访问测试

获得Ubuntu系统在公共互联网上的地址后,接下来的操作就很简单了,我们在位于公共互联网的电脑上打开VS code,新建一个远程SSH连接。连接的格式与设置局域网连接相同,都是ssh ubuntu的用户名@地址,这里我们只要将地址位置填入cpolar创建的Ubuntu公共互联网地址即可。

需要注意的是,在ssh ubuntu的用户名@地址格式中,我们需要去掉公共互联网地址的tcp://;以及地址后端端口号前的,并将其更换为空格-p空格。在这里,新建SSH连接的内容就成为:

ssh cpolar@5.tcp.vip.cpolar.cn -p 11200

20230314102229

新建这条数据隧道后,再点击连接,就能轻松从公共互联网上的VS code,连接到局域网的Ubuntu系统,实现远程操作的目的。

20230314102230

5.结语

当然,这样的远程连接并不只限于Ubuntu系统,还可以用在其他Linux系统上(比如centOS之类),大大节省了我们的精力。

也许,当我们在某通过cpolar+VScode配合远程敲代码时,也会有个小朋友带着惊叹和羡慕的眼神注视着我们,默默立下了以后也要这么帅的操作电脑的希望呢

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐