如何配置DevContainer运行Electron应用及解决运行时缺库报错

根因说明 #

• 报错缺失的libxshfence.so.1由系统包libxshmfence1提供，属于Electron/Chromium Linux环境下的必需图形依赖，现有Dockerfile未安装该包
• 容器环境默认开启Chromium沙箱限制，即使切换root用户也需要显式配置参数绕过，否则会被容器安全策略拦截启动

修复步骤 #

1. 更新Dockerfile补全系统依赖 #

替换原有Dockerfile内容，补全所有缺失的Electron运行依赖：

ARG VARIANT="14-buster"
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}

RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
    && apt-get -y install --no-install-recommends \
    xorg openbox \
    libnss3 libasound2 libatk-adaptor libgtk-3-0 \
    libxshmfence1 \
    libgbm1 libdrm2 libx11-xcb1 libxcb-dri3-0

2. 更新devcontainer.json配置无沙箱参数 #

不需要切换remoteUser为root，直接通过容器全局环境变量禁用Electron/Chromium沙箱，同时配置图形显示端口：

{
    "name": "Node.js",
    "build": {
        "dockerfile": "Dockerfile",
        "args": { "VARIANT": "14" }
    },
    "settings": { 
        "terminal.integrated.shell.linux": "/bin/bash"
    },
    "extensions": [
        "dbaeumer.vscode-eslint"
    ],
    "containerEnv": {
        "ELECTRON_DISABLE_SANDBOX": "1",
        "DISPLAY": ":0"
    },
    "remoteUser": "node"
}

3. 生效配置 #

• 打开VS Code命令面板（Ctrl+Shift+P / Cmd+Shift+P），执行Dev Containers: Rebuild Container重建容器
• 重建完成后重新执行npm start即可正常启动项目

补充说明：如果后续仍有类似缺库报错，可在容器终端执行ldd node_modules/electron/dist/electron查看所有缺失的动态库，对应安装Debian包即可。

内容的提问来源于stack exchange，提问作者Kevin Anthony Zhang Plaza