update playwright as seperate service

.github/workflows/cd-cloud.yml

@@ -23,7 +23,7 @@ jobs:
         with:
           image: umamisoftware/umami
           tags: cloud-${{ steps.random_hash.outputs.hash }}, cloud-latest
-          buildArgs: DATABASE_TYPE=postgresql,INSTALL_HEATMAP=true
+          buildArgs: DATABASE_TYPE=postgresql
           registry: docker.io
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}

Dockerfile

@@ -1,23 +1,18 @@
 ARG NODE_IMAGE_VERSION="22-alpine"
 ARG PNPM_VERSION="10.15.1"
-ARG INSTALL_HEATMAP="false"
 
 # Install dependencies only when needed
 FROM node:${NODE_IMAGE_VERSION} AS deps
-ARG INSTALL_HEATMAP
 
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
-ENV PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
 COPY package.json pnpm-lock.yaml ./
 RUN npm install -g pnpm
 
 RUN printf 'strictDepBuilds: false\n' > pnpm-workspace.yaml
 
 RUN pnpm install --frozen-lockfile
-RUN mkdir -p $PLAYWRIGHT_BROWSERS_PATH \
-    && if [ "$INSTALL_HEATMAP" = "true" ]; then pnpm run install-heatmap; fi
 
 # Rebuild the source code only when needed
 FROM node:${NODE_IMAGE_VERSION} AS builder
@@ -43,7 +38,6 @@ ARG NODE_OPTIONS
 ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=1
 ENV NODE_OPTIONS=$NODE_OPTIONS
-ENV PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
 
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
@@ -66,7 +60,6 @@ COPY --from=builder /app/prisma ./prisma
 COPY --from=builder /app/prisma.config.ts ./prisma.config.ts
 COPY --from=builder /app/scripts ./scripts
 COPY --from=builder /app/generated ./generated
-COPY --from=deps --chown=nextjs:nodejs /ms-playwright /ms-playwright
 
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing

src/queries/sql/heatmap/ensureHeatmapSnapshot.ts

@@ -564,17 +564,27 @@ function getSnapshotObjectKey(websiteId: string, snapshotId: string, viewportW:
   return `${websiteId}/${viewportW}x${viewportH}/${snapshotId}.png`;
 }
 
+async function createSnapshotBrowser() {
+  const { chromium } = await import('@playwright/test');
+  const endpoint = process.env.PLAYWRIGHT_URL?.trim();
+
+  if (endpoint) {
+    return chromium.connect(endpoint);
+  }
+
+  return chromium.launch({
+    channel: 'chromium',
+    headless: true,
+  });
+}
+
 async function captureSnapshot(
   url: string,
   viewportW: number,
   viewportH: number,
   pageW?: number,
 ): Promise<CaptureResult> {
-  const { chromium } = await import('@playwright/test');
-  const browser = await chromium.launch({
-    channel: 'chromium',
-    headless: true,
-  });
+  const browser = await createSnapshotBrowser();
   const initialViewportW = viewportW;
 
   try {