stereobooster/react-snap

facing error while react-snap in docker - while installing puppeteer separately.

lunacer opened this issue · 0 comments

Hi,

I'm really noob on Docker and react-snap. It's my first time to use those.
I'm trying to build my MERN stack app (with CRA) in docker, but facing some errors on the post-build step for react-snap.
My app directory is server folder as the root and client-side is nested in it.

The app folder directory is like this;

../app/
|-server.js
|-Dockerfile
|-.dockerignore
|-package.json
|-node_modules
|-......
|-client
    |-node_modules
    |-public
    |-src
        |-index.js
        |-app.jsx
        |-package.json 
        |-.......
    |-.......

first, I have faced a puppeteer installation issue, so I modified Dockerfile.
: used this guide in the puppeteer GitHub doc.
: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#running-puppeteer-in-docker

After done above, I'm facing this error.
I guess "puppeteerExecutablePath" in package.json should be changed, but can't find the clue.

Error: Failed to launch chrome! spawn /usr/bin/chromium-browser ENOENT

TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
#15 128.9 
#15 128.9     at onClose (/usr/src/app/client/node_modules/puppeteer/lib/Launcher.js:348:14)
#15 128.9     at ChildProcess. (/usr/src/app/client/node_modules/puppeteer/lib/Launcher.js:339:64)
#15 128.9     at ChildProcess.emit (node:events:376:20)
#15 128.9     at Process.ChildProcess._handle.onexit (node:internal/child_process:282:12)
#15 128.9     at onErrorNT (node:internal/child_process:476:16)
#15 128.9     at processTicksAndRejections (node:internal/process/task_queues:80:21)

package.json in client folder is;

"reactSnap": {
    "fixWebpackChunksIssue": false,
    "puppeteerIgnoreHTTPSErrors": true,
    "puppeteerArgs": [
      "--no-sandbox",
      "--disable-setuid-sandbox",
      "--disable-web-security"
    ],
    "concurrency": 1,
    "inlineCss": false,
    "puppeteerExecutablePath": "/usr/bin/chromium-browser",
    }

Dockerfile is;

FROM node:15.4.0 
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package*.json .
RUN npm install --silent
COPY . .

RUN cd ./client 
WORKDIR /usr/src/app/client
RUN apt-get update \
  && apt-get install -y wget gnupg \
  && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
  && sh -c 'echo "deb [arch=amd64] 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-kacst fonts-freefont-ttf libxss1 \
  --no-install-recommends \
  && rm -rf /var/lib/apt/lists/*
RUN npm add puppeteer
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
RUN npm install --silent && npm run build --silent

EXPOSE 8080 
CMD ["npm", "run", "start"]