search

reactql / kit

ReactQL starter kit (use the CLI)
https://reactql.org
229 stars 38 forks source link

Docker build fails when the source references a *.png in the static folder #111

Closed arsanjea closed 6 years ago

arsanjea commented 6 years ago

Steps to reproduce:

reactql new

add png file to static just import the file in app.js

docker build -t test .

Error

Module build failed: Error: Error loading shared library libpng16.so.16: No such file or directory (needed by /src/node_modules/mozjpeg/vendor/cjpeg)

git repo

https://github.com/arsanjea/reactql-fail-compile-docker

ralexandr commented 6 years ago

Found this Issue https://github.com/imagemin/pngquant-bin/issues/65#issuecomment-315744927

leebenson commented 6 years ago

@ralexandr - that issue actually doesn't apply here; the PNG optimiser uses the shared library rather than the binary. The issue is that the last step in the Docker build process is apk del .gyp which kills libpng16.so.16.

Commenting out that line fixes it, but also bloats the final image by 150mb+ due to the build artefacts remaining. One solution might be to separate the apk add instructions into required and ephemeral packages, so that what we don't need after npm i is killed, but required shared libs remain.

I'll work on this for the next release. For now, if anyone runs into this issue, just comment out apk del .gyp in Dockerfile and you're good to go.

leebenson commented 6 years ago

This is what I have so far:

FROM node:8-alpine

WORKDIR /src

# The official image has verbose logging; change it to npm's default
ENV NPM_CONFIG_LOGLEVEL notice

# Add PM2, for Node process management
RUN npm i -g pm2

# Add packages
ENV PACKAGES="libpng-dev"
RUN apk add --no-cache $PACKAGES

# Add NPM package config
ADD package*.json ./

# Add temporary packages, and build the NPM packages/binaries
ENV EPHEMERAL_PACKAGES="autoconf automake g++ libtool make nasm python git"
RUN apk add --no-cache --virtual .tmp $EPHEMERAL_PACKAGES \
  && npm i \
  && apk del .tmp

# Add the remaining project files
ADD . .

# Set the default host/port
ENV HOST 0.0.0.0
ENV PORT 4000

# Build distribution
RUN npm run build

# Start the server by default
CMD pm2-docker start dist/server.js -i max

This does a few things:

  1. It fixes the PNG issue.
  2. It separates out temporary vs. permanent libs, with the former being cleaned up automatically after installation.
  3. It adds caching at the right steps; PM2 and permanent packages will be added before any package*.json changes are detected, so those steps should be skipped on subsequent builds.
  4. It reduces the final image from 573mb -> 325mb -- shaving 248mb!
  5. If we find that there are other libs that are missing post-install, they can just be added to the PACKAGES list and re-built.

Will get this pushed in the next release.

arsanjea commented 6 years ago

Thank you Lee!

Sincerely, Jean-Marc Arsan

C +1 (310) 435-9983

On Oct 26, 2017, at 5:10 AM, Lee Benson notifications@github.com wrote:

This is what I have so far:

FROM node:8-alpine

WORKDIR /src

The official image has verbose logging; change it to npm's default

ENV NPM_CONFIG_LOGLEVEL notice

Add PM2, for Node process management

RUN npm i -g pm2

Add packages

ENV PACKAGES="libpng-dev" RUN apk add --no-cache $PACKAGES

Add NPM package config

ADD package*.json ./

Add temporary packages, and build the NPM packages/binaries

ENV EPHEMERAL_PACKAGES="autoconf automake g++ libtool make nasm python git" RUN apk add --no-cache --virtual .tmp $EPHEMERAL_PACKAGES \ && npm i \ && apk del .tmp

Add the remaining project files

ADD . .

Set the default host/port

ENV HOST 0.0.0.0 ENV PORT 4000

Build distribution

RUN npm run build

Start the server by default

CMD pm2-docker start dist/server.js -i max This does a few things:

It fixes the PNG issue. It separates out temporary vs. permanent libs, with the former being cleaned up automatically after installation. It adds caching at the right steps; PM2 and permanent packages will be added before any package*.json changes are detected, so those steps should be skipped on subsequent builds. It reduces the final image from 573mb -> 325mb -- shaving 248mb! If we find that there are other libs that are missing post-install, they can just be added to the PACKAGES list and re-built. Will get this pushed in the next release.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

ralexandr commented 6 years ago

@leebenson Sorry, I should dig deeper) Thank you for quick response and fast-fix without need to wait for new reactql release! 👍

webberwang commented 6 years ago

I'm also getting the issue after adding a css package.

styles.global.css @import '~semantic-ui-css/semantic.css';

The above updated dockerfile fixed the issue, thanks Benson!

leebenson commented 6 years ago

Apologies for the generic response, but I've released a new v3.0 kit, which has been re-written from the ground up.

It bumps the ReactQL stack to Webpack 4, React 16.4, Apollo Client 2.0, and adds Styled Components, full SSR (even in development), and has been re-written in Typescript. It's leaner, faster and has been brought completely up-to-date.

If you're still using ReactQL (and I appreciate you may not be, given the time lag in my response), I'd recommend checking out the new kit to see if your issue has been answered. If not, please feel free to post a new issue at https://github.com/leebenson/reactql