如何在Docker容器中运行PuppeteerSharp的Headful模式？

解决方案步骤 #

1. 更新Dockerfile安装Xvfb并配置启动流程 #

修改现有Dockerfile，添加Xvfb虚拟X服务器安装，并调整启动命令以先启动虚拟环境：

#See https://aka.ms/customizecontainer to learn how to customize your debug container and how Visual Studio uses this Dockerfile to build your images for faster debugging.

FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS base
USER app
WORKDIR /app
EXPOSE 8080
EXPOSE 8081

FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build
ARG BUILD_CONFIGURATION=Release
WORKDIR /src
COPY ["blazor-in-container.csproj", "."]
RUN dotnet restore "./././blazor-in-container.csproj"
COPY . .
WORKDIR "/src/."
RUN dotnet build "./blazor-in-container.csproj" -c $BUILD_CONFIGURATION -o /app/build

FROM build AS publish
ARG BUILD_CONFIGURATION=Release
RUN dotnet publish "./blazor-in-container.csproj" -c $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=false

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .

USER root

#####################
#PUPPETEER RECIPE
#####################
RUN apt-get update \
    && apt-get install -y wget gnupg \
    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | gpg --dearmor -o /usr/share/keyrings/googlechrome-linux-keyring.gpg \
    && sh -c 'echo "deb [arch=amd64 signed-by=/usr/share/keyrings/googlechrome-linux-keyring.gpg] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
    && apt-get update \
    && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-khmeros fonts-kacst fonts-freefont-ttf libxss1 dbus dbus-x11 xvfb \
    --no-install-recommends \
    && service dbus start \
    && rm -rf /var/lib/apt/lists/*

ENV PUPPETEER_EXECUTABLE_PATH "/usr/bin/google-chrome-stable"
# 设置默认DISPLAY环境变量
ENV DISPLAY=:99

USER app
# 后台启动Xvfb虚拟显示器，再启动.NET程序
ENTRYPOINT ["sh", "-c", "Xvfb :99 -screen 0 1024x768x16 & dotnet blazor-in-container.dll"]

2. 配置PuppeteerSharp关联Xvfb #

在代码中确保PuppeteerSharp正确读取DISPLAY环境变量，无需硬编码：

using PuppeteerSharp;

var launchOptions = new LaunchOptions
{
    ExecutablePath = Environment.GetEnvironmentVariable("PUPPETEER_EXECUTABLE_PATH"),
    Headless = false, // 启用headful模式
    // 可选：显式传递环境变量（自动读取失败时启用）
    Env = new Dictionary<string, string>
    {
        ["DISPLAY"] = Environment.GetEnvironmentVariable("DISPLAY") ?? ":99"
    },
    // Docker环境下运行Chrome的必要参数
    Args = new[]
    {
        "--no-sandbox",
        "--disable-dev-shm-usage",
        "--disable-gpu",
        "--window-size=1024,768"
    }
};

using var browser = await Puppeteer.LaunchAsync(launchOptions);
// 后续浏览器操作逻辑...

关键说明 #

• Xvfb作用：提供虚拟X11图形服务器，为Chrome的headful模式提供运行环境，直接解决Missing X server or $DISPLAY错误。
• DISPLAY变量：:99是Xvfb默认的显示端口，确保Chrome能定位到虚拟显示器。
• Chrome启动参数：--no-sandbox和--disable-dev-shm-usage是Docker环境下规避权限、资源限制的必要配置。

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