前言
自从 Github 联手微软推出 vscode online 版后就备受关注,但是其有两个不可避免的缺点:
-
价格非常非常昂贵,需要购买 Amazon 的服务器,以及承受霸王条款。
-
由于最近的服务器也在新加坡,所以网速非常非常慢。
我们不得不另寻他路,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 开发。
-
服务端安装 node 环境
-
npm 安装 yarn (速度快)
npm install -g yarn
-
更换 yarn 为淘宝加速源
yarn config set registry https://registry.npm.taobao.org/
-
安装 vue 脚手架
yarn global add @vue/cli
-
创建 vue 项目
vue create vue3-demo
-
根据提示选择配置创建一个 vue 项目(这里和主题无关,就不详细介绍了)
-
将 vue 跑起来(我已经修改了
package.json
为 dev )yarn dev
-
配置端口转发:在左侧选择 remote 菜单,选择端口转发 8080 -> 本地 8080 ( vue 默认跑起来是 8080 ,别的端口同理),如果没有 8080 ,请按刷新键刷新一下:
-
访问本地
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 真的是太厉害了