キャッシュを利用して簡単にNetlifyでのビルド時間を半分にした

このブログ、Netlifyのビルド時間の生前に引っ掛かりローカルで毎回ビルドしていたのですが、めんどくさくなったのでNetlifyでビルドするようにしました。

以下の記事で、ビルドを高速化できると思ったからです。

Gatsby製サイトをNetlifyにデプロイする前に見ておきたい設定2つ

netlify.tomlに以下を加えます。

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

これで前回のビルドで生成されたファイルをキャッシュして、ビルドを高速化してくれます。

どれくらい高速化するのか見ていきましょう。

ローカルでビルドしたとき

ローカルのPCでビルドすると5分くらいでした(i5, 8gb, surface pro 4)。

今回のキャッシュはNetlifyのプラグインなのでローカルのビルドには全く影響ありません。

なぜビルド時間を計ったのかというと、Netlifyのビルドがそもそも遅いといわれているので個人PCとの時間差を観ようと思ったからです。

ローカルでもそれなりにかかってます。

キャッシュが適用されてない時

9分47秒かかりました。

ローカルで実行する場合と比べて倍くらい遅くなりました。

build time1

ビルド時間の制限が300分/月なので、かなり厳しいです。

5:20:02 PM: ────────────────────────────────────────────────────────────────
5:20:02 PM:   1. onPreBuild command from netlify-plugin-gatsby-cache        
5:20:02 PM: ────────────────────────────────────────────────────────────────
5:20:02 PM: ​
5:20:03 PM: No Gatsby cache found. Building fresh.
5:20:03 PM: ​
5:20:03 PM: (netlify-plugin-gatsby-cache onPreBuild completed in 321ms)
5:20:03 PM: ​
5:20:03 PM: ────────────────────────────────────────────────────────────────
5:20:03 PM:   2. Build command from Netlify app                             
5:20:03 PM: ────────────────────────────────────────────────────────────────
5:20:03 PM: ​
5:20:03 PM: $ yarn build
.
.
.
5:27:15 PM: Site is live ✨
5:28:54 PM: Finished processing build request in 11m26.514342769s

キャッシュが適用されているとき

6分43秒でした。

build time2

速くはなりましたが創造ほどではなかったです。

大体43回くらいビルドできる。

5:32:31 PM: ────────────────────────────────────────────────────────────────
5:32:31 PM:   1. onPreBuild command from netlify-plugin-gatsby-cache        
5:32:31 PM: ────────────────────────────────────────────────────────────────
5:32:31 PM: ​
5:32:35 PM: Found a Gatsby cache. We’re about to go FAST. ⚡️
5:32:35 PM: ​
5:32:35 PM: (netlify-plugin-gatsby-cache onPreBuild completed in 3.5s)
5:32:35 PM: ​
5:32:35 PM: ────────────────────────────────────────────────────────────────
5:32:35 PM:   2. Build command from Netlify app                             
5:32:35 PM: ────────────────────────────────────────────────────────────────
5:32:35 PM: ​
5:32:35 PM: $ yarn build
.
.
.
5:38:27 PM: Site is live ✨
5:40:16 PM: Finished processing build request in 8m32.036889663s

まとめ

Netlifyでのビルド時間を高速化するためにプラグインを導入して、デプロイにかかる時間を約半分にしました。

10分の1にはさすがになりませんでした。

しかし、どうしても記事や画像が多くなってくるとどうしてもビルド時間は伸びていってしまいます。Netlifyの制限的に結構厳しいものがあったりしますね。

最近はGithub Actionsがすごいのでそちらで自動デプロイするようにしようか悩み中です。

今のところビルド時間節約のためにはNetlifyの管理画面から Stop auto publishing しておいて、必要になったら Start auto publishing するのがいいですかね。手間ですが。

(追記、Stop auto publishingしててもBuild動いてましたので毎回Cancelしてます)

んー、ローカルでビルドするのも結構楽だったな。

やっぱり時代は Github Actions か。。。