Issue Running Puppeteer In Docker with fly and NodeJS

Questions / Help Build debugging
1

I am trying to use Puppeteer and NodeJS to build my wasp-lang(https://wasp-lang.dev/) project. The NodeJS and ReactJS were building successfully but after adding Docker, the app refuses to work, after turning on dumpio to see Puppeteer logs, I am getting the below error:


ERROR:bus.cc(399)] Failed to connect to the bus: Failed to connect to socket /var/run/dbus/system_bus_socket: No such file or directory

ERROR:chrome_browser_cloud_management_controller.cc(162)] Cloud management controller initialization aborted as CBCM is not enabled.

 Extension not supported: VK_KHR_surface
2024-02-19T00:34:08Z app[6e82de19f40398] mia [info][470:470:0219/003408.333496:ERROR:angle_platform_impl.cc(43)] RendererVk.cpp:157 (VerifyExtensionsPresent): Extension not supported: VK_KHR_xcb_surface

My docker file looks similar to the below:


# NOTE: Why do we specify alpine version here?

# Because if not, we had situations where it would use the different version

# locally and on Github CI. This way we ensure exact version is used,

# and also have control over updating it (instead of update surprising us).

FROM node:18-alpine3.17 AS node

# We split Dockerfile into base, server-builder and server-production.

# This way we have separate situations -> in server-builder we build all

# we need to run the server, and then in server-production we start fresh

# and just copy what we need from server-builder, avoiding intermediate

# artifacts and any settings / pollution we don't need in production

# but only for building.

FROM node AS base

RUN apk --no-cache -U upgrade # To ensure any potential security patches are applied.

FROM base AS server-builder

RUN apk add --no-cache build-base libtool autoconf automake

WORKDIR /app

COPY server/ ./server/

# Install npm packages, resulting in node_modules/.

RUN cd server && npm install

COPY db/schema.prisma ./db/

RUN cd server && PRISMA_CLIENT_OUTPUT_DIR=../server/node_modules/.prisma/client/ npx prisma generate --schema='../db/schema.prisma'

# Building the server should come after Prisma generation.

RUN cd server && npm run build

# TODO: Use pm2?

# TODO: Use non-root user (node).

FROM base AS server-production

RUN apk add --no-cache \

chromium \

nss \

freetype \

freetype-dev \

harfbuzz \

ca-certificates \

ttf-freefont \

nodejs \

yarn \

dbus \

glib \

fontconfig \

&& apk add --no-cache --virtual .build-deps \

msttcorefonts-installer \

&& update-ms-fonts \

&& fc-cache -f

# Clean up to reduce image size after installing dependencies

RUN apk del .build-deps

# Set Puppeteer environment variables to skip downloading Chromium and use the system-provided binary

ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true

ENV PUPPETEER_EXECUTABLE_PATH /usr/bin/chromium-browser

# In case they want to use python3 in their app.

RUN apk add --no-cache python3

ENV NODE_ENV production

WORKDIR /app

COPY --from=server-builder /app/server/node_modules ./server/node_modules

COPY --from=server-builder /app/server/dist ./server/dist

COPY --from=server-builder /app/server/package*.json ./server/

COPY --from=server-builder /app/server/scripts ./server/scripts

COPY --from=server-builder /app/server/src/ext-src/api/templates ./server/templates

COPY db/ ./db/

EXPOSE ${PORT}

WORKDIR /app/server

ENTRYPOINT ["npm", "run", "start-production"]

I launch Puppeteer in My NodeJS app with:

    const browser = await puppeteer.launch({
      executablePath: '/usr/bin/chromium-browser',
      args: ['--no-sandbox'],
      dumpio: true,
    });

How do I resolve this issue to deploy my project and continue building?

2

Added nodejs

3

Hi @dealwap Can you check this and see if it helps?