本文针对环境为本地机器:MacOS,长途环境 Windows 10。
什么是 VSCode Remote – SSH
VSCode remote 为 VSCode 供给的长途开发的功用,通过各种技能计划能够直接在本地机器中对长途代码进行开发,便利各种安全开发、统一环境等场景。
SSH remote 为 VSCode remote 中供给的运用 SSH 协议来完结长途开发的计划,类似于 SSH 登陆到长途主机进行开发,不过 VSCode 内部进行了封装和优化。
本机环境装备
因为本地运用 MacOS,无需特别制造装置,开箱即用,不过记得提早装置 developer tools。
假如运用的对错 MacOS,可参阅 文档 装置 SSH 客户端。
长途环境装备
因为长途运用的 win10,所以需求装置 OpenSSH。
首要确认 OpenSSH 的装置状况:
Get-WindowsCapability -Online | Where-Object Name -like 'OpenSSH*'
假如没有装置可依照需求挑选装置客户端和服务端:
# Install the OpenSSH Client
Add-WindowsCapability -Online -Name OpenSSH.Client~~~~0.0.1.0
# Install the OpenSSH Server
Add-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0
然后发动 sshd 服务:
Start-Service sshd
将 sshd 添加到主动发动:
Set-Service -Name sshd -StartupType 'Automatic'
为了保证安全需求保证防火墙规矩装备:
if (!(Get-NetFirewallRule -Name "OpenSSH-Server-In-TCP" -ErrorAction SilentlyContinue | Select-Object Name, Enabled)) {
Write-Output "Firewall Rule 'OpenSSH-Server-In-TCP' does not exist, creating it..."
New-NetFirewallRule -Name 'OpenSSH-Server-In-TCP' -DisplayName 'OpenSSH Server (sshd)' -Enabled True -Direction Inbound -Protocol TCP -Action Allow -LocalPort 22
} else {
Write-Output "Firewall rule 'OpenSSH-Server-In-TCP' has been created and exists."
}
可能的错误和处理
装备
在本地 VSCode 中装置 Remote Development extension pack
或者 Remote - SSH
插件,即可开始运用 Remote SSH 进行开发。Remote Development extension pack
包括 Remote - SSH
等三个包。
装置后能够看到 VSCode 界面多出两个按钮,一个是左下角的 Remote 状况按钮:
一个是左边按钮栏的 Remote Explorer:
点击 Remote 按钮,能够进入 Remote 菜单,也可运用 Show Remote Menu
进入:
衔接
新衔接
创立新衔接有多个手段,假如是新的 SSH 衔接,咱们能够通过 Connect To Host,然后 Add New SSH Host 依照提示输入 SSH 衔接指令,一般而言直接输入 username@host 即可,username 为长途机器的用户名,host 没有特别装备一般则为长途机器的 IP,windows 中的 IP 可通过 cmd 运用 ipconfig 指令查看。回车后需求假如衔接成功将会提示输入密码,输入 windows 账号对应的密码即可。
需求留意首要需求保证长途机器能够正常运用 SSH 进行衔接,假如长途机器 IP 无法直接拜访,比方在公司内网,则可能需求连入公司 VPN 后再进行衔接。运用前可直接运用 ssh username@host 指令尝试衔接。
此外,还能够通过将 SSH 指令添加到 ssh config 文件中来便利衔接,假如运用上面的 Add New SSH Host,VSCode 会主动将装备添加到 ssh config 文件中,咱们也能够主动更改文件,一般 MacOS 中直接修正 ~/.ssh/config 文件即可,运用 Remote Menu 中的 Open SSH Configure File 也能够直接运用 VSCode 翻开对应的装备文件。一般一条 SSH 装备包括以下内容:
Host SSH-name # 称号标识
HostName 1.1.1.1 # host name,一般为 IP
User hello # user name
如用到其它自定义参数,如 ControlPersist、ControlPath 等,可自行按需装备。
二次衔接
依照上述添加成功后,以后衔接则可直接在 Remote Menu 中挑选对应的衔接,或者在 Remote Explorer 中直接挑选对应的装备进行衔接。
衔接后
假如衔接时未挑选开发对应的文件夹,点击左边的 Open Folder 后 VSCode 将会提示你挑选需求开发的文件夹:
且此处的 Clone Repository 也是将仓库 Clone 到长途机器上。
衔接后左下角的 Remote 按钮将会展示当时 Remote 衔接的方法和称号,且 Remote Menu 菜单中将会多出 Setting 等几个菜单。
运用
开发时一般情况下就能够直接当做本地开发,不过需求知道,除了 VSCode 是咱们本地机器上的,其它的如代码、shell 等全部都是在长途机器上,所以一定要搞清楚环境是在长途而不是在本地。
开发时体验根本与本地开发无异,但是在长途机器较为卡顿是仍是会发现无论是创立文件、terminal 中输入指令等都会存在一定的延迟。VSCode 也对这些做了一定的优化,比方在 terminal 中会用灰色来提示当时输入还在传输中:
或者是文件操作是 Explorer 会展示 loading 提示操作中:
端口映射
此外还有一个长途开发经常见的问题,服务拜访。如咱们在进行开发时,本地需求起 server 来预览,但是因为 shell、环境、代码等都是远端的,所以 http 服务也是远端机器供给,此时要拜访远端机器供给的服务,则需求端口转发。VSCode Remote 自带了端口转发的功用:
能够看到 VSCode remote 在下方多了一个 Port Forward 状况栏按钮,且面板区域多了一个 PORTS 面板,点开后能够装备端口的映射。
以 create-react-app 为例,create-react-app 默认端口为 3000,咱们能够添加一个 3000 到 3000 的端口映射,则咱们在拜访本地的 localhost:3000 时, VSCode 会将恳求转发到远端机器的 3000 端口上,以此完结本地机器直接拜访长途服务的意图。且 VSCode 会主动监听端口的服务拜访,比方 create-react-app 发动后 VSCode 会主动添加一个 3000 到 3000 的映射。
此外假如想要修正映射联系可在映射项目右键,可修正对应的本地和长途端口,以及拜访协议。比方需求需求让 create-react-app 应用以 https 协议运行,咱们能够运用 HTTPS=true npm start
发动项目,然后将端口映射的协议修正为 https,即可在本地的 https://localhost:3000
中拜访到。
总结
总的来说,VSCode Remote 的 SSH 装备简单,运用便利,在一些场景下能够发挥巨大作用。比方:
- 紧迫情况下直接调试开发长途机器中的代码
- 长途机器存在特别环境
- 代码因为安全问题无法直接拜访
此外 VSCode Remote 还供给了其它多种 Remote 衔接的方法,以用于不同的场景,只能说一句:真香。
参阅资料
- code.visualstudio.com/docs/remote…
- learn.microsoft.com/en-us/windo…
本文正在参加「金石计划」