Support for alpine-node?

[mario-mui]

Feature?

I want to install canvas in docker container with image(node:6.9.4-alpine), is it support?

I can`t install canvas , because I had not install pkg-config. (how to install it in alpine)

Steps to Reproduce

Your Environment

• Version of node-canvas (e.g. 1.2.9):
• Environment ( node 6.9.4 on docker image node:6.9.4-alpine)

[zbjornson]

apk is the package management tool for Alpine. But, Alpine is designed to be more transient than typical linux distros -- you need to use lbu to capture the system state so that it can be restored after reboot if you're not backed by persistent disk.

[goliatone]

@zbjornson I'm also interested in this. Is there any place that would ave a reference on how to build for alpine?

[zbjornson]

@goliatone I don't think any part of the process will be specific to node-canvas, aside from what the dependencies actually are (as listed in the install wiki), so hopefully any tutorial about Alpine will be relevant. I don't know enough about Alpine to help much more, sorry.

[goliatone]

I'm trying to figure out what would be the list of dependencies and versions to install on alpine.

• cairo
• pango
• jpeg
• gif † did not find anything...
• build-essential
• g++

[davidmfoley]

@goliatone You might try installing libjpeg-turbo-dev, cairo-dev, pango via apk, in addition to the standard build stuff you already have. If the install still craps out, see which header file is missing and search for it -- usually that will land you on a package contents page for apk that you can use to figure out what package has that file and the dependency graph for that package.

Hope this helps.

[TooTallNate]

I believe this should do it:

$ apk add --no-cache \
    build-base \
    g++ \
    cairo-dev \
    jpeg-dev \
    pango-dev \
    giflib-dev

[goliatone]

I was finally able to try this and the build is still failing due to an error while installing node-canvas, which is a dependency of a dependency.

I have the generated npm-debug.log file if that would be helpful.

The following is a copy paste from the error message I got:

npm verb 
npm verb If you need help, you may report this error at:
npm verb     <https://github.com/npm/npm/issues>
npm verb stack Error: canvas@1.3.12 install: `node-gyp rebuild`
npm verb stack Exit status 1
npm verb stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
npm verb stack     at emitTwo (events.js:106:13)
npm verb stack     at EventEmitter.emit (events.js:191:7)
npm verb stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
npm verb stack     at emitTwo (events.js:106:13)
npm verb stack     at ChildProcess.emit (events.js:191:7)
npm verb stack     at maybeClose (internal/child_process.js:886:16)
npm verb stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
npm verb pkgid canvas@1.3.12
npm verb cwd /tmp
npm ERR! Linux 4.4.57-boot2docker
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "--production" "-ddd"
npm ERR! node v6.10.2
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE

npm ERR! canvas@1.3.12 install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the canvas@1.3.12 install script 'node-gyp rebuild'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the canvas package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-gyp rebuild
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs canvas
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls canvas
npm ERR! There is likely additional logging output above.
npm verb exit [ 1, true ]

npm ERR! Please include the following file with any support request:
npm ERR!     /tmp/npm-debug.log

[davidmfoley]

@goliatone This is what we do, on top of mhart/alpine-node:6, and we are able to install and use node-canvas. It has a few extra deps you won't need (imagemagick, ghostscript, postgresql-client, bash, etc.) that I am including for completeness:

RUN apk add --no-cache       \
 make gcc g++ python git  \
 postgresql-client        \
 bash \
 libjpeg-turbo-dev cairo-dev pango \
 imagemagick \
 ghostscript

[willfarrell]

My Dockerfile for those still stuck:

FROM node:6.10-alpine

ENV NODE_DIR /var/www
WORKDIR $NODE_DIR

# .npm-deps https://github.com/Automattic/node-canvas/issues/866
RUN apk add --no-cache --virtual .health-check curl \
	&& apk add --no-cache --virtual .build-deps git build-base g++ \
	&& apk add --no-cache --virtual .npm-deps cairo-dev libjpeg-turbo-dev pango

# cache npm
COPY src/package.json /tmp/
RUN cd /tmp \
	&& npm install \
	&& apk del .build-deps

COPY src $NODE_DIR
RUN cp -a /tmp/node_modules $NODE_DIR/

HEALTHCHECK --interval=5s --timeout=3s \
    CMD curl --silent --fail http://localhost:3000/ping || exit 1

CMD [ "node", "--harmony", "/var/www/app.js" ]

[goliatone]

Yes, same thing for me, it would not build on Alpine.

[LinusU]

@goliatone did you try the Dockerfile that @willfarrell posted?

[michbil]

Installed on alpine

RUN apk add --no-cache \
        git \
        build-base \
        g++ \
        cairo-dev \
        jpeg-dev \
        pango-dev \
        freetype-dev \
        giflib-dev

successfully, but fonts seems not to be found, getting squares instead of letters. Can anyone give me clue how to overcome this issue?

PS: upgraded 1.4.0 -> 1.6.5

[throrin19]

Whith canvas I have this problem (beause of color-thief used the canvas 1.4.0) with alpine:node-6 :

Error: Error loading shared library libpng12.so.0: No such file or directory (needed by /home/hapi/node_modules/canvas/build/Release/canvas.node)

This is my install in the docker alpine :

RUN apk add  --update --no-cache \
        build-base \
        autoconf \
        bash \
        python \
        krb5-dev \
        imagemagick \
        libjpeg \
        cairo-dev \
        imagemagick \
        icu-dev \
        jpeg-dev \
        libpng-dev \
        pango-dev \
        giflib-dev \
        gd-dev

The problem is : Alpine has only libpng16, not libpng12 :/

[Ilshidur]

I managed to make it work with the following Dockerfile :

FROM mhart/alpine-node:8.5.0

RUN apk add --no-cache \
    build-base \
    g++ \
    cairo-dev \
    jpeg-dev \
    pango-dev \
    bash \
    imagemagick

#  [...]

[TooTallNate]

@dmsnell @LinusU @kkoopa This should probably be closed. node-canvas works just fine on Alpine, and a few Dockerfiles that work have been posted in this thread already.

[dmsnell]

Thanks @TooTallNate! Miss you much 😄

[Hikariii]

Node canvas does not work fine on alpine (or any other official node image).
The error @throrin19 posted is still relevant.
With other docker images there are other image library issues.
See: #524 (comment)

[fritz-c]

This was acting up for me again recently, and in addition to the packages listed in #866 (comment), adding either pango or cairo seems to have resolved it.

[jacktuck]

@michbil Same issue here.

It works more or less, but the fonts are rendered as []

But works fine on OSX.

Did you find a workaround in the end?

[jacktuck]

I'm using canvas-prebuilt@2.0.0-alpha.2

CC @TooTallNate

[zbjornson]

@jacktuck alpine is a bare-bones distro with basically no system fonts. You need to install fonts for them to show up. There's info on registering your own font files in the readme: https://github.com/Automattic/node-canvas#registerfont-for-bundled-fonts. You can also install system fonts with your package manager.

[jacktuck]

@zbjornson I think ur onto something.

I specified a bunch of fonts and it would appear to work now

RUN apk add --update  --repository http://dl-3.alpinelinux.org/alpine/edge/testing libmount ttf-dejavu ttf-droid ttf-freefont ttf-liberation ttf-ubuntu-font-family fontconfig

[jacktuck]

Don't really care for any custom fonts just want the default system ones to kick in

[marcelstoer]

I believe this should do it:

$ apk add --no-cache \
    build-base \
    g++ \
    cairo-dev \
    jpeg-dev \
    pango-dev \
    giflib-dev

That's great, thanks! I had used pixman-dev instead of build-base and that wouldn't do it.

[T-vK]

@dmsnell Voting for re-open because this is still a problem! There should at least be a clear mention in the Installation section of the README, that states exactly what system dependencies this library needs during the installation.
Ideally it would print a helpful error message during the installation in case a system dependency is missing.

[dwaynebailey]

This is what I've run, I mostly assume that the -dev deps are all required and just match them with runtime deps.

FROM node:12-alpine as install

COPY package*.json ./

RUN apk add --no-cache --virtual build-deps \
      python \
      g++ \
      build-base \
      cairo-dev \
      jpeg-dev \
      pango-dev \
      musl-dev \
      giflib-dev \
      pixman-dev \
      pangomm-dev \
      libjpeg-turbo-dev \
      freetype-dev \
    && npm ci \
    && apk del build-deps \
    && apk add --no-cache \
      cairo \
      jpeg \
      pango \
      musl \
      giflib \
      pixman \
      pangomm \
      libjpeg-turbo \
      freetype

The -dev deps are 300+MB is size. While runtime is only 25MB. So not sure what peoples lean Alpine docker images are looking ike in reality 🤣

Hope this helps people get a hold of buildtime and runtime deps and save a few polar bears named Greta.

[bharathnayak03]

I believe this should do it:

$ apk add --no-cache \
    build-base \
    g++ \
    cairo-dev \
    jpeg-dev \
    pango-dev \
    giflib-dev

Error: Error loading shared library libcairo.so.2: No such file or directory.
Anyone else has faced same issue?

[blueprintChris]

This is my Dockerfile, which seems to work (including fixed fonts):

FROM node:alpine

RUN mkdir -p /usr/src/bot
WORKDIR /usr/src/bot

COPY package.json /usr/src/bot

RUN apk add --no-cache \
  build-base \
  g++ \
  cairo-dev \
  jpeg-dev \
  pango-dev \
  giflib-dev

RUN apk add --update  --repository http://dl-3.alpinelinux.org/alpine/edge/testing libmount ttf-dejavu ttf-droid ttf-freefont ttf-liberation ttf-ubuntu-font-family fontconfig

RUN npm install

COPY . /usr/src/bot

EXPOSE 3000

CMD ["node", "index.js"]

[ColdDev]

Hi there, I'm writing this because I'm currently running into the exact same issue as described above. I am currently using a Dockerfile with node:alpine to build a NextJS website, and am experiencing this issue.

FROM node:alpine AS deps
RUN apk add --no-cache libc6-compat
RUN apk add --update --no-cache \
  build-base \
  g++ \
  cairo-dev \
  jpeg-dev \
  pango-dev \
  giflib-dev

# and so on, and so forth

This used to work for a while, up until very recently, where for some reason it has just completely stopped working. Is there any reason for this?

[ceefour]

@ColdDev just to mention, I recently got hit by this but decided that it's easier to just use node:lts-buster-slim instead.

[vongohren]

@ceefour thanks for this pointer! Do you know why busterslim works, and what is the benefit of using alpine instead?

[SimenB]

Seems like something one can research on their own, but tl;dr: buster is (a slightly old) debian version, thus using glibc and not musl. alpine is generally used to create smaller images - buster node image is 50% larger than the alpine one.

[vongohren]

@SimenB thanks a lot for stepping in :D Very helpful
But why research when someone has the knowledge and can share. Does it hurt with a question?
Some points in life one evalute if I should ask a question or dig for it myself. If I had dug for everything myself I would not have time to do anything of what im currently doing.
And I gladly and happily share my knowledge if there is someone seeking deeper understanding a place I have shared my knowledge, but this is not the place I have my knowledge

[ceefour]

@vongohren can be replaced with node:lts-bullseye-slim for a more recent Debian at the time of this writing, and should work as well.

[vongohren]

Thank you for that insight! Node docker world has exploded since I last had to focus on this!

…

On Sat, Jun 18, 2022, 14:45 Hendy Irawan ***@***.***> wrote: @vongohren <https://github.com/vongohren> can be replaced with node:lts-bullseye-slim for a more recent Debian at the time of this writing, and should work as well. — Reply to this email directly, view it on GitHub <#866 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHXCV7KMLG3GZP3KEKGIX3VPXAGXANCNFSM4C4KOVZA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Malacarne]

In my case, I was trying to use the mhart's alpine-node image ... so I changed

FROM mhart/alpine-node:latest

to

FROM node:alpine

and it's now working correctly.

[lorenzogrv]

For those interested, some comments here helped me while setting up an alpine install. Let me share for future visitors:

WORKDIR /the-thing
COPY package*.json ./

# see https://github.com/Automattic/node-canvas/issues/866
RUN apk add --no-cache --virtual .build-deps \
        build-base \
	g++ \
	cairo-dev \
	jpeg-dev \
	pango-dev \
	giflib-dev \
    && apk add --no-cache --virtual .runtime-deps \
        cairo \
	jpeg \
	pango \
	giflib \
    && npm ci

# later on our release stage, we cleanup .build-deps

Thanks to everybody who share knowledge 🤟

[lorenzogrv]

PS: Maybe a wiki page could stop us spaming on this thread? 🤔 I may contribute one, if maintainers want

[iapetos163]

For others' reference: i found that the only additional dependency that i needed to make text rendering work was ttf-dejavu. This was just plain ASCII text, though, so fancier uses might require additional dependencies.

[Aaqu]

I am trying to add to docker to no avail, the dockerfile file i am using is for next.js
https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile

It is possible to add?

[jiang-bx]

For those interested, some comments here helped me while setting up an alpine install. Let me share for future visitors:

WORKDIR /the-thing
COPY package*.json ./

# see https://github.com/Automattic/node-canvas/issues/866
RUN apk add --no-cache --virtual .build-deps \
        build-base \
	g++ \
	cairo-dev \
	jpeg-dev \
	pango-dev \
	giflib-dev \
    && apk add --no-cache --virtual .runtime-deps \
        cairo \
	jpeg \
	pango \
	giflib \
    && npm ci

# later on our release stage, we cleanup .build-deps

Thanks to everybody who share knowledge 🤟
Solve my problem.

[Aqamarine228]

For anyone who is facing error "build without SVG support", you need to install all to your NPM packages with --build-from-source option as well as installing librsvg-dev library before

[SawkaDev]

shared libra

@bharathnayak03
@ColdDev
@Aaqu
Did you ever get this fixed? I seem to have the same issue as you. If so could you please share what fixed it?

@lorenzogrv do you have any advice? I have tried your dockerfile but no luck. using node:18-alpine but still getting

Error loading shared library libcairo.so.2: No such file or directory

[mepadev]

I tried using 'node:16.18.1-alpine3.17', but I encountered issues with node-gyp not recognizing the Python installation.

I switched to '16.18.1-buster-slim' and it resolved all my problems. Here's my installation:

RUN apt-get update && apt-get install -y --no-install-recommends \
        build-essential \
        libcairo2-dev \
        libjpeg-dev \
        libpango1.0-dev \
        libgif-dev \
    && rm -rf /var/lib/apt/lists/*

[rakanus]

Hola

I've successfully created a Docker setup for a project using Node.js with SvelteKit 2 and node-canvas.

It's designed to ensuring all necessary dependencies for node-canvas are correctly installed.

Here's the Dockerfile I've been working with:

# Use this image as the platform to build the app
FROM node:alpine 

# The WORKDIR instruction sets the working directory for everything that will happen next
WORKDIR /app

RUN apk add --no-cache --virtual .build-deps \
    build-base \
    g++ \
    cairo-dev \
    jpeg-dev \
    pango-dev \
    giflib-dev \
    && apk add --no-cache --virtual .runtime-deps \
    cairo \
    jpeg \
    pango \
    giflib 

# Copy all local files into the image
COPY . .

# Install dependencies
RUN npm install

# Build SvelteKit app
RUN npm run build

# Delete source code files that were used to build the app that are no longer needed
RUN rm -rf src/ static/  docker-compose.yml

# The USER instruction sets the user name to use as the default user for the remainder of the current stage
USER node:node

# This is the command that will be run inside the image when you tell Docker to start the container
CMD ["node","build/index.js"]

This setup has worked well for me, and I hope it helps others looking for a similar solution

[lorenzogrv]

@Sliffcak

Sorry for the late reply. It seems you aren't installing the cairo-dev package but can't help too much without seing the dockerfile

[nhuanhoangduc]

I tried using 'node:16.18.1-alpine3.17', but I encountered issues with node-gyp not recognizing the Python installation.

I switched to '16.18.1-buster-slim' and it resolved all my problems. Here's my installation:

RUN apt-get update && apt-get install -y --no-install-recommends \
        build-essential \
        libcairo2-dev \
        libjpeg-dev \
        libpango1.0-dev \
        libgif-dev \
    && rm -rf /var/lib/apt/lists/*

You must set python path for node-gyp

...
ENV npm_config_python=/usr/bin/python3

RUN apk update && apk add --no-cache python3
.....

[heocoi]

My Dockerfile using node:18-alpine. IT WORKS!

FROM node:18-alpine AS base
RUN apk add python3 \
    pkgconfig \
    pixman-dev \
    cairo-dev \
    pango-dev \
    build-base \
    npm

WORKDIR /app
RUN npm install canvas