UmeeT(Gatsbyプロジェクト)の開発環境をDocker化しました。

やかんです。ジャンルレス感ましましの当ブログですが、今回は「GatsbyプロジェクトのDocker化」という、いつにもましてニッチなテーマで書きます。

以前Qiitaに「既存のGatsbyプロジェクトをDocker化した。」という記事を上げたのですが、今回はその内容についてもっとのんびり書いていこうぜ、という内容です。

対象となるGatsbyプロジェクト概要
環境詳細
docker-compose.yml, Dockerfileのコード
遭遇したエラーたち
反省点

対象となるGatsbyプロジェクト概要

今回Docker化したのは、UmeeTという東大発オンラインメディアのサイトです（こちら）。このサイトはWordPressをヘッドレス化してフロントをGatsbyで実装するという作りになってます。

先輩方が頑張って作ったようです。

環境詳細

Gatsbyのバージョン：3
開発環境
- macOS Monterey
- 使用ツール；Docker Desktop for Mac, Docker Compose

docker-compose.yml, Dockerfileのコード

Dockerについては今もあまりわかってませんが、当時はもっとわかってなかったので色々手探りで開発を進めました。先にdocker-compose.ymlをとりあえず記述し、Dockerfileの編集をメインに作業しました。

両ファイルとも、この記述で本当にいいのかは不安が残りますが。。

どんどんアップデート予定。

version: '3'
services:
  todai-umeet:
    build: .
    volumes:
      - ~/.ssh/:/root/.ssh
      - .dockervenv:/src/.venv
      - .:/src
    env_file:
      - .env.development
    ports:
      - 8000:8000

# NOTE: nodeをベースイメージにすると、sharp周りでエラーが起きる。cf. https://gotohayato.com/content/548/
FROM node:16-bullseye

WORKDIR /todai-umeet

COPY . ./
# NOTE: 念の為node_modulesを削除。cf. https://github.com/lovell/sharp/issues/2443
RUN rm -rf node_modules 
RUN yarn install
RUN yarn global add gatsby-cli

ENTRYPOINT [ "gatsby","develop","-H", "0.0.0.0", "-p", "8000" ]

遭遇したエラーたち

開発の中でたくさんのエラーたちに遭遇しました。その一部を紹介します。

sharp: Installation error: Use with glibc 2.28 requires manual installation of libvips >= 8.10.6

このエラーは、sharpというパッケージ絡みのエラーのようです。sharpのgitリポジトリでも、issue#2443として取り上げられていました。

このエラーが生じたときのDockerfileの記述は以下。成功時のDockerfileと違うのはFROMの記述のみです。

FROM node:16

WORKDIR /todai-umeet

COPY . ./

RUN rm -rf node_modules 
RUN yarn install
RUN yarn global add gatsby-cli

ENTRYPOINT [ "gatsby","develop","-H", "0.0.0.0", "-p", "8000" ]

色々調べてみると、libvipsを改めてインストールするといいというような記述を散見したので以下のようにDockerfileを編集したりしましたが、それでもダメでした。

FROM node:16

WORKDIR /todai-umeet

RUN apt-get update
RUN apt-get install -y sudo

RUN sudo apt-get install -y libvips-dev 

COPY . ./

RUN rm -rf node_modules 
RUN yarn install
RUN yarn global add gatsby-cli

ENTRYPOINT [ "gatsby","develop","-H", "0.0.0.0", "-p", "8000" ]

↑これでもエラーかわらず。

色々試してみて、このエラーはこちらの記事を参考にベースイメージを変更（つまり、FROMの記述を変更）したら解消されました。

FROM node:16 → FROM node:16-bullseye

cannot write /var/folders/xp/_yz9z1m14tl_qc135pm3z99h0000gn/T/tmpy6voazh1 because server did not provide an image ID ERROR:

こちらはDockerのエラーです。何度も何度もコンテナを立ち上げまくったからでしょうか。。このエラーについては、こちらのQiitaに書きましたので、ぜひ遭遇した際にはご参照ください。

反省点

こちらの記事にも書きましたが、↓

全然専門的じゃない、超絶見習いエンジニアとしてのマインド記録。

もっと適切に課題を切り分けられるよう、頭を使うべきだったなと反省しています。

精進します。

かなりニッチなテーマで書いた本記事ですが、これで終了となります。最後までお読みいただき、ありがとうございます！