Use Browserless for capturing screenshots

.env.example

@@ -13,6 +13,11 @@ USER_AGENT=
 # Sentry
 SENTRY_DSN=
 
+# Browserless (for screenshots)
+BROWSERLESS_ENDPOINT=ws://localhost:3000
+SCREENSHOT_HOST=host.docker.internal
+BROWSERLESS_CONCURRENT=2
+
 # S3 parameters
 AWS_S3_ENDPOINT=
 AWS_S3_BUCKET=

app/screenshots/ScreenshotHelper.mjs

@@ -1,5 +1,5 @@
 import { URL } from 'url';
-import puppeteer from 'puppeteer';
+import puppeteer from 'puppeteer-core';
 import HttpServer from './HttpServer.mjs';
 
 const defaultViewport = {
@@ -36,12 +36,9 @@ export default class ScreenshotHelper
     this.#httpServer = new HttpServer;
     await this.#httpServer.open();
 
-    // Launch a new Chrome instance
-    this.#browser = await puppeteer.launch({
-      args: [
-        '--no-sandbox', // Allow running as root inside the Docker container
-      ],
-      // headless: false, // For testing
+    // Connect to Browserless
+    this.#browser = await puppeteer.connect({
+      browserWSEndpoint: process.env.BROWSERLESS_ENDPOINT,
     });
 
     // Create a new page and set the viewport
@@ -66,7 +63,8 @@ export default class ScreenshotHelper
     await this.applyViewport(options.viewport);
 
     // Navigate to the URL
-    let url = new URL(`http://localhost:${this.#httpServer.port}/screenshots/`);
+    let host = process.env.SCREENSHOT_HOST || 'localhost';
+    let url = new URL(`http://${host}:${this.#httpServer.port}/screenshots/`);
     url.hash = path;
 
     let params = {

app/social/clients/TwitterClient.mjs

@@ -33,7 +33,7 @@ export default class TwitterClient extends Client
     // Upload images
     let mediaIds = await Promise.all(
       status.media.map(async m => {
-        let id = await this.api().v1.uploadMedia(m.file, { mimeType: m.type });
+        let id = await this.api().v1.uploadMedia(Buffer.from(m.file), { mimeType: m.type });
 
         if (m.altText) {
           await this.api().v1.createMediaMetadata(id, { alt_text: { text: m.altText } });

docker-compose.override.yml.dev.example

@@ -0,0 +1,21 @@
+# Example Docker Compose override file for local development
+
+services:
+  app:
+    platform: linux/amd64 # Needed for Apple Silicon
+    build:
+      dockerfile: docker/app/Dockerfile
+    init: true
+    restart: unless-stopped
+    environment:
+      BROWSERLESS_ENDPOINT: ws://browserless:3000
+      SCREENSHOT_HOST: app
+    depends_on:
+      - browserless
+    volumes:
+      - .:/app
+
+  browserless:
+    platform: linux/arm64 # Needed for Apple Silicon
+    ports:
+      - 3000:3000

docker-compose.override.yml.prod.example

@@ -0,0 +1,23 @@
+# Example Docker Compose override file for production
+
+services:
+  app:
+    image: ghcr.io/misenhower/splatoon2.ink:main
+    init: true
+    restart: unless-stopped
+    environment:
+      BROWSERLESS_ENDPOINT: ws://browserless:3000
+      SCREENSHOT_HOST: app
+    depends_on:
+      - browserless
+    labels: [ "com.centurylinklabs.watchtower.scope=splatoon3ink" ]
+
+  browserless:
+    labels: [ "com.centurylinklabs.watchtower.scope=splatoon3ink" ]
+
+  watchtower:
+    image: containrrr/watchtower
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    command: --interval 30 --scope splatoon3ink
+    labels: [ "com.centurylinklabs.watchtower.scope=splatoon3ink" ]

docker-compose.yml

@@ -1,18 +1,9 @@
-version: "3.8"
+# See docker-compose.override.yml.* example files for dev/prod environments
 
 services:
-  app:
-    build: docker/app
-    init: true
+  browserless:
+    image: ghcr.io/browserless/chromium
     restart: unless-stopped
-    working_dir: /app
-    volumes:
-      - ./:/app
-    command: npm run cron
-
-  nginx:
-    image: nginx
-    restart: unless-stopped
-    volumes:
-      - ./docker/nginx/conf.d:/etc/nginx/conf.d:ro
-      - ./dist:/usr/share/nginx/html:ro
+    environment:
+      CONCURRENT: ${BROWSERLESS_CONCURRENT:-1}
+      QUEUED: ${BROWSERLESS_QUEUED:-100}