使用vscode实现远程开发,并通过内网穿透在公网环境下远程连接

文章目录

  • 前言
  • 1、安装OpenSSH
  • 2、vscode配置ssh
  • 3. 局域网测试连接远程服务器
  • 4. 公网远程连接
    • 4.1 ubuntu安装cpolar内网穿透
    • 4.2 创建隧道映射
    • 4.3 测试公网远程连接
  • 5. 配置固定TCP端口地址
    • 5.1 保留一个固定TCP端口地址
    • 5.2 配置固定TCP端口地址
    • 5.3 测试固定公网地址远程

前言

远程连接服务器的工具有很多,比如XShell、putty等,可以通过ssh来远程连接服务器,但这用于写代码并不方便,可能需要现在本地写好代码后再将源代码传送到服务器运行、服务器上的图片也无法直接查看。

而vscode可以很好的解决这些问题,它的核心组件都运行在远程环境中,本地的开发机器完全不需要拥有远程开发环境的源代码,在vscode上编写代码可以直接同步更新到服务器上,给你带来丝滑般的远程开发体验。

所以这篇文章教程,我们将通过vscode实现远程开发,并通过cpolar内网穿透实现在公网环境下的远程连接,让你在出门在外任意地方也可以远程连接服务器进行开发写代码。

1、安装OpenSSH

打开Windows开始页面,直接进行搜索PowerShell,打开第一个Windows PowerShell,点击以管理员身份运行

在这里插入图片描述

打开之后,输入以下指令:

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

此时出现的结果就是电脑里没有安装OpenSSH的情况:
在这里插入图片描述

如果已经安装了OpenSSH那么跳过这一步,没有安装的话则输入以下指令

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

在这里插入图片描述

最终结果为如下,则代表着OpenSSH安装成功:

在这里插入图片描述

显示OpenSSH安装成功后,在打开本地cmd进入之后输入命令ssh

ssh

如果显示的是这样结果的话,则说明正确:

在这里插入图片描述

2、vscode配置ssh

在windows上安装vscode,安装成功后并打开。

点击左侧工具栏中的扩展,搜索“ssh”,选择第一个Remote - SSH进行安装(我已经安装过了,所有此时显示的是禁用状态)

在这里插入图片描述

点击左下角的“设置”按钮,紧接着点击“设置”

在这里插入图片描述

根据截图的提示,找到Show Login Terminal并勾选该选项

在这里插入图片描述

点击左侧工具栏中的远程按钮,可以查看远程连接,点击SSH TARGETS下面显示的服务器旁边的按钮进行连接操作

在这里插入图片描述

3. 局域网测试连接远程服务器

以ssh连接ubuntu为例,打开vscode后,先尝试使用局域网地址ssh远程ubuntu

输入命令到对话框中,并回车

ssh  username@ip

在这里插入图片描述

选择一个配置文件

在这里插入图片描述

输入完成在右侧会显示出来刚刚添加的ssh 连接,点击 -->图标 连接,出现输入密码,输入密码即可

在这里插入图片描述

出现绿色标志表示连接成功

在这里插入图片描述

4. 公网远程连接

目前我们只能在局域网内进行远程,具有一定的局限性。不过我们通过内网穿透来实现在公网环境下的远程连接。这里我们借助工具cpolar内网穿透来实现,无需公网IP,也不用设置路由器,操作简单。

cpolar官网:https://www.cpolar.com/

4.1 ubuntu安装cpolar内网穿透

本次教程我们使用的是ubuntu 图形化系统,我们需要先在ubuntu上安装配置cpolar内网穿透,支持一键自动安装脚本。

  • 国内安装
curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash
  • 或 cpolar短链接安装方式:(国外使用)
curl -sL https://git.io/cpolar | sudo bash
  • 查看版本号,正常显示即为安装成功
cpolar version
  • token认证

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

cpolar authtoken xxxxxxx

在这里插入图片描述

  • 简单穿透测试
cpolar http 8080

有正常生成相应的公网地址,按ctrl+c退出

  • 向系统添加服务
sudo systemctl enable cpolar
  • 启动cpolar服务
sudo systemctl start cpolar
  • 查看服务状态,显示如下图所示为active则为已启动状态
sudo systemctl status cpolar

在这里插入图片描述

cpolar安装并配置完成后,在浏览器上访问本地9200端口,使用cpolar邮箱账号登录cpolar web UI管理界面

在这里插入图片描述

cpolar安装成功后,默认会安装2条样例隧道,可以自行编辑或者删减:

  • ssh隧道:指向本地22端口,TCP协议
  • website隧道:指向本地8080端口,HTTP协议

4.2 创建隧道映射

我们可以直接使用样例隧道ssh,或者重新创建一个隧道,使用tcp协议,指向22端口。点击左侧仪表盘的隧道管理——创建隧道

  • 隧道名称:可自定义,注意不要重复
  • 协议:tcp
  • 本地地址:22
  • 端口类型:随机临时TCP端口
  • 地区:China vip

