禁止套娃?打造你的纯浏览器开发环境!


matryoshka

前言

很久以前,我介绍过 code-server 这个项目:《容器化部署 Web 端 VS Code》。当时他还处在 v2 版,内存与 CPU 占用很高,一些插件也不兼容。

但最近,得力于 VS Online(微软官方VS Code在线版),的发布,code-server 的 v3 版已经开始基于官方实现开发了!内存 CPU 占用极低、插件兼容性也很强。

在使用过程中发现,有些地方还是不够完美。我如果想测试一个 Web 服务怎么办呢?之前都是 ssh 端口转发到本地或是配置反向代理至测试域名去做测试,但现在还这样做的话不就背离当初全容器化、浏览器化的初衷了吗?

于是思考,那为什么不在 code-server 容器的网络中添加一个浏览器容器,我们直接在浏览器里套娃访问容器内网浏览器,就可以进行调试了!

容器配置

这里使用了 jlesage/firefox 镜像。

容器配置:

version: '2'
services:
  code:
    # 这里使用了我自己构建的 code-server 镜像,也可以用官方版替代
    # 注意,如果使用我这个镜像,第一次运行需要拷贝 /etc/skel/ 或自行初始化 dotfiles
    image: forewing/code-server:3.0.2
    ports:
      - ${CODE_PORT}:8080
    restart: always
    volumes:
      - ./userdata:/home/code:rw

  browser:
    image: jlesage/firefox:latest
    restart: always
    environment:
      - ENABLE_CJK_FONT=1
    ports:
      - ${FF_PORT}:5800
    volumes:
      - ./firefox:/config
    links:
      - code
    shm_size: 2g

反向代理配置

此外,还需要配置反向代理,这里以 Caddy 为例。

code.example.com {
    proxy /browser/ http://127.0.0.1:${FF_PORT} {
        without /browser/
        websocket
        transparent
    }

    proxy / http://127.0.0.1:${CODE_PORT} {
        websocket
        transparent
    }
}

安全配置

此外,还需要把套娃浏览器保护起来,方法随意啦,可以直接加个 basicauth 或采用其他方法。

效果展示

访问 https://code.example.com 是你的 code-server; https://code.example.com/browser/ 是套娃浏览器。

在 code-server 里创建一个应用,监听端口 ${PORT},在套娃浏览器里访问 http://code:${PORT} 就可以了。

test

至此,恭喜你!你已经拥有一套纯浏览器 Web 开发测试环境了!