はじめに

なんとなく想像していたが現在私の環境では動作しなかったので先に記述しておく。

WebpackError: TypeError: Cannot read property 'childImageSharp' of null

最初のビルドは成功するが、差分ビルドで上のエラーがでる。これはfrontmatterの中に設定されている画像ファイルが解決できていない(nullが帰る)エラーだと思われる。

１日中調べたが解決できなかった。少数では有るがこの問題にぶち当たってる人がいるようで結局以前の記事で示したとおりgatsby clean(キャッシュの削除コマンド)をする必要がある。

このビルドの高速化がそもそもキャッシュからの差分だけをビルドするというシステムであり、キャッシュを削除した場合は全ページを再レンダリングすることになるため全く意味のないものとなる。

今回は実験として実装方法を残しておくので各自動作するかためしてみてほしい。

2020/05/26更新

上のようなエラーで動作しなかったが原因が判明。

画像をstaticに保存していたのが原因。src配下へ変更することで正常動作した。

もし同様のエラーが出る場合は次の記事を参考にしてほしい。

【Netlify x Gatsby.js】差分だけビルドする機能(Incremental Builds)がエラーなく動作するように！

どういう原理で高速化するのか

更新された差分だけをビルドするように変更し高速化している。ただし差分といっても毎回実行せねばならないプロセスは有るようで驚くほど短くなるかと言ったら現状ではそうではないようだ。

また逆にビルド時間が倍増したケースも有るようなので注意されたい。まだbetaが外れないわけだ。

手順１: Gatsbyのバージョン確認

インクリメンタルビルドを導入するためにはGatsby.jsのバージョンが2.20.4以上である必要がある。

Package.jsonのdependenciesからgatsbyを見ればよいだろう。

この記事執筆時点で私は次のようになっていた。

"gatsby": "^2.21.23"

手順２：NetlifyでBuild PluginsをONにする

Netlifyへログイン直後すぐ右上にある Build Plugins Beta をクリックする。

Enable the beta ボタンをクリック

※1. ここに書いてある内容の意訳は下に記載

まず①をクリックして展開されるリストからプラグインを入れたいあなたのサイトを選ぶ。

注意点としてはドメインを設定していてもここがSite nameに設定されている名称がでるらしい。

私の場合はultra-noob.comだが設定上はgallant-hawking-cb95dcで表示されている。

②Enableをクリックして完了。

完了：この次は操作する必要なし

このような画面が出たら完了している。Go to Plugins directoryはクリックしなくて良い。

※1. 参考(無視してよい)

Build Plugins Betaのページにはこう書いてある

Enable the beta to get access to a world of new features via community build plugins (and even create your own). You also get speedier builds, the ability to exit builds early to save costs, cleaner and more detailed log outputs, and much more.

意訳：β機能をONにすればコミュニティビルドプラグインを経由して新しい世界が利用可能だよ！（っていうか自分で作ることもできちゃうョ！）そしてさらに君はより素晴らしいビルド...つまりコストを抑えるためにサクっとビルドを終わらせる能力を得るんだ。よりクリーンで詳細なログも出るよ。まだまだ他のメリットもあるョ！

コミュニティビルドプラグイン(community build plugins)とはなんだろうか？プラグインページを見ると作者の名前が入っているようなので公式ではなく一般のユーザがコミットしたプラグインのことだろう。

手順３：netlify.tomlを編集

ローカルに保存されているGatsbyのフォルダの中の netlify.toml 開く。

次のコードを追加する。

[[plugins]]
  package = "netlify-plugin-gatsby-cache"

同じtomlファイル内のbuild>commandを確認する。

[build]
  command = "npm run build"

npm run build になっていればOK。

手順４(Windowsのみ)：cross-envをインストール

cross-envをインストールする。

npm i --save-dev cross-env

※開発時のみに必要なためdevオプションがついている。

参考(無視してよい)

cross-envをインストールしないとWindowsの場合は次のエラーがでて進まない。

npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at サイト名 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

これは公式に説明してあるbuildコマンドを変更するコードに環境変数が設定されているにもかかわらずWindows環境だとその構文が解釈出来ない模様。これにcross-envを使って対応している。

手順５：buildスクリプトを変更する

package.jsonを開いてbuildのスクリプトを変更する。

Windowsの場合

"build": "cross-env GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --log-pages",

それ以外(MacやLinuxはこちらで良いらしいが未検証。)

"build": "GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --log-pages",

参考(無視してよい)

変更前は次のようになっていた。

"build": "npm run clean && gatsby build",

設定完了→Netlifyでビルド開始

以上で設定は完了。このままリポジトリにpushすればビルドが走るはず。初回ビルド時間は長くなる。

Netlifyで見るとなにやら見慣れないログが出る

1:01:39 PM: ❯ Installing plugins

1:01:39 PM: - netlify-plugin-gatsby-cache

どうやら初回はtomlで設定したプラグインのインストールが走る模様

2:27で完走した模様。適当な記事に「test」という文字列を追加して再push。さてどうなる。

ビルド成功：早くなっている

３０秒以上早い。

スピードに関しても期待していなかったがこれはすごいのではないだろうか。

再テスト

追記した記事をもう一度もとに戻す作業の速度も確認する。

残念ながらここで冒頭のエラー。

WebpackError: TypeError: Cannot read property 'childImageSharp' of null

つまり、記事の更新時にビルド出来ない可能性が高い。そして原因不明。

2020/05/26より上記エラーは解決

それでもエラーなら：もとに戻す方法

まずはnetlify.tomlのbuildをもとに戻す。

"build": "npm run clean && gatsby build",

次は消去

[[plugins]]
  package = "netlify-plugin-gatsby-cache"

cross-envのアンインストール。

Netlifyでビルドプラグインをオフ。

所感

調査のため一日を無駄にしてしまったがこのバグが治ることを期待している。

バグというより自分の実装ミスだった。gatsbyはまだ少し複雑だ。

BLOG記事に貼り付ける画像はstaticではなくsrcに保存しなければならない。

今回参考にしたページ

(英語 公式) Enable Gatsby Incremental Builds on Netlify

(英語 Youtube動画)

特にこちらはNetlifyの公式解説に乗っていないことも解説しているため大変助かった。