Digital Ocean Apps can't locate chromium directory for puppeteer

Question

I've been wrestling with this all day. I get the below error whenever I try to run my puppeteer script on Digital Ocean Apps.

/workspace/node_modules/puppeteer/.local-chromium/linux-818858/chrome-linux/chrome: error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory

I did some research and found this helpful link below that seems to be the accepted solution.

https://github.com/puppeteer/puppeteer/issues/5661

However since I'm using digital ocean apps instead of the standard digital ocean droplets it seems I can't use sudo commands in the command line so I can't actually run these in the command line.

Does anyone know of anyway around this?

I'm using node.js by the way.

Thank you!!!!

Answer 1

I've struggled with this issue myself. I needed a way to run puppeteer in order to run Scully (static site generator for Angular) during my build process. My solution was to use a Dockerfile to build my DigitalOcean App Platform's app. You can ignore the Scully stuff if not needed (Putting it here for others who struggles with this use case like me) and have a regular yarn build:prod or such, and use something like dist/myapp (instead of dist/scully) as output_dir in the appspec.

In your app's root folder, you should have these files:

Dockerfile

FROM node:14-alpine

RUN apk add --no-cache \
      chromium \
      ca-certificates

# This is to prevent the build from getting stuck on "Taking snapshot of full filesystem"
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true 

WORKDIR /usr/src/myapp
COPY package.json yarn.lock ./
RUN yarn

COPY . .

# Needed because we set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
ENV SCULLY_PUPPETEER_EXECUTABLE_PATH /usr/bin/chromium-browser

# build_prod_scully is set in package.json to: "ng build --configuration=production && yarn scully --scanRoutes"
RUN yarn build_prod_scully 

digitalocean.appspec.yml

domains:
  - domain: myapp.com
    type: PRIMARY
  - domain: www.myapp.com
    type: ALIAS
name: myapp
region: fra
static_sites:
  - catchall_document: index.html
    github:
      branch: master
      deploy_on_push: true
      repo: myname/myapp
    name: myapp
    output_dir: /usr/src/myapp/dist/scully # <--- /user/src/myapp refering to the Dockerfile's WORKDIR, dist/scully refers to scully config file's `outDir`
    routes:
      - path: /
    source_dir: /
    dockerfile_path: Dockerfile # <-- may be unneeded unless you already have an app set up.

Then upload the digitalocean.appspec.yml from your computer to your
App Dasboard > Settings > App > AppSpec > edit > Upload File.

For those who use it with Scully, I've also used the following inside scully.config.ts

export const config: ScullyConfig = {
...
puppeteerLaunchOptions: {
    args: ['--no-sandbox', '--disable-setuid--sandbox'],
  },
};

Hope it helps.