Container build failing in Docker when react-snap is enabled

[lewisdonovan]

My app works fine locally but I can't for the life of me get it to build in Docker. It works fine when I disable react-snap, but any time it's enabled, the build fails while building the image in Jenkins. My Dockerfile is pasted below, it's based mostly on what I've got from our server engineers:

FROM node:8-alpine as builder
COPY . /working/
RUN cd /working && yarn install && yarn run build

FROM nginx:mainline-alpine
COPY --from=builder /working/build /usr/share/nginx/html
COPY config/nginx.conf /etc/nginx/conf.d/main.conf

I have the following in my package.json as well:

"reactSnap": {
  "puppeteerArgs": ["--no-sandbox"],
  "concurrency": 1,
  "inlineCss": false
}

Any ideas where I'm going wrong? Cheers.

[stereobooster]

I have no idea. You didn't show actual error message. You didn't show config of react-snap. Did you try advices from https://github.com/stereobooster/react-snap#containers-and-other-restricted-environments?

[lewisdonovan]

ReactSnap settings are as below but the container's still not building:

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

I've requested error logs from server engineers, will paste shortly.

[lewisdonovan]

Full build log:

Sending build context to Docker daemon  899.6kB
Step 1/6 : FROM node:8-alpine as builder
---> 7c2983dfbf98
Step 2/6 : COPY . /working/
---> e30328246139
Removing intermediate container 953cb06c5491
Step 3/6 : RUN cd /working && yarn install && yarn run build
---> Running in 191d04379313
yarn install v1.3.2
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 36.33s.
yarn run v1.3.2
$ react-scripts build
Creating an optimized production build...
Compiled with warnings.

./src/helpers/Anims.js
  Line 1:    'React' is defined but never used            no-unused-vars
  Line 2:    'TweenLite' is defined but never used        no-unused-vars
  Line 2:    'TimelineMax' is defined but never used      no-unused-vars
  Line 2:    'Expo' is defined but never used             no-unused-vars
  Line 42:   'gridAnimEnter' is defined but never used    no-unused-vars
  Line 53:   'gridAnimExit' is defined but never used     no-unused-vars
  Line 64:   'detailAnimEnter' is defined but never used  no-unused-vars
  Line 84:   'detailAnimExit' is defined but never used   no-unused-vars
  Line 97:   'pageAnimEnter' is defined but never used    no-unused-vars
  Line 108:  'pageAnimExit' is defined but never used     no-unused-vars

./src/components/MainBlock.js
  Line 1:   'Component' is defined but never used         no-unused-vars
  Line 3:   'Transition' is defined but never used        no-unused-vars
  Line 11:  'enterAnimLaunch' is defined but never used   no-unused-vars
  Line 11:  'exitAnimLaunch' is defined but never used    no-unused-vars
  Line 26:  'match' is assigned a value but never used    no-unused-vars
  Line 26:  'history' is assigned a value but never used  no-unused-vars

./src/components/DetailView.js
  Line 23:  Expected '===' and instead saw '=='  eqeqeq
  Line 26:  Expected '===' and instead saw '=='  eqeqeq
  Line 31:  Expected '===' and instead saw '=='  eqeqeq
  Line 45:  Expected '===' and instead saw '=='  eqeqeq
  Line 45:  Expected '===' and instead saw '=='  eqeqeq
  Line 45:  Expected '===' and instead saw '=='  eqeqeq
  Line 47:  Expected '===' and instead saw '=='  eqeqeq
  Line 80:  Expected '===' and instead saw '=='  eqeqeq

./src/App.js
  Line 2:   'styled' is defined but never used   no-unused-vars
  Line 40:  Expected '===' and instead saw '=='  eqeqeq

./src/components/VideoPlayer.js
  Line 3:  'css' is defined but never used  no-unused-vars

./src/components/Hamburger.js
  Line 5:  Useless constructor  no-useless-constructor

