容器化部署 Web 端 VS Code


背景

去度假没带开发环境电脑甲方突然加需求?

老婆不在家去网吧开黑但老师突然布置作业今晚交?

code-server 提供了一个在服务器端运行,并提供 Web 访问界面的 VS Code 开发环境,只需要打开浏览器便可以随时随地激爽编程,甚至完全支持手机访问。

效果图

  • PC 端浏览器 (Chrome)

pc

  • 移动端浏览器 (Safari)

mobile

怎么样,心动了吗?

心动不如行动,在 Docker 的加持下,部署起来也是很简单,只要 Three Easy Pieces 即可完成部署。

Piece 1, Docker 镜像构建

FROM ubuntu:bionic

ENV DEBIAN_FRONTEND noninteractive

RUN sed -i 's/archive.ubuntu.com/mirrors.ustc.edu.cn/g' \
    /etc/apt/sources.list && \
    sed -i 's/security.ubuntu.com/mirrors.ustc.edu.cn/g' \
    /etc/apt/sources.list && \
    apt-get update && apt-get install -yq \
    openssl \
    net-tools \
    git \
    locales \
    sudo \
    dumb-init \
    vim \
    curl \
    wget \
    build-essential \
    bsdmainutils \
    python3 \
    python3-pip \
    gdb

RUN locale-gen en_US.UTF-8
ENV LC_ALL=en_US.UTF-8

ENV CODER_VERSION 2.1698-vsc1.41.1
WORKDIR /tmp
RUN wget https://github.com/cdr/code-server/releases/download/$CODER_VERSION/code-server$CODER_VERSION-linux-x86_64.tar.gz && \
    tar -xvzf code-server$CODER_VERSION-linux-x86_64.tar.gz && \
    cp code-server$CODER_VERSION-linux-x86_64/code-server /usr/local/bin/code-server

RUN mkdir -p /home/code
VOLUME [ "/home/code/src" ]
VOLUME [ "/home/coder/.local/share/code-server" ]

RUN adduser --gecos '' --disabled-password code && \
    echo "code ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers.d/nopasswd && \
    chown -R code /home/code

RUN chown code:code /home/code
USER code
WORKDIR /home/code

EXPOSE 8080

ENTRYPOINT ["dumb-init", "code-server", "--host", "0.0.0.0"]

Piece 2, docker-compose 设计

version: '2'
services:
  coder:
    build: . # 修改为 Dockerfile 所在目录
    # image: coder #或者直接从构建好的镜像创建
    ports:
      - "8080:8080" # 左侧暴露端口改为你想要的宿主机本地端口
    restart: always
    volumes:
      - ./src:/home/coder/src # 保存代码
      - ./config:/home/coder/.local/share/code-server
    command: --allow-http -P test # 远程访问密码

其实还有个大坑,就是 node 极其消耗内存,乞丐服务器根本扛不住,扛不住那就失去响应只能强制重启,所以需要限制一下容器的资源占用,在 compose 文件下的 coder 下面声明如下内容即可进行限制,防止占用满死机。

cpu_shares: 75 # 最大 CPU 占用百分比
mem_limit: 2147483648 # 最大内存占用,以字节为单位,这里是 2G

好的,现在我们只要执行 docker-compose up -d 就可以让它在本地运行起来了。

Piece 3, 反向代理设置

当然了,最好还是要把服务放到 HTTPS 反代后方以保证安全性。

以下是一个简单的 Caddyfile,适用于 Caddy1

code.example.com {
    proxy / http://127.0.0.1:8080 {
        websocket
        transparent
    }
    log / log/code.log
}

后日谈

到此为止,你已经成功配置 code-server 辣!但还是有一些问题需要注意。

镜像并没有接入微软的插件服务器,而是自己维护了一个小规模的,很多想要的插件都不能找到,这时你可以获取到插件的 vsix 包(微软官方插件市场 marketplace),然后导入服务器安装。

但由于 vsix 包压缩格式问题,你需要对其解包再重打包:

bsdtar -xvf fuck.vsix # bsdtar 可以通过 bsdmainutils 包安装
zip ....