点击创建
在这里插入图片描述

隧道创建成功后,点击左侧的状态——在线隧道列表,可以看到,刚刚创建的隧道已经有生成了相应的公网地址,将其复制下来

在这里插入图片描述

4.3 测试公网远程连接

在windows上打开vscode,使用所复制的公网地址来远程SSH。

点击SSH TARGETS下面显示的服务器旁边的按钮进行连接操作
在这里插入图片描述

如左侧没有出现添加的连接,点如下按钮刷新

在这里插入图片描述

接着点击小箭头 --> 连接,出现选择ssh 类型,选择linux

在这里插入图片描述

在这里插入图片描述

输入参数,和密码即可远程成功,方便快捷。

在这里插入图片描述

在这里插入图片描述

出现以下信息表示远程连接成功

在这里插入图片描述

5. 配置固定TCP端口地址

由于以上所创建的隧道选择的是随机临时TCP端口,所生成的公网地址会在24小时内随机变化,对于需要长期远程的用户来讲不方便。不过我们可以为其配置固定的地址进行远程连接,后续远程无需先查看随机公网地址再进行远程。

注意:配置固定TCP端口地址功能需要升级至专业版套餐或以上才支持。

5.1 保留一个固定TCP端口地址

打开cpolar官网,登录到官网后台https://dashboard.cpolar.com/reserved,点击左侧的预留,我们来保留一个固定TCP端口地址:

  • 地区:选择china
  • 描述:即备注,可自定义

地址保留成功后,系统会生成相应的固定公网地址,将其复制下来

在这里插入图片描述

5.2 配置固定TCP端口地址

在ubuntu系统上打开浏览器访问本地9200端口,登录cpolar web UI管理界面。点击左侧的隧道管理——隧道列表,找到ssh隧道,点击右侧的编辑,我们来修改隧道信息,将固定tcp端口地址配置到隧道中

在这里插入图片描述

修改隧道信息,将保留成功的固定tcp地址配置到隧道中

  • 端口类型:修改为固定tcp端口
  • 预留的tcp地址:填写保留成功的地址

点击更新

在这里插入图片描述

隧道更新成功后,点击左侧仪表盘的状态——在线隧道列表,找到SSH隧道,可以看到公网地址已经更新成为了固定tcp地址。

在这里插入图片描述

5.3 测试固定公网地址远程

打开vscode,选择添加一个ssh连接

在这里插入图片描述

使用保留的tcp地址连接

在这里插入图片描述

在这里插入图片描述

刷新一下

在这里插入图片描述

刷新出来地址,点击右边小箭头”–>”连接,出现以下提示,输入yes

在这里插入图片描述

出现绿色信息,表示连接成功。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/116235.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

什么是Webpack的loader和plugin?它们的作用是什么?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

vue2和vue3区别

Vue2 和 Vue3 双向绑定方法不同 总结 vue3中没有$set Vue2 和 Vue3 双向绑定方法不同 Vue2 : Object.defineProperty() Vue3 : new Proxy()vue3 实例 数据会更新 const addBtn () >{obj.c 3; } vue2实例 问题:数据更新了视图没更新 Object.defineProperty…

VR全景在医院的应用:缓和医患矛盾、提升医院形象

医患关系一直以来都是较为激烈的,包括制度的不完善、医疗资源紧张等问题也时有存在,为了缓解医患矛盾,不仅要提升患者以及家属对于医院的认知,还需要完善医疗制度,提高医疗资源的配置效率,提高服务质量。 因…

turn.js 模版简单使用

turn.js 不修改添加原功能仅 替换、修改图片格式使用模版 HTML文件 turn.js官网:http://www.turnjs.com/# 第一步 1.点击链接去到官网 2.点击下载按钮 下载左侧示例压缩包 3.解压完成拿到示例文件 turnjs4 4.在samples目录下案例中查看意向使用的模版样式 …

视频会议系统方案报价

视频会议系统 报价方案是咨询视频会议系统价格用户所关注的,但是报价是一个比较细致的工作,需要从多维度进行对比。 1. 视频会议终端设备费用:根据所需设备的数量和所选设备价格确定。视频会议终端类型各异,摄像头、麦克风、显示设…

UWB 技术在机器人和移动领域的应用题】

多年来,机器人生态系统不断增长,不同的应用程序也在不断增长。如今,机器人出现在许多不同的领域,例如私人家庭、商业场所、仓库和医疗场所。他们要么自主工作,要么与我们并肩工作,帮助我们完成任务。 根据…

S5PV210(十):LCD