./src/index.js
  Line 6:  'registerServiceWorker' is defined but never used  no-unused-vars

./src/components/GridBox.js
  Line 9:   'enterAnimLaunch' is defined but never used  no-unused-vars
  Line 9:   'exitAnimLaunch' is defined but never used   no-unused-vars
  Line 49:  Expected '===' and instead saw '=='          eqeqeq
  Line 58:  Expected '===' and instead saw '=='          eqeqeq
  Line 67:  'pages' is already defined                   no-redeclare

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  164.46 KB  build/static/js/main.109043a8.js
  3.01 KB    build/static/css/main.d8aa8d30.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  http://bit.ly/2vY88Kr

$ react-snap
events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: spawn /usr/bin/chromium-browser ENOENT
    at _errnoException (util.js:1022:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:190:19)
    at onErrorNT (internal/child_process.js:372:16)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at Function.Module.runMain (module.js:686:11)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The command '/bin/sh -c cd /working && yarn install && yarn run build' returned a non-zero code: 1

[stereobooster]

Error: spawn /usr/bin/chromium-browser ENOENT

there is no such executable? Remove puppeteerExecutablePath or set proper path

[lewisdonovan]

Solved. For anyone having issues with Chromium running in Alpine, consider the following in your Dockerfile:

FROM node:9-alpine as builder

# Installs latest Chromium (63) package.
RUN apk update && apk upgrade && \
    echo @edge http://nl.alpinelinux.org/alpine/edge/community >> /etc/apk/repositories && \
    echo @edge http://nl.alpinelinux.org/alpine/edge/main >> /etc/apk/repositories && \
    apk add --no-cache \
      chromium@edge \
      nss@edge

COPY . /app

# Tell Puppeteer to skip installing Chrome. We'll be using the installed package.
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true

# Puppeteer v0.11.0 works with Chromium 63.
RUN yarn add puppeteer@0.11.0

# Add user so we don't need --no-sandbox.
RUN addgroup -S pptruser && adduser -S -g pptruser pptruser \
    && mkdir -p /home/pptruser/Downloads \
    && chown -R pptruser:pptruser /home/pptruser \
    && chown -R pptruser:pptruser /app

# Run everything after as non-privileged user.
USER pptruser

RUN cd /app && yarn install && yarn run build

FROM nginx:mainline-alpine
COPY --from=builder /app/build /usr/share/nginx/html
COPY config/nginx.conf /etc/nginx/conf.d/main.conf

[stereobooster]

Nice. I will add link to this issue in Readme

[linonetwo]

According to latest https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#running-on-alpine, latest Dockerfile can be:

# Dockerfile.alpine
FROM mhart/alpine-node:latest

# Setup yarn
# RUN yarn config set registry https://registry.npm.taobao.org

# Create app directory
RUN mkdir -p /usr/src/app

# Installs the latest Chromium (64) package.
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g' /etc/apk/repositories
RUN apk update && apk upgrade && \
    echo @edge http://nl.alpinelinux.org/alpine/edge/community >> /etc/apk/repositories && \
    echo @edge http://nl.alpinelinux.org/alpine/edge/main >> /etc/apk/repositories
RUN apk add --no-cache nss@edge
RUN apk add --no-cache chromium@edge

# Tell Puppeteer to skip installing Chrome. We'll be using the installed package.
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
# Puppeteer v0.13.0 works with Chromium 64.
RUN yarn add puppeteer@0.13.0
# Add user so we don't need --no-sandbox.
RUN addgroup -S pptruser && adduser -S -g pptruser pptruser \
    && mkdir -p /home/pptruser/Downloads \
    && chown -R pptruser:pptruser /home/pptruser \
    && chown -R pptruser:pptruser /usr/src/app
# Run everything after as non-privileged user.
USER pptruser

