vscode+remote ssh实现云服务器真正随时随地远程开发（好用不卡效率高）

前言

自从 Github 联手微软推出 vscode online 版后就备受关注，但是其有两个不可避免的缺点：

1. 价格非常非常昂贵，需要购买 Amazon 的服务器，以及承受霸王条款。

2. 由于最近的服务器也在新加坡，所以网速非常非常慢。

我们不得不另寻他路，vscode 自 1.35 版推出了 remote ssh 彻底改变了这一切，让我们随时随地云开发变得轻而易举！

准备

先准备一台境内的服务器，linux 系统（推荐 Ubuntu 占用内存小）。

我这里准备了一台非常简陋的 ECS ，1 核 2 G。

配置

安装 remote ssh

先在插件市场本地安装 remote ssh 插件。

配置 ssh 私钥

一般我们开发都是直接登录秒开发，输入 ssh 密码什么的太繁琐，所以我们先配 rsa ，本地命令行 cmd 执行：

	ssh-keygen -t rsa

会提示让你设置密码，无需在意，一路回车，生成 rsa 秘钥。

之后按照命令行提示生成私钥的目录去找 id_rsa.pub 该文件，我是在自己 user 文件夹的 .ssh 目录下：

将该文件上传至服务器的 root/.ssh/ 目录下，在该目录下执行：

	# 将该文件内容追加到 authorized_keys 文件后
	cat id_rsa.pub >> ~/.ssh/authorized_keys

到此为止就配置好了免密登陆了。

连接配置

本地 vscode 左侧菜单选择 remote 菜单：

点击设置按钮，创建一个配置文件：

写入以下内容：

Host 自定义名字
    HostName 服务器IP
    Port 端口号
    User SSH用户名
    IdentityFile 本地rsa的位置

例：

Host aliyun
    HostName 192.168.1.1
    Port 22
    User root
    IdentityFile C:/Users/User/.ssh/id_rsa

使用

连接服务器

写好配置文件就可以连接服务器了，在左边列表已经出现我们刚刚填写的服务器名字了，右键连接当前服务器：

这里选第一个选第二个都可以，注意如果选了第一个，当前工作区会被清空，如果需要留的话请保存一份。

几秒后顺利连接服务器！（ aliyun 直接异常连接报警了 -_-|| ）

此时 vscode 会在服务器安装一套基于 node 的 vscode server 端，全自动安装，静静等待几分钟即可（我这里用了一分钟）。

注：在启用 vscode server 时，会有 node 跑在后台占用相对较高的 cpu 资源，请注意不要乱 kill 了。

体验 python 开发

选择一个你要作为开发目录的文件夹，之后会加载该文件夹下的文件目录显示在你的工作区。

注意要运行 python 需要服务器装有 python 环境。

建立一个 test.py ：

import os

print('test', os.getcwd())

打开命令行，跑一下：

注意此时是没有代码提示的，想要有提示，需要安装服务端插件。

安装服务端插件

插件有两套，一套在本地（之前你使用的），一套在服务端，可以在本地给服务端安装插件，以获得和本地一致的体验。

我们给服务器安装一个 Python 插件：

体验 vue 开发

真正强大的地方来了，我们可以实时在服务端实现 vue 开发。

1. 服务端安装 node 环境

2. npm 安装 yarn （速度快）

   	npm install -g yarn
   

3. 更换 yarn 为淘宝加速源

   	yarn config set registry https://registry.npm.taobao.org/
   

4. 安装 vue 脚手架

   	yarn global add @vue/cli
   

5. 创建 vue 项目

   	vue create vue3-demo
   

6. 根据提示选择配置创建一个 vue 项目（这里和主题无关，就不详细介绍了）

7. 将 vue 跑起来（我已经修改了 package.json 为 dev ）

   	yarn dev
   

8. 配置端口转发：在左侧选择 remote 菜单，选择端口转发 8080 -> 本地 8080 （ vue 默认跑起来是 8080 ，别的端口同理），如果没有 8080 ，请按刷新键刷新一下：
   

9. 访问本地 http://localhost:8080/ 静待一会连接上即可实现真正的 HMR 热开发！

效果

注：在实测过程中，要将 host 改为 127.0.0.1 ，否则在 vue3 中默认启用封闭 localhost 模式，没有热更新效果。

// vue.config.js
module.exports = {
    devServer: {
        host: '127.0.0.1',
        port: 8080
    }
}

总结

正常使用 hmr 开发情况下，服务器 cpu 占用在 60% 作用，需要下载依赖时会跑满，即使是低配 ECS 也可以很好的支撑我们的远程开发。

端口转发非常安全，不需要对实时使用的端口开通防火墙，可谓是非常方便了。

vscode 真的是太厉害了