alpine環境でyarn add cwebp-binする

やりたいこと

• alpineベースのdockerコンテナにnodeのパッケージ cwebp-binをインストールする

やったこと

• alpine linuxはOSレベルで画像処理ライブラリが欠けてるので追加でインストールを実施するべし
  • apk add make automake nasm g++ libc6-compat libjpeg-turbo-dev libpng-dev ...でいけるはず

そもそもの経緯

1. まあまあデカめのプロダクトのCI設定の見直しをしていた
2. ビルドにalpine環境を使えば高速化できるのでは？と思い至った
3. やってみると yarnを実行したときのcwebp-binのインストールで何故かコケる

そもそもcwebp-binとは

https://github.com/imagemin/cwebp-bin
https://www.npmjs.com/package/cwebp-bin

WebP is a new image format that provides lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index.

DeepLによる翻訳

WebP は、ウェブ上の画像をロスレスかつロージーに圧縮する新しい画像フォーマットです。WebPロスレス画像はPNGと比較してサイズが26%小さくなります。WebPの可逆圧縮画像は、同等のSSIMインデックスのJPEG画像と比較して、サイズが25～34%小さくなります。

つまるところ、元画像をいい感じに圧縮しユーザーエンドへ届ける技術のひとつ。

エラー全文

使用するdocker imageは node:14.14.0-alpine とした。

docker-compose.yml

version: '3'
services:
  alpine:
    image:
      node:14.14.0-alpine
    container_name: 'alpine'
    tty: true

$ docker-compose up -d alpine
$ docker exec -it alpine sh
# ここからalpineコンテナの中
$ yarn add cwebp-bin
yarn add v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
error /node_modules/cwebp-bin: Command failed.
Exit code: 1
Command: node lib/install.js
Arguments: 
Directory: /node_modules/cwebp-bin
Output:
⚠ spawn /node_modules/cwebp-bin/vendor/cwebp ENOENT
  ⚠ cwebp pre-build test failed
  ℹ compiling from source
  ✖ Error: Command failed: /bin/sh -c ./configure --disable-shared --prefix="/node_modules/cwebp-bin/vendor" --bindir="/node_modules/cwebp-bin/vendor"
./config.guess: line 1049: objdump: not found
configure: error: in `/tmp/66cb2ebc-9291-412c-8f6a-6e830504eed0':
configure: error: no acceptable C compiler found in $PATH
See `config.log' for more details

checking build system type... x86_64-pc-linux-musl
checking host system type... x86_64-pc-linux-musl
checking for a BSD-compatible install... /usr/bin/install -c
checking whether build environment is sane... yes
checking for a thread-safe mkdir -p... ./install-sh -c -d
checking for gawk... no
checking for mawk... no
checking for nawk... no
checking for awk... awk
checking whether make sets $(MAKE)... no
checking whether make supports nested variables... no
checking whether make supports the include directive... no
checking for gcc... no
checking for cc... no
checking for cl.exe... no

    at /node_modules/execa/index.js:231:11
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Promise.all (index 0)
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

objdump: not found
なんだか低水準言語なアプローチをしている想像ができる。

対処

「cwebp-bin alpine」でググるとそれっぽいのがヒットしたので引用。

First of all, image optimization is quite a heavy task, this is why imagemin (the underlying library) is using compiled binaries for it. But they are obviously not compiled for the alpine docker images and some libraries required for building them are missing because the goal of the alpine images is to have the smallest size possible.

DeepLによる翻訳

まず第一に、画像の最適化は非常に重い作業で、そのために imagemin (基礎となるライブラリ) はコンパイル済みのバイナリを使用しています。しかし、それらは明らかにアルプスのドッカーイメージ用にコンパイルされていませんし、アルプスのイメージの目標は可能な限り小さいサイズにすることですから、それらを構築するために必要ないくつかのライブラリが欠けています。

また、実際に動作を確認できたdockerfileも提示されている。

FROM node:alpine

RUN apk add --no-cache \
    autoconf \
    automake \
    bash \
    g++ \
    libc6-compat \
    libjpeg-turbo-dev \
    libpng-dev \
    make \
    nasm

# build your next.js app now..

つまり、alpineはOSレベルで画像処理ライブラルが欠けてるのできちんと追加でインストールしようね、ということらしい。
実際にひとつひとつインストールして確かめたところ、apk add make automake nasm g++の4つをインストールした時点でエラーは発生しなくなった。
(が、気持ち的には libc6-compat libjpeg-turbo-dev libpng-dev あたりもインストールしておいたほうがよさそうに思う)