# bundle app source
# use changes to package.json to force Docker not to use the cache
# when we change our application's nodejs dependencies:
COPY package.json /tmp/package.json
COPY yarn.lock /tmp/yarn.lock
# RUN sed -i '' 's/registry.npm.taobao.org/registry.npmjs.org/g' yarn.lock
RUN cd /tmp && yarn
RUN cp -a /tmp/node_modules /usr/src/app/

# simple HTTP server
RUN yarn global add http-server

# From here we load our application's code in, therefore the previous docker
# "layer" that's been cached will be used if possible
WORKDIR /usr/src/app
COPY . /usr/src/app

RUN yarn build
# Expose port
EXPOSE 5000

CMD [ "http-server", "./build", "-g", "-p", "5000", "-P" ]

But pptruser seems useless since it still errors out: No usable sandbox!

[skivol]

Was struggling with making react-snap (or more exactly Chromium used by puppeteer) to work under WSL's Ubuntu even for simplest Create React App project (but was constantly getting

🔥  pageerror at /: SyntaxError: Unexpected token '{'

🔥  pageerror at /: SyntaxError: Unexpected end of input

✅  crawled 1 out of 1 (/)

with disabled sandbox) and ended up building the app completely in Docker instead while using "buildkite/puppeteer" (https://hub.docker.com/r/buildkite/puppeteer) as a starting point (incorporating some of the ideas here and there):

# https://hub.docker.com/r/buildkite/puppeteer/
FROM buildkite/puppeteer as builder

COPY . /app
RUN cd /app && yarn install && yarn run build-snap

# https://hub.docker.com/_/nginx
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
COPY nginx/nginx.conf /etc/nginx/nginx.conf

While still disabling Chromium sandbox through "reactSnap" config in "package.json":

   "reactSnap": {
     "puppeteerArgs": [
       "--no-sandbox",
       "--disable-setuid-sandbox"
     ]
   },

Scripts section:

   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "generate-sw": "workbox generateSW scripts/workbox-config.js && terser -o build/service-worker.js -- build/service-worker.js",
     "build-snap": "react-scripts build && react-snap && yarn run generate-sw"
   },

Had also to update from sw-precache (along with corresponding config called workbox-config.js here) to workbox and from uglifyjs to terser (probably https://github.com/stereobooster/react-snap/blob/master/doc/recipes.md#configure-sw-precache-without-ejecting section would need some update).
workbox-config.js looks like this:

module.exports = {
  globDirectory: '.',
  globPatterns: [
    "build/static/css/*.css",
    "build/static/js/*.js",
    "build/200.html",
    "build/index.html"
  ],
  swDest: 'build/service-worker.js',
  navigateFallback: "/200.html",
  // Ignores URLs starting from /__ (useful for Firebase):
  // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
  navigateFallbackWhitelist: [/^(?!\/__).*/],
  // By default, a cache-busting query parameter is appended to requests
  // used to populate the caches, to ensure the responses are fresh.
  // If a URL is already hashed by Webpack, then there is no concern
  // about it being stale, and the cache-busting can be skipped.
  dontCacheBustURLsMatching: /\.\w{8}\./,
  runtimeCaching: [
    {
      urlPattern: /api/,
      handler: "StaleWhileRevalidate"
    }
  ]
};

Seems to work now :)

[servrox]

@skivol Thanks for your info. The https://hub.docker.com/r/buildkite/puppeteer/ image really helped me to get react-snap running in gitlab ci via docker!

[maxwaiyaki]

Can anyone help me out a little bit here?

Build Error

