debianイメージでdocker runを使ってgatsby developまで構築する
概要
Dockerを使ってGatsbyの環境を作る
「gatsby docker」で検索すると、alpineイメージや1コンテナなのにdocker-composeを使っているサンプルが多かったので、個人的な自己満足としてお馴染みのdebianイメージでdocker runを使って環境を立てたかった
前提
Docker Desktop on Mac: 3.4.0
Mac: MacBook Air (M1, 2020)
結論
- Dockerfile
FROM node:16.3-buster-slim
RUN apt-get update -qq && apt -y upgrade && \
apt-get install -y git build-essential libpng-dev wget pkg-config glib2.0-dev libexpat1-dev autoconf nasm libtool dpkg g++
RUN wget https://github.com/jcupitt/libvips/releases/download/v8.11.0/vips-8.11.0.tar.gz
RUN tar xf vips-8.11.0.tar.gz && cd vips-8.11.0 && ./configure && make && make install && ldconfig
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./ yarn.lock ./
RUN yarn
COPY . ./
- package.json
{
"name": "app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"gatsby-cli": "^3.7.1",
"sharp": "^0.28.3"
}
}
yarn.lockは適当に空ファイルを作成しておく
その後下記のコマンドを実行
$ docker build -t myblog:dev .
$ $ docker run --name myblog -it --rm -v ${PWD}:/app -p 8000:8000 myblog:dev yarn
$ docker run --name myblog -it --rm -v ${PWD}:/app -p 8000:8000 myblog:dev gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
Your new Gatsby site has been successfully bootstrapped. Start developing it by running:
cd blog
gatsby develop
成功したらあとはよしなにビルドする
$ docker run --name myblog -it --rm -v ${PWD}:/app -p 8000:8000 myblog:dev npm install sharp
$ docker run --name myblog -it --rm -v ${PWD}:/app -p 8000:8000 myblog:dev gatsby develop -H 0.0.0.0
-> access http://localhost:8000
問題
sharpという画像処理ライブラリ周りのインストールでコケることが多かった
-
sharp: Installation error: Use with glibc 2.28 requires manual installation of libvips >= 8.10.6
最初は依存しているapt get libvips libvips-devを行っていたが、gatsby new時に上記のエラーが発生
sshしてみてlibvipsの実際のバージョンを確認(①)し、下記のissueコメントを見たところ(②)パッケージマネジャーからインストールされるバージョンが古いらしいことが推察された
①
@:/app# apt list --installed | grep libvips
WARNING: apt does not have a stable CLI interface. Use with caution in scripts.
libvips42/stable,now 8.7.4-1+deb10u1 arm64 [installed]
②
Ubuntu 18.04 ships with libvips 8.4.5. You'll need to update your Ubuntu, or build libvips yourself.
よって、今回は自分でlibvipsをビルドする
下記リンクのBuilding libvips from a source tarballを見て、8.10.6以上のバージョンをインストールする
具体的にはDockerfileに記載。GitHubにタグ付けされたtarのソースを取得・解凍・インストールしている。
-
gatsby develop時に画像がwebpに変換できないエラー
これはcliの際にインストールしたsharpが、自動生成されたblogフォルダ中のpackage.jsonには入っていなかった
なので、実行直前にsharpをインストールする。
WorkerError: Processing /app/src/images/profile-pic.png failed
Original error:
Failed to write /app/src/images/profile-pic.png into /app/public/static/6dacf7b2c4db85249eda1745ffb570ed/6a679/profile-pic.webp. (VipsOperatio
n: class "webpsave" not found
)
他やったこと
-
下記のリンクのように、
--ignore-scripts=falseをつけてみたが、私の環境ではlibvipsのエラーが発生した
https://javascript.tutorialink.com/express-sharp-install-via-docker-issue/ -
ドキュメントのLinuxでインストールするべきパッケージでは
slim-busterの環境では足りないようだった
https://www.gatsbyjs.com/docs/how-to/local-development/gatsby-on-linux/#using-windows-subsystem-linux-debian
$ sudo apt install build-essential
$ sudo apt install git
$ sudo apt install libpng-dev
感想
ビルド時間が長いので、トライアンドエラーで意外と時間がかかってしまった
試していないが記事を見る限りではalpineのほうがシンプルに構築できるかもしれない
また、gatsby newはCRAのようにnpxで良かったかもしれない
関連
Discussion