如何使用浏览器进行远程开发

简介

现在比较主流的远程开发方式，是把代码放在远程服务器，然后在本地的 vscode 通过 SSH 登录到该服务器进行开发。

但是对于无法安装 vscode 的设备（如 iPad）则无法这样做。

为了解决这个问题，可以把 vscode 也安装到远程服务器，并提供可以访问该 vscode 的 web 服务接口，那么在任意设备均可以通过浏览器实现远程开发了。

code-server 就是可以安装在远程服务器并提供 web 服务的 vscode。

参考文档《为 iPad 部署基于 VS Code 的远程开发环境》

镜像仓库

为方便起见，这里已经把相关镜像组件都封装到 Github 仓库 vscode-web-docker。

项目构建

• 宿主机安装 docker、docker-compose
• 宿主机安全组/防火墙（iptables/firewall）放行 8443 端口的入口流量
• 下载仓库： git clone https://github.com/EXP-Tools/vscode-web-docker
• 构建镜像并运行： ./run.sh -p "basicauth_password" -w "/path/to/mnt/workspace"

-p 指定通过浏览器访问 vscode 的 BasicAuth 密码； -w 指定挂载到容器的工作目录，该目录下的项目可直接被 vscode 访问（默认路径为 ./vscode/workspace/）

远程访问

用浏览器访问 http://${server-ip}:8443 即可（访问的是容器内的内容）

但直接用 iPad 的 Safari 浏览器访问 code-server 的体验还是比较糟糕，上面地址栏和下面外接键盘出现的菜单栏都非常不顺畅，因此最好使用 VSApp 作为 ipad 的本地客户端去访问 code-server。

VSApp 是一款专门为 iPad 用来优化 code-server 连接的 iOS 原生应用： 启动 APP 后，在【Self Hosted Server】填写 code-server 的连接信息即可。

VSApp 已更名为 Sevediter for code-server

FAQ

Q1. 在 terminal 无法复制黏贴

web 版编辑器的快捷键没变，但是终端快捷键改了：

• 复制： ctrl + c
• 粘贴： shift + insert

Q2. 无法安装 Remote - SSH 插件做远程开发

web 版确实不支持这个插件。

但是 vscode-web 已经在你的远程代码服务器了，还要远程去哪里。。。

只需要把远程服务器的代码目录挂载到 vscode-web 的 workspace ，vscode-web 就像访问本地代码一样。

Q3. 为什么 iPad 无法渲染 vscode-web 内容

iOS 系统版本过低导致，至少需要 iOS 13 版本，该版本之后对浏览器做了优化，可以渲染 PC 浏览器的内容。

但是最好还是使用 VSApp 访问 vscode-web ，速度不是浏览器可以比拟的。