Docker环境下Karma与Puppeteer配置问题排查

问题梳理 #

我需要用Puppeteer测试PDF场景，先后遇到两个问题：先是找不到Chromium二进制文件，解决后又出现Root用户运行无沙箱的错误，尽管已经配置了--no-sandbox参数。

初始配置问题分析 #

1. 第一个错误：找不到Chromium二进制文件 #

你的Dockerfile中，Chromium安装和环境变量设置都在nginx镜像构建阶段，但npm test是在更早的build-angular阶段执行的——此时容器里根本没有安装Chromium，自然找不到指定路径。

修复方案

把Chromium的安装和环境变量配置移到build-angular阶段，确保测试执行时环境已准备好：

FROM node:alpine AS build-angular
    
WORKDIR /app
RUN npm cache clean --force

# 提前安装Chromium及依赖到测试阶段
RUN apk update && apk add --no-cache \
chromium \
udev \
ttf-freefont \
nss \
harfbuzz \
freetype \
&& rm -rf /var/cache/apk/*

# 设置测试所需的环境变量
ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
ENV PUPPETEER_SKIP_DOWNLOAD='true'
ENV CHROME_BIN=/usr/bin/chromium-browser

COPY ./ /app/
RUN npm install && npm run build
RUN npm test
    
FROM nginx:alpine
    
COPY --from=build-angular /app/dist/aplicationame/browser /usr/share/nginx/html
COPY /nginx.conf /etc/nginx/conf.d/default.conf
    
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2. 第二个错误：Root用户运行无沙箱不被支持 #

你已经配置了ChromeHeadlessNoSandbox启动器，但仍报错，可能有以下几个原因：

排查及修复方案

• 确认Karma配置的最终生效值：你在配置中先后两次设置了browsers数组，虽然第二次会覆盖第一次，但建议删除重复配置，保持唯一的browsers设置：

  module.exports = function (config) {
    const process = require("process");
    // 直接使用Docker中设置的环境变量即可，无需硬编码
    // process.env.CHROME_BIN = require("puppeteer").executablePath();
    
    config.set({
      // ... 其他配置保持不变 ...
      browsers: ["ChromeHeadlessNoSandbox"], // 只保留这一行browsers配置
      singleRun: true,
      customLaunchers: {
        ChromeHeadlessNoSandbox: {
          base: "ChromeHeadless",
          flags: [
            "--no-sandbox",
            "--disable-gpu",
            "--disable-dev-shm-usage", // 解决Docker内存限制问题
            "--headless=new" // 使用新版Headless模式，兼容性更好
          ],
        },
      },
    });
  };
  

• 以非Root用户运行测试（更安全）：在build-angular阶段创建普通用户，避免Root权限风险，也不需要依赖--no-sandbox：

  FROM node:alpine AS build-angular
    
  WORKDIR /app
  RUN npm cache clean --force
  
  # 创建普通用户
  RUN addgroup -S appgroup && adduser -S appuser -G appgroup
  
  # 安装Chromium及依赖
  RUN apk update && apk add --no-cache \
  chromium \
  udev \
  ttf-freefont \
  nss \
  harfbuzz \
  freetype \
  && rm -rf /var/cache/apk/*
  
  ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
  ENV PUPPETEER_SKIP_DOWNLOAD='true'
  ENV CHROME_BIN=/usr/bin/chromium-browser
  
  COPY ./ /app/
  RUN npm install && npm run build
  
  # 切换到普通用户执行测试
  USER appuser
  RUN npm test
    
  # ... nginx阶段配置不变 ...
  

验证步骤 #

1. 重新构建Docker镜像：docker build -t your-image-name .
2. 运行镜像查看测试结果：docker run your-image-name

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