如何从Web端连接Docker容器实现网页Shell交互？

整体链路 #

整个实现没有黑科技，数据流向非常清晰：
浏览器终端组件 <-> 后端WebSocket长连接 <-> Docker守护进程接口 <-> 目标容器内的Shell进程
所有环节不要做多余的协议转换，尽量做流透传，延迟能降到最低。

分环节实现要点 #

前端层 #

• 终端渲染直接用xterm.js，不用自己从零写终端解析逻辑，它已经处理好了光标移动、快捷键、ANSI颜色码、文本选中这些通用终端能力，开箱即用
• 通信协议选原生WebSocket，别用HTTP轮询，轮询的延迟根本达不到交互式终端的使用要求
• 监听终端容器的尺寸变化事件，第一时间把当前终端的行列数发给后端，不然vim、top这类依赖终端尺寸的程序会出现换行错乱、显示不全的问题
• 前端逻辑尽量薄：只负责把用户敲的字符通过WebSocket发给后端，把后端返回的二进制流直接喂给xterm渲染，不要在前端做命令解析、内容转义这类多余操作

后端层 #

• 选你熟悉的技术栈就行，Go、Java、Node.js、Python都能实现，核心要求是稳定支持WebSocket长连接
• 这一层是唯一的安全边界，绝对不能把Docker的原生接口直接暴露给前端：所有连接进来的请求必须先做用户身份校验、目标容器操作权限校验，确认用户有权限访问对应容器之后再建立连接，避免越权
• 对接Docker优先用官方维护的对应语言SDK，不要自己手写raw HTTP请求调Docker API，SDK已经封装好了流劫持、协议处理的逻辑，能少踩很多坑
• 核心操作逻辑：
  1. 拿到合法的目标容器ID后，调用SDK的exec创建接口，在运行中的容器内初始化一个Shell进程，优先指定/bin/bash，镜像没有bash的话自动降级到/bin/sh
  2. 启动exec实例时开启标准输入、标准输出、标准错误挂载，开启TTY模式，拿到和容器内Shell互通的双向流
  3. 做流双向转发：WebSocket收到前端发来的输入，直接写到exec的输入流；exec输出流读到内容，直接通过WebSocket推给前端
  4. 监听前端发来的终端尺寸调整消息，实时调用SDK的exec resize接口更新容器内伪终端的行列数
• 做好资源清理：前端WebSocket断开的时候，要主动关闭对应的exec实例和流，不要在容器里留孤儿进程占资源
• 安全红线：绝对不要把Docker守护进程的2375无认证端口直接暴露到公网，后端服务和Docker守护进程之间优先用本地Unix Socket通信，不要走公网

常见坑点 #

• 传输过程中不要对流内容做任何字符串转义、编码转换，直接透传二进制流，不然ANSI控制符、颜色码会失效，终端会显示乱码
• 部分极简基础镜像（比如alpine）默认没有bash，一定要做shell探测降级，不然会出现exec创建失败连不上的问题
• 不要给终端会话设置过小的消息缓存，不然快速输出大量内容的时候会出现丢字、卡顿

核心逻辑简化示例（Node.js） #

const WebSocket = require('ws');
const Docker = require('dockerode');
// 通过本地Unix Socket连接Docker守护进程，不暴露远程端口
const docker = new Docker({socketPath: '/var/run/docker.sock'});

const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', async (ws, req) => {
  // 此处必须加权限校验，示例省略鉴权逻辑
  const urlParams = new URLSearchParams(req.url.slice(1));
  const containerId = urlParams.get('containerId');
  const container = docker.getContainer(containerId);

  // 初始化容器内bash进程
  const exec = await container.exec({
    Cmd: ['/bin/bash'],
    AttachStdin: true,
    AttachStdout: true,
    AttachStderr: true,
    Tty: true
  });

  // 启动双向流
  const execStream = await exec.start({ hijack: true, stdin: true });
  // 前端输入 -> 容器shell
  ws.on('message', (payload) => {
    const msg = JSON.parse(payload.toString());
    if (msg.type === 'input') return execStream.write(msg.data);
    if (msg.type === 'resize') return exec.resize({ h: msg.rows, w: msg.cols });
  });
  // 容器输出 -> 前端
  execStream.on('data', (chunk) => ws.send(chunk));
  // 断连清理资源
  ws.on('close', () => execStream.destroy());
});

生产环境部署时建议给每个终端会话加超时机制，连续15-30分钟无操作自动断开连接；WebSocket连接建议用一次性临时token鉴权，token和用户身份、目标容器绑定，过期自动失效，降低被冒用的风险。

内容的提问来源于stack exchange，提问作者Binary_Beast