基于 VSCode 构建自己的远程开发环境

平台要求:

System: Ubuntu 24.04
Node.js: v22.21.1
Docker
Fly.io CLI

构建 VSCode

下载 VSCode 源码

git clone https://github.com/microsoft/vscode.git
cd vscode

在这里，我们将基于一个历史版本 v1.99.3 来构建

git checkout -b my-vscode-1.99.3 1.99.3

安装依赖

sudo apt-get install build-essential g++ libx11-dev libxkbfile-dev libsecret-1-dev libkrb5-dev python-is-python3

参考 How to build and run from source

编译 VSCode

cd vscode
npm install
npm run compile

构建 Docker 镜像

创建构建脚本

在项目根目录新建 Dockerfile 文件，并在scripts目录下新建 build.sh 和 entrypoint.sh 文件。

文件夹vscode
- 文件夹scripts/
  - build.sh
  - entrypoint.sh
- Dockerfile

#!/usr/bin/env bash
set -euo pipefail

ROOT_DIR=$(cd "$(dirname "$0")/.." && pwd)
cd "$ROOT_DIR"

IMAGE_NAME="${IMAGE_NAME:-vscode-web}"
IMAGE_TAG="${IMAGE_TAG:-local}"
DOCKERFILE="${DOCKERFILE:-Dockerfile}"
WEB_DIST_DIR="${WEB_DIST_DIR:-vscode-reh-web-linux-x64}"

echo "[ENV] IMAGE_NAME=${IMAGE_NAME} IMAGE_TAG=${IMAGE_TAG} DOCKERFILE=${DOCKERFILE}"
echo "[ENV] WEB_DIST_DIR=${WEB_DIST_DIR}"

echo "[STEP] Build VS Code web dist -> ${WEB_DIST_DIR}"
rm -rf "${WEB_DIST_DIR}"
npm run gulp "${WEB_DIST_DIR}"
cp -r ../"${WEB_DIST_DIR}" ./

echo "[STEP] Docker build ${IMAGE_NAME}:${IMAGE_TAG}"
docker build \
  --build-arg WEB_DIST_DIR="${WEB_DIST_DIR}" \
  -t "${IMAGE_NAME}:${IMAGE_TAG}" \
  -f "${DOCKERFILE}" \
  "${ROOT_DIR}"

echo "[DONE] Built image: ${IMAGE_NAME}:${IMAGE_TAG}"

#!/usr/bin/env bash
set -euo pipefail

log() {
  echo "[$(date '+%Y-%m-%d %H:%M:%S')] $*"
}

APP_HOME="${APP_HOME:-/opt/vscode-web}"
HOST="0.0.0.0"
LISTEN_PORT="${IDE_PORT:-8080}"
CONNECTION_TOKEN="${CONNECTION_TOKEN:-rviFq8oBBOIp92fGXnSlWygbjNpGU2FelEeMVQp6CTRiuux0BxGKU01yCCmICBbY}"

ARGS=(
  --host "${HOST}"
  --port "${LISTEN_PORT}"
  --connection-token "${CONNECTION_TOKEN}"
)

log "[INFO] Starting VS Code Web on ${HOST}:${LISTEN_PORT}?tkn=${CONNECTION_TOKEN}"
log "[INFO] APP_HOME=${APP_HOME}"

SERVER_BIN="${SERVER_BIN:-${APP_HOME}/bin/code-server-oss}"

exec "${SERVER_BIN}" "${ARGS[@]}" "$@"

FROM ubuntu:24.04

ARG WEB_DIST_DIR=vscode-reh-web-linux-x64

ENV DEBIAN_FRONTEND=noninteractive \
    APP_HOME=/opt/vscode-web \
    IDE_PORT=8080 \
    PNPM_STORE_DIR=/home/vscode/workspace/.pnpm-store

RUN apt-get update && apt-get install -y --no-install-recommends \
    ca-certificates \
    curl \
    bash \
    dumb-init \
    git \
    unzip \
    zip \
    wget \
    net-tools \
    lrzsz \
    gnupg \
 && curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
 && apt-get install -y --no-install-recommends nodejs \
 && npm install -g pnpm@9 \
 && npm cache clean --force \
 && rm -rf /var/lib/apt/lists/*

RUN groupadd -r vscode && useradd -m -r -g vscode -s /bin/bash vscode

RUN mkdir -p "$APP_HOME" /home/vscode/workspace "$PNPM_STORE_DIR" \
 && chown -R vscode:vscode "$APP_HOME" /home/vscode

COPY ${WEB_DIST_DIR}/ "$APP_HOME"/

COPY scripts/entrypoint.sh /usr/local/bin/entrypoint.sh

RUN chmod 0755 /usr/local/bin/entrypoint.sh \
 && chown -R vscode:vscode "$APP_HOME"

USER vscode

RUN pnpm config set store-dir "$PNPM_STORE_DIR" --global \
 && git config --global user.name "vscode" \
 && git config --global user.email "[email protected]"

WORKDIR /home/vscode/workspace

EXPOSE 8080

ENTRYPOINT ["/usr/bin/dumb-init", "--"]
CMD ["/usr/local/bin/entrypoint.sh"]

然后开始构建镜像

cd vscode
bash scripts/build.sh

构建完成之后，可以使用 docker images 来查看构建好的镜像。

推送镜像到 Dockerhub

注册一个 Docker Hub 账号，并安装 Docker。

docker login
docker tag vscode-web:local {username}/vscode-web:latest
docker push {username}/vscode-web:latest

部署到 Fly.io

登陆 Fly.io

注册一个 Fly.io 账号，并安装 Fly.io CLI。

fly auth login

配置 Token

把 ~/.fly/config.yml 文件中的 access_token 配置到 FLY_API_TOKEN 环境变量中。

export FLY_API_TOKEN=$(cat ~/.fly/config.yml | grep access_token | awk -F ': ' '{print $2}')

创建 App

fly apps create {username}-vscode-web-ide

创建 Volume

fly volumes create vscode_workspace --size 3 --region sin --app {username}-vscode-web-ide

创建 fly.toml 文件

在项目根目录新建 fly.toml 文件。

app = '{username}-vscode-web-ide'
primary_region = 'sjc'

[build]
  image = '{username}/vscode-web:latest'

[http_service]
  internal_port = 8080
  force_https = true
  auto_stop_machines = 'suspend'
  auto_start_machines = true
  min_machines_running = 0
  processes = ['app']

[[vm]]
  memory = '4gb'
  cpu_kind = 'shared'
  cpus = 8

[[mounts]]
  source = "vscode_workspace"
  destination = "/home/vscode/workspace"

然后就可以开始部署了。

fly deploy

访问 VSCode Web

如果一切正常，那么现在可以正常访问 VSCode Web 了。

https://{username}-vscode-web-ide.fly.dev?tkn=rviFq8oBBOIp92fGXnSlWygbjNpGU2FelEeMVQp6CTRiuux0BxGKU01yCCmICBbY