五分钟搞定 VS Code 远程开发

丑话)得说在前面

稍等稍等,要是5分钟没搞定也别骂我,老严不是标题党

如果顺利的话,5分钟可能都不要(顺利的话!!!)

介绍

e717bdb53fd1dc842f569a591a135fb7.jpeg

2019 年 5 月 3 日,在 PyCon 2019 大会上,微软发布了 VS Code Remote,开启了远程开发的新时代!这次发布包含了三款核心的全新插件,它们可以帮助开发者在容器,物理或虚拟机,以及 Windows Subsystem for Linux (WSL) 中实现无缝的远程开发。通过安装 Remote Development Extension Pack ,你可以快速上手远程开发。Remote Development extension pack 包括三个扩展:

Remote - SSH

  • 通过使用 SSH 打开远程计算机或者VM上的文件夹,来连接到任何位置。

Remote - Containers

  • 把 Docker 作为你的开发容器。

Remote - WSL

  • 在 Windows Subsystem for Linux 中,获得 Linux 般的开发体验。

而我们今天要讲的是 Remote - SSH

Visual Studio Code Remote - SSH扩展

可直接使用本地的 VS Code 来连接服务器(Server)上的开发环境,而本地只是一个前端的展示界面,任何代码的运行都是直接在服务器上进行操作的

54f2508d621c60cdd7d41c6bc8436237.png

可以说成是直接远程操作一台电脑。

优点

直接通过 ssh 连接服务器开发有什么好处?

官方回答

  • 在比本地机器更大、更快或更专业的硬件上进行开发。

  • 在不同的远程开发环境之间快速切换,安全地进行更新,而不必担心影响本地计算机。

  • 调试在其他位置运行的应用程序,例如客户网站或云端。

个人认为

  1. 减少自己电脑的性能损耗。

  2. 自由选择操作系统。

  3. 好玩。

准备事项

  1. 服务器(我的是轻量级丐版1核1G)

d977ba65eb55178852c4f4ca7d6f384b.png
  1. VS Code

01c91c019a0df225e4d2cf11822dd92c.png
  1. ssh 访问端口

281b27954719b742d12db42251489729.png

开搞开搞

浅测一下

本地先尝试通过 ssh 链接服务器。默认端口是 22 如有特殊自行修改

ssh <服务器登录名>@<公网ip>

输入服务器登录密码

xxx@xxxx's password:*************

连接成功

Tips

如果遇到端口未开放的情况

ssh: connect to host xx.xx.xx.xx port 22: Connection refused

可以看下 ssh 的配置是否正确

sudo vim /etc/ssh/sshd_config

安装 Remote - SSH

可以在 VS Code 里面搜索一下

3ee016131fbe600b7fb21487580f156f.png或者直接打开此处 Remote - SSH

开始连接

添加一个 ssh 连接3c80f6217dbdf211bb5d7b8833b16b40.png

配置
681f4548ceb7fbdc7cdd0a222fa7727f.png

config 文件

这是我的

feb66a6e78a2cb1ca21b5233c7b55414.png

写一个就够了

Host <ip>
  HostName <ip or name>
  User <username>
  ForwardAgent yes

修改完成之后

点击这个红框里的内容7ee634ef878d29e69760758bb7fe7700.png

Connect to Host5fda16ac3f015763d036f6f66715f1d3.png

f680c905e9ead1cfeaf29e2a05354e27.png

此时会打开一个VS Code新窗口,不要慌。

输入密码

输入你的服务器连接密码b5cf80965b5564f68fdf5bcc1be4d1d8.png

此时连接已经成功3a431d6c1a9652f04065672233cdab28.png

选择一个文件夹fc65ce9dc3598f2322694867c9df439e.png

初步完成

到这里我们的连接,已经完成了,可以直接进行一些简单开发。因为你的服务器开发环境还没有配置好 你或许需要

  • Node

  • Git

  • Vue

  • MySQL

  • ...

这些东西安装完成之后,基本上就够开发了

浅测一下端口转发

我通过 Vue-Cli 创建了一个 demo

014f4e5775c1079792d8720d95554650.png

此时你可以直接在本地打开 http://localhost:8080/

f8f26a8187fd94512682a46f4ed4a0a1.png

OK 看来已经完成了

最后

直接通过远程连接来修改网站。真的很方便。

这个算不算简单?

嗯~~~ 怎么不算呢?

未经授权谢绝转载。谢谢~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值