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


简介

现在比较主流的远程开发方式,是把代码放在远程服务器,然后在本地的 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/lyy289065406/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 ,速度不是浏览器可以比拟的。


文章作者: EXP
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 EXP !
 上一篇
CVE-2020-13277 漏洞分析 CVE-2020-13277 漏洞分析
An authorization issue in the mirroring logic allowed read access to private repositories in GitLab CE/EE 10.6 and later through 13.0.5
2020-11-09
下一篇 
使用 calibre 搭建私人书库 使用 calibre 搭建私人书库
概要你是否面临以下困扰: 想翻看曾经看过的某本小说的时候,网上已经找不到了 即使网上找到了,因为版权原因无法在线看、甚至无法下载 可以在线看,但是要收费 连载小说几个月才出一册,囤了一年后却不知道自己看到哪了 在家看小说看了一半突然要出门
2020-10-11
  目录