18:42:14 Running as SYSTEM
18:42:14 [EnvInject] - Loading node environment variables.
18:42:14 [EnvInject] - Preparing an environment for the build.
18:42:14 [EnvInject] - Keeping Jenkins system variables.
18:42:14 [EnvInject] - Keeping Jenkins build variables.
18:42:14 [EnvInject] - Injecting as environment variables the properties content 
18:42:14 AWS_DEFAULT_REGION=eu-west-1
18:42:14 AWS_ACCOUNT_ID=570193858047
18:42:14 PROJECT_NAME=directory
18:42:14 
18:42:14 [EnvInject] - Variables injected successfully.
18:42:14 [EnvInject] - Injecting contributions.
18:42:14 Building remotely on EC2 (JenkinsEC2) - Ubuntu - Spot (sir-v3ji49wn) (spot-instance docker) in workspace /home/ubuntu/workspace/deploy-directory
18:42:17 using credential github-ssh-mookh-ci
18:42:17 Cloning the remote Git repository
18:42:17 Cloning repository git@github.com:MOOKHAFRICA/directory-v3.git
18:42:17  > git init /home/ubuntu/workspace/deploy-directory # timeout=10
18:42:18 Fetching upstream changes from git@github.com:MOOKHAFRICA/directory-v3.git
18:42:18  > git --version # timeout=10
18:42:18 using GIT_SSH to set credentials GitHub SSH access for Mookh CI
18:42:19  > git fetch --tags --progress -- git@github.com:MOOKHAFRICA/directory-v3.git +refs/heads/*:refs/remotes/origin/* # timeout=10
18:42:23  > git config remote.origin.url git@github.com:MOOKHAFRICA/directory-v3.git # timeout=10
18:42:23  > git config --add remote.origin.fetch +refs/heads/*:refs/remotes/origin/* # timeout=10
18:42:23  > git config remote.origin.url git@github.com:MOOKHAFRICA/directory-v3.git # timeout=10
18:42:23 Cleaning workspace
18:42:23  > git rev-parse --verify HEAD # timeout=10
18:42:24 No valid HEAD. Skipping the resetting
18:42:24  > git clean -fdx # timeout=10
18:42:24 Fetching upstream changes from git@github.com:MOOKHAFRICA/directory-v3.git
18:42:24 using GIT_SSH to set credentials GitHub SSH access for Mookh CI
18:42:24  > git fetch --tags --progress -- git@github.com:MOOKHAFRICA/directory-v3.git +refs/heads/*:refs/remotes/origin/* # timeout=10
18:42:25  > git rev-parse refs/remotes/origin/trial-preRender^{commit} # timeout=10
18:42:25  > git rev-parse refs/remotes/origin/refs/heads/trial-preRender^{commit} # timeout=10
18:42:25 Checking out Revision 2f8de9f5f6a460c8416d1fa514a2c7e461798023 (refs/remotes/origin/trial-preRender)
18:42:25  > git config core.sparsecheckout # timeout=10
18:42:25  > git checkout -f 2f8de9f5f6a460c8416d1fa514a2c7e461798023 # timeout=10
18:42:29 Commit message: "add react-snap post build"
18:42:29  > git rev-list --no-walk fb76934f3f884e6d2d2190f3cf3cc7f8adfd612b # timeout=10
18:42:29 [deploy-directory] $ /bin/bash /tmp/jenkins3968855267120391415.sh
18:42:41 WARNING! Using --password via the CLI is insecure. Use --password-stdin.
18:42:41 WARNING! Your password will be stored unencrypted in /home/ubuntu/.docker/config.json.
18:42:41 Configure a credential helper to remove this warning. See
18:42:41 https://docs.docker.com/engine/reference/commandline/login/#credentials-store
18:42:41 
18:42:41 Login Succeeded
18:42:41 Setting required environment variables
18:42:41 Configure docker-compose
18:42:41 Sending build context to Docker daemon  2.928MB

18:42:41 Step 1/19 : FROM 570193858047.dkr.ecr.eu-west-1.amazonaws.com/mookh/base/directory:1.1.0
18:42:41  ---> 0e275ced49f7
18:42:41 Step 2/19 : ARG APP_USER="app"
18:42:44  ---> Running in 6bd143202c11
18:42:44 Removing intermediate container 6bd143202c11
18:42:44  ---> e00d08c60038
18:42:44 Step 3/19 : ENV APP_HOME="/home/${APP_USER}"
18:42:44  ---> Running in 12f08193b81f
18:42:44 Removing intermediate container 12f08193b81f
18:42:44  ---> 35ddd03070fc
18:42:44 Step 4/19 : ARG CODE_PATH="/srv/code"
18:42:44  ---> Running in 80112a964c59
18:42:44 Removing intermediate container 80112a964c59
18:42:44  ---> 1cbd59459a63
18:42:44 Step 5/19 : RUN mkdir -p ${CODE_PATH}
18:42:44  ---> Running in af2757561ccb
18:42:48 Removing intermediate container af2757561ccb
18:42:48  ---> e4985090f0d5
18:42:48 Step 6/19 : RUN groupadd -g 9999 ${APP_USER} &&     useradd --system --create-home -u 9999 -g 9999 ${APP_USER}
18:42:48  ---> Running in d4749aa66d4f
18:42:50 Removing intermediate container d4749aa66d4f
18:42:50  ---> 0ed38815dad9
18:42:50 Step 7/19 : WORKDIR ${CODE_PATH}
18:42:50  ---> Running in 18b2732424e5
18:42:50 Removing intermediate container 18b2732424e5
18:42:50  ---> 809836cd21eb
18:42:50 Step 8/19 : COPY package.json package.json
18:42:50  ---> b6614fcc20b5
18:42:50 Step 9/19 : COPY yarn.lock yarn.lock
18:42:51  ---> 986281e19d95
18:42:51 Step 10/19 : RUN yarn install --pure-lockfile &&     yarn cache clean
18:42:51  ---> Running in fe76c68020fb
18:42:57 yarn install v1.19.1
18:42:57 [1/4] Resolving packages...
18:42:58 [2/4] Fetching packages...
18:43:17 info fsevents@2.0.6: The platform "linux" is incompatible with this module.
18:43:17 info "fsevents@2.0.6" is an optional dependency and failed compatibility check. Excluding it from installation.
18:43:17 info fsevents@1.2.9: The platform "linux" is incompatible with this module.
18:43:17 info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
18:43:17 [3/4] Linking dependencies...
18:43:17 warning " > react-dates@21.0.1" has unmet peer dependency "@babel/runtime@^7.0.0".
18:43:17 warning " > react-dates@21.0.1" has unmet peer dependency "moment@^2.18.1".
18:43:17 warning " > react-dates@21.0.1" has unmet peer dependency "react-with-direction@^1.3.1".
18:43:17 warning "react-dates > react-moment-proptypes@1.7.0" has unmet peer dependency "moment@>=1.6.0".
18:43:17 warning "react-dates > react-with-styles@4.0.1" has unmet peer dependency "@babel/runtime@^7.0.0".
18:43:17 warning "react-dates > react-with-styles-interface-css@6.0.0" has unmet peer dependency "@babel/runtime@^7.0.0".
18:43:17 warning " > react-ga@2.7.0" has unmet peer dependency "prop-types@^15.6.0".
18:43:17 warning "react-pdf > pdfjs-dist@2.1.266" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0-alpha.0 || ^4.0.0".
18:43:17 warning "react-pdf > pdfjs-dist > worker-loader@2.0.0" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0-alpha.0 || ^4.0.0".
18:43:17 warning "react-scripts > @typescript-eslint/eslint-plugin@1.6.0" has unmet peer dependency "typescript@*".
18:43:17 warning "react-scripts > @typescript-eslint/parser@1.6.0" has unmet peer dependency "typescript@*".
18:43:17 warning " > eslint-plugin-react-hooks@1.6.1" has unmet peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0".
18:43:17 warning "react-scripts > @typescript-eslint/eslint-plugin > @typescript-eslint/typescript-estree@1.6.0" has unmet peer dependency "typescript@*".
18:43:17 warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.14.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev".
18:43:17 warning " > slick-carousel@1.8.1" has unmet peer dependency "jquery@>=1.8.0".
18:43:17 warning " > styled-components@5.0.0-beta.6-ej4" has unmet peer dependency "react-is@>= 16.8.0".
18:43:17 warning "styled-components > stylis-rule-sheet@0.0.10" has unmet peer dependency "stylis@^3.5.0".
18:43:17 warning " > jest-styled-components@6.3.3" has incorrect peer dependency "styled-components@^2 || ^3 || ^4".
18:43:17 [4/4] Building fresh packages...
18:43:35 Done in 38.78s.
18:43:36 yarn cache v1.19.1
18:43:39 success Cleared cache.
18:43:39 Done in 3.70s.
18:44:01 Removing intermediate container fe76c68020fb
18:44:01  ---> 8e2f0cb58992
18:44:01 Step 11/19 : ADD . ${CODE_PATH}
18:44:01  ---> b452f5d5c543
18:44:01 Step 12/19 : RUN yarn build
18:44:01  ---> Running in 5e6dd968f90c
18:44:02 yarn run v1.19.1
18:44:02 $ react-scripts build
18:44:03 Creating an optimized production build...
18:45:17 Compiled with warnings.
18:45:17 
18:45:17 ./node_modules/pdfjs-dist/build/pdf.js
18:45:17 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
18:45:17 
18:45:17 ./node_modules/pdfjs-dist/build/pdf.js
18:45:17 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
18:45:17 
18:45:17 ./node_modules/pdfjs-dist/build/pdf.js
18:45:17 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
18:45:17 
18:45:17 ./node_modules/pdfjs-dist/build/pdf.js
18:45:17 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
18:45:17 
18:45:17 Search for the keywords to learn more about each warning.
18:45:17 To ignore, add // eslint-disable-next-line to the line before.
18:45:17 
18:45:17 File sizes after gzip:
18:45:17 
18:45:17   324.18 KB  build/static/js/54.6321967b.chunk.js
18:45:17   72.38 KB   build/static/css/6.e719c198.chunk.css
18:45:17   66.8 KB    build/static/js/55.e45f9fbd.chunk.js
18:45:17   30.28 KB   build/static/js/MobilePage.5bb074b2.chunk.js
18:45:17   29.65 KB   build/static/js/DesktopPage.91bf9c8a.chunk.js
18:45:17   22.62 KB   build/static/js/2.e0bf7e00.chunk.js
18:45:17   18.94 KB   build/static/js/Navbar.0e49cda0.chunk.js
18:45:17   18.18 KB   build/static/js/57.665ff971.chunk.js
18:45:17   15.6 KB    build/static/js/PersonalSettingsPage.65abbc31.chunk.js
18:45:17   15.35 KB   build/static/js/Footer.77fd1dee.chunk.js
18:45:17   15.14 KB   build/static/js/6.bc5d5735.chunk.js
18:45:17   14.51 KB   build/static/js/8.c175b268.chunk.js
18:45:17   14.28 KB   build/static/js/NewPasswordPage.21c4f311.chunk.js
18:45:17   14.21 KB   build/static/js/CheckoutPage.b83370c8.chunk.js
18:45:17   13.66 KB   build/static/js/StartSellingPage.c9bbf50b.chunk.js
18:45:17   13.47 KB   build/static/js/EventItemPage.23073923.chunk.js
18:45:17   13.46 KB   build/static/js/56.5d471e06.chunk.js
18:45:17   13.07 KB   build/static/js/4.df871f11.chunk.js
18:45:17   12.52 KB   build/static/js/Terms.1d13b235.chunk.js
18:45:17   11.42 KB   build/static/js/NotFoundPage.ed2079f0.chunk.js
18:45:17   11.28 KB   build/static/js/SignUpPage.aa01a351.chunk.js
18:45:17   10.59 KB   build/static/js/Music.04e2de7b.chunk.js
18:45:17   10.05 KB   build/static/js/EventsPageForLandingPageTab.50c3e41a.chunk.js
18:45:17   9.63 KB    build/static/js/SearchResults.2d739d1f.chunk.js
18:45:17   8.88 KB    build/static/js/Orders.0b978649.chunk.js
18:45:17   8.09 KB    build/static/js/LandingPage.04b777e5.chunk.js
18:45:17   8.06 KB    build/static/js/Ebooks.06d66fa5.chunk.js
18:45:17   7.75 KB    build/static/js/9.3af15122.chunk.js
18:45:17   7.44 KB    build/static/js/0.1d64eac7.chunk.js
18:45:17   6.48 KB    build/static/js/1.e235127e.chunk.js
18:45:17   6.35 KB    build/static/js/main.e99bfc70.chunk.js
18:45:17   6.28 KB    build/static/js/5.e33ef112.chunk.js
18:45:17   5.37 KB    build/static/js/DesktopPane.101475b6.chunk.js
18:45:17   4.9 KB     build/static/css/8.18585a14.chunk.css
18:45:17   4.87 KB    build/static/js/StorePage.ac16ccf0.chunk.js
18:45:17   4.77 KB    build/static/js/DesktopMenus.cdfb5ff1.chunk.js
18:45:17   4.76 KB    build/static/js/MobilePane.66a174c5.chunk.js
18:45:17   4.33 KB    build/static/js/DigitalContentCard.3f1c419e.chunk.js
18:45:17   4.21 KB    build/static/js/ErrorBoundary.20176289.chunk.js
18:45:17   3.91 KB    build/static/js/Account.d9ab4cc2.chunk.js
18:45:17   3.84 KB    build/static/js/FeaturedStaffPick.7a5ce99c.chunk.js
18:45:17   3.82 KB    build/static/js/MobileMenus.97cf60c1.chunk.js
18:45:17   3.53 KB    build/static/css/57.d45e8b06.chunk.css
18:45:17   3.37 KB    build/static/js/Dock.38d9a625.chunk.js
18:45:17   3.33 KB    build/static/js/SearchResultsOverlay.bcb56569.chunk.js
18:45:17   3.24 KB    build/static/js/Player.07bb4bed.chunk.js
18:45:17   3.15 KB    build/static/js/EventsCard.04e4d337.chunk.js
18:45:17   3.1 KB     build/static/js/3.89208a6d.chunk.js
18:45:17   2.89 KB    build/static/js/MusicItemPage.76ab3167.chunk.js
18:45:17   2.46 KB    build/static/js/runtime~main.fabc55a0.js
18:45:17   2.18 KB    build/static/js/BuyTicketCard.52192479.chunk.js
18:45:17   1.94 KB    build/static/js/Login.df558584.chunk.js
18:45:17   1.83 KB    build/static/js/TicketOrder.cb3f1cdf.chunk.js
18:45:17   1.81 KB    build/static/js/playerModal.6e5e7a1d.chunk.js
18:45:17   1.23 KB    build/static/js/CartItem.ee3ccdb3.chunk.js
18:45:17   1.12 KB    build/static/js/ResetPassword.d3ffa9cc.chunk.js
18:45:17   1.07 KB    build/static/js/Loader.23faf0c0.chunk.js
18:45:17   1.01 KB    build/static/css/main.ab8c4f2b.chunk.css
18:45:17   1.01 KB    build/static/css/54.c83c8d54.chunk.css
18:45:17   947 B      build/static/js/Routes.56cc3023.chunk.js
18:45:17   914 B      build/static/js/FooterToggle.49ffa865.chunk.js
18:45:17   796 B      build/static/css/SignUpPage.a222438c.chunk.css
18:45:17   635 B      build/static/js/SearchInput.08609b3d.chunk.js
18:45:17   501 B      build/static/css/EventsPageForLandingPageTab.09c73477.chunk.css
18:45:17   496 B      build/static/css/FeaturedStaffPick.09c73477.chunk.css
18:45:17   485 B      build/static/css/Music.09c73477.chunk.css
18:45:17   409 B      build/static/js/Gallery.66e7d973.chunk.js
18:45:17   212 B      build/static/css/4.d22cd3da.chunk.css
18:45:17 
18:45:17 The project was built assuming it is hosted at the server root.
18:45:17 You can control this with the homepage field in your package.json.
18:45:17 For example, add this to build it for GitHub Pages:
18:45:17 
18:45:17   "homepage" : "http://myname.github.io/myapp",
18:45:17 
18:45:17 The build folder is ready to be deployed.
18:45:17 You may serve it with a static server:
18:45:17 
18:45:17   yarn global add serve
18:45:17   serve -s build
18:45:17 
18:45:17 Find out more about deployment here:
18:45:17 
18:45:17   https://bit.ly/CRA-deploy
18:45:17 
18:45:17 $ react-snap
18:45:17 Error: Failed to launch chrome!
18:45:17 /srv/code/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libX11.so.6: cannot open shared object file: No such file or directory
18:45:17 
18:45:17 
18:45:17 TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
18:45:17 
18:45:17     at onClose (/srv/code/node_modules/puppeteer/lib/Launcher.js:348:14)
18:45:17     at Interface.<anonymous> (/srv/code/node_modules/puppeteer/lib/Launcher.js:337:50)
18:45:17     at Interface.emit (events.js:215:7)
18:45:17     at Interface.close (readline.js:403:8)
18:45:17     at Socket.onend (readline.js:180:10)
18:45:17     at Socket.emit (events.js:215:7)
18:45:17     at endReadableNT (_stream_readable.js:1184:12)
18:45:17     at processTicksAndRejections (internal/process/task_queues.js:80:21)
18:45:17 error Command failed with exit code 1.
18:45:17 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
18:45:18 The command '/bin/sh -c yarn build' returned a non-zero code: 1
18:45:18 Build step 'Execute shell' marked build as failure
18:45:18 Finished: FAILURE

Script Section

    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "postbuild": "react-snap",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Docker Config

# ARGs & ENVs
ARG APP_USER="app"
ENV APP_HOME="/home/${APP_USER}"
ARG CODE_PATH="/srv/code"

# Set up key directories
RUN mkdir -p ${CODE_PATH}

# User
RUN groupadd -g 9999 ${APP_USER} && \
    useradd --system --create-home -u 9999 -g 9999 ${APP_USER}

WORKDIR ${CODE_PATH}

# Cache & install javascript dependencies
COPY package.json package.json
COPY yarn.lock yarn.lock
RUN yarn install --pure-lockfile && \
    yarn cache clean

# Copy the rest of the app
ADD . ${CODE_PATH}

# Run build of app
RUN yarn build

# Forward request and error logs to docker log collector
RUN ln -sf /dev/stdout /var/log/nginx/access.log && \
    ln -sf /dev/stderr /var/log/nginx/error.log

# Fix permission issue
RUN chmod -R 777 /var/log/nginx /var/cache/nginx/ /var/run/ && \
    chmod 644 /etc/nginx/*

ARG GIT_RELEASE
ENV GIT_RELEASE="${GIT_RELEASE:-unset}" \
    TERM="xterm"

USER ${APP_USER}
ENV HOME ${APP_HOME}

CMD ["/bin/bash"]

[paulrrdiaz]

https://hub.docker.com/r/buildkite/puppeteer ❤️
Folder structure:

• client/ => create-react-app
• server/ => nodejs app

FROM buildkite/puppeteer as client
RUN mkdir -p /home/temp
WORKDIR /home/temp
COPY ./client/package-lock.json ./client/package.json ./
RUN npm ci
COPY ./client .
RUN npm run build


FROM node:13.7.0-alpine
RUN mkdir -p /home/app
ENV NODE_ENV=production
WORKDIR /home/app
COPY ./server/package-lock.json ./server/package.json ./
RUN npm ci
COPY ./server .
COPY --from=client /home/temp/build /home/app/client
CMD ["npm", "run", "start"]