本文主要探讨210的LCD相关知识。 LCD LCD称液晶(透光背光呈色),可在电信号驱动下使液晶分子旋转,呈现不同的颜色(被动发光) lcd接口为TTL接口(5V为1,0V为0),不能传输太远,远距离传输方式:SoC(TTL) ->VGA-> LCD(TTL) 其他显设备:CRT(…

【错误解决方案】TypeError: gca() got an unexpected keyword argument ‘projection‘

1. 错误提示 在 python程序中,使用Matplotlib库中的 gca() 函数出现错误,提示“TypeError: gca() got an unexpected keyword argument projection”。 2. 解决方案 这个错误的原因是 gca() 函数并不接受 projection 这个关键字参数。 gca() 函数是用来…

js调整table表格上下相邻元素顺序

有时候我们会遇到要通过箭头控制table表格上下顺序的需求,如下: 点击向下就将该元素下移一位,下面的一位元素就移上来,点击向上就将该元素上移一位,上面的一位元素就移下来,也就是相邻元素互换位置顺序: <el-table :data="targetTable" border style=&quo…

【深度学习 AIGC】stable diffusion webUI 使用过程,参数设置,教程,使用方法

文章目录 docker快速启动vae.ckpt或者.safetensorsCFG指数/CFG Scale面部修复/Restore facesRefinerTiled VAEClip Skipprompt提示词怎么写 docker快速启动 如果你想使用docker快速启动这个项目&#xff0c;你可以按下面这么操作&#xff08;显卡支持CUDA11.8&#xff09;。如…

windows和docker环境下springboot整合gdal3.x

链接: gdal官网地址 gdal gdal的一个用c语言编写的库&#xff0c;用于处理地理信息相关的数据包括转换&#xff0c;识别数据&#xff0c;格式化数据以及解析 同时提供第三方语言的SDK包括python&#xff0c;java上述需要编译后使用 java是需要使用jni接口调用实现方法在wind…

数码3C零售门店运营,智慧显示有何优势?以清远电信为例。

随着时代和科技的发展&#xff0c;线下实体零售门店运营方式也逐步进化&#xff0c;面对有大体量线门店&#xff0c;需要花费更多心思和资源管理的品牌&#xff0c;在全球经济缓慢增长的当下&#xff0c;开始走向去冗余、提效率的阶段&#xff0c;俗称降本增效。 在此阶段&…

网络协议的基本概念

网络协议的基本概念 随处可见的协议 在计算机网络与信息通信领域里&#xff0c;人们经常提及“协议”一词。互联网中常用的具有代表性的协议有IP、TCP、HTTP等。 “计算机网络体系结构”将这些网络协议进行了系统归纳。TCP/IP就是IP、TCP、HTTP等协议的集合。现在&#xff0…

centos9 stream 下 rabbitmq高可用集群搭建及使用

RabbitMQ是一种常用的消息队列系统&#xff0c;可以快速搭建一个高可用的集群环境&#xff0c;以提高系统的弹性和可靠性。下面是搭建RabbitMQ集群的步骤&#xff1a; 基于centos9 stream系统 1. 安装Erlang和RabbitMQ 首先需要在所有节点上安装Erlang和RabbitMQ。建议使用官…

thinkphp的路径参数(RESTFul风格),把参数写在路径里

thinkphp官方文档 https://www.kancloud.cn/manual/thinkphp5_1/353969 有一个Blog控制器&#xff0c;里面的read方法是固定的&#xff0c;不能该 route.php里添加如下代码&#xff0c;访问 blog对应的就是 android/blog Route::resource(blog,android/blog);然后访问路径

IS200EPSMG1AED 使用Lua创建逻辑脚本或完整程序

IS200EPSMG1AED 使用Lua创建逻辑脚本或完整程序 IS200EPSMG1AED 是一种支持网络的I/O控制器&#xff0c;它执行类似于可编程逻辑控制器(PLC)的控制、逻辑和监控功能。然而&#xff0c;与PLC不同&#xff0c;X-600M是为基于网络的应用而设计的。X-600M可以使用内置网络服务器和…

【MongoDB】Windows 安装MongoDB 6.0

一、下载安装包 安装包下载地址https://www.mongodb.com/try/download/community这里我选择的是 二、解压并安装 1、解压 这里我将压缩包解压到了D盘&#xff0c;并重命名成了mongodb&#xff0c;解压后的目录如下&#xff1a; 2、创建配置文件 在D:\mongodb下新建conf目录…

【C语言】备战校赛Day3

日期:11.3 星期五 L1-007 念数字 题目描述 输入一个整数&#xff0c;输出每个数字对应的拼音。当整数为负数时&#xff0c;先输出fu字。十个数字对应的拼音如下&#xff1a; 0: ling 1: yi 2: er 3: san 4: si 5: wu 6: liu 7: qi 8: ba 9: jiu 输入描述 输入在一行中给出一个…

Flutter GetX的使用

比较强大的状态管理框架 引入库&#xff1a; dependencies:get: ^4.6.6一.实现一个简单的demo 实现一个计数器功能 代码如下&#xff1a; import package:flutter/material.dart; import package:get/get.dart;void main() > runApp(const GetMaterialApp(home: Home()…