BaHo Advent Calendar 2020 11 日目担当の BaHo 猫 です。
GitHub Action によるデプロイの自動化
GitHub Actions を使ってブログの自動デプロイに成功しました 👏
謎のエラーに当たったので軽く話します。
ブログ構築から自動化まで
1 日目で紹介した通り、gatsby-starter-blogというテンプレートを用いて生成しています。
その後、9 日目の記事を書くに当たって Markdown 上の相対パスから画像を取得し埋め込みをするために gatsby-remark-relative-images を導入しました。
このあたりからビルドの調子がおかしくなり、WSL からのビルドは下記のエラーによって失敗するようになりました。
> error "gatsby-plugin-manifest" threw an error while running the onPostBootstrap lifecycle:
> Input file contains unsupported image format
> Error: Input file contains unsupported image format
9 日目、10 日目は手元の Mac でデプロイしていたので WSL の問題かと思っていましたが、今回の自動化に際して問題が起きました。
GitHub Action でのビルドにも同様のエラーが発生しました。 さすがに今後の障壁になると思い、エラーの指示通りに画像フォーマットを変えましたがどうにもなりませんでした。 libvips が問題になっているケースもあるようでしたが、私の環境には入っていないので関係なさそうです。
色々調査した結果、この issueに遭遇しました。
環境やエラーが似通っているので読み進めていくと、 npm upgrade しろとのことでした。
動きました 👏
Mac でセットアップした後に WSL 側で依存関係を追加したのが悪かったんでしょうか。
同 issue には package-lock.json を消せば同様に解決するという記載があるため、 gatsby-starter-blog のテンプレートリポジトリにある package-lock.json が古くなっており、新しいモジュールを追加するとおかしくなるという説が有力そうです。
私の記事を見てブログを建立したり、そもそも自分で思い立って gatsby-starter-blog でブログを建てた方は同様の問題に遭遇する可能性があるため、覚えておくとよいかもしれないです。