先に結論！

先に結論を述べる。

2020/11/06 追記・修正：この記事執筆時点ではNetlify-Cliの使いやすさを知らずビルドはリモートに任せたほうが良いと結論づけていた。

しかしながらNetlify-Cliがあまりにも簡単に導入できるためBLOG規模が大きくなりビルドタイムが伸びてきた現在はcliによるローカルビルドを採用している。

Netlify-CLIを使ってGatsby.jsのサイトをローカルでビルドしてデプロイする

ただし小規模なBLOGであればビルドタイムが厳しくなるまでNetlifyに任せてしまって全く問題ない。

Gatsbyをローカルビルド？

Gatsby.jsにはbuildコマンドがあり自前でビルドすることができる。

そしてその出力ファイルを丸ごとGitHubにアップロードすることで

Netlify側ではロードするのみとし負荷をかけない設計で実際に私のBLOGをしばらく運用してきた。

しかしNetlifyにはトータルビルド時間に制限があるという問題が残っている。

無料ユーザではNetlify側では1ヶ月のビルド時間が300分を超えることが出来ない。

次の記事で一応検証している

Netlifyのビルド時間制限(300分/月)は足りるのか

設定を間違えればあっというまに300分を超えてしまう。

とはいえ設定をしておけば1日1記事程度のBLOGであればひとまず問題ない検証結果であったが

あえてローカルビルドで運用するとどうなのか、実験を続けていた。

ローカルビルドどうやるの？

2020/11/06 修正：以前解説したやり方は古い方法で現在は使用不可能な可能性あり。新しい方法を推奨する。

Netlify-CLIを使ってGatsby.jsのサイトをローカルでビルドしてデプロイする

古い方法は次

ローカルでGatsbyをビルドしてNetlifyに公開する

以下の記事は古い方法で試した結果である。

速さ対決：ローカル vs. Netlify

公開まで早いのはどちらか。

私の検証結果では僅かにローカルのほうが早かったが誤差とも言える。

画像周りのデータ処理に時間がかかるためノートPCでは逆に公開までが大幅に遅くなる傾向も見られた。

つまりNetlifyにビルドを任せても思いのほか早いのである。

後ほど浮上した疑問

ふと疑問。

「もしかして、ローカルでビルドしているのにNetlifyでビルド時間が取られているのでは」

そもそもローカルでビルドしたものをGitHubにアップロードしてからNetlifyに反映されるまでに最大で8分計上されている。

これはビルド時間換算なのだろうか？

確認方法

NetlifyチームのトップページからBuildsタブ

とりあえずローカルでビルドしている分にはかなり余裕はある。

また、個別の消費時間は右側に表示されている

かなりばらつきが有ることがわかる。

全てビルド時間に加算されている

これらの時間がビルド時間とされている。

細かいビルドログは技術的な知識が必要そうで全ては理解できないが、ファイルの移動にポストプロセス、差分の判定などで処理が必要で、ビルド時間へ加算されている模様。

一応参考程度にログを転載

7:36:17 PM: Build ready to start
7:36:19 PM: build-image version: ca811f47d4c1cbd1812d1eb6ecb0c977e86d1a1d
7:36:19 PM: build-image tag: v3.3.20
7:36:19 PM: buildbot version: 0ee111aa6b75403f01f5d27b0a6736d30a2da28c
7:36:21 PM: Fetching cached dependencies
7:36:21 PM: Starting to download cache of 1.3GB
7:36:42 PM: Finished downloading cache in 21.837099733s
7:36:42 PM: Starting to extract cache
7:37:20 PM: Finished extracting cache in 37.513905123s
7:37:20 PM: Finished fetching cache in 59.872669571s
7:37:20 PM: Starting to prepare the repo for build
7:37:21 PM: Preparing Git Reference refs/heads/master
7:38:00 PM: Different functions path detected, going to use the one specified in the Netlify configuration file: 'lambda' versus '' in the Netlify UI
7:38:00 PM: No build command found, continuing to publishing
7:38:00 PM: Starting to deploy site from 'public'
7:38:01 PM: Creating deploy tree asynchronously
7:38:02 PM: Creating deploy upload records
7:38:15 PM: 8 new files to upload
7:38:15 PM: 0 new functions to upload
7:40:44 PM: Finished processing build request in 4m24.662005865s
7:41:38 PM: Starting post processing
7:41:39 PM: Post processing - HTML
7:45:05 PM: Post processing - redirect rules
7:45:05 PM: Post processing - header rules
7:45:06 PM: Post processing done
7:45:06 PM: Site is live

ということは？：損している

次の面でローカルでビルドする方法は損なのではないかと考える

• ローカルでわざわざビルドコマンドを叩いてビルドする必要がある
• Netlify側にデプロイするビルド時間がプラス
• 大量のPublicフォルダ内のファイルをPushする必要が発生

というわけでトータルで考えた時に手間に見合う価値があるか？と考えたら無い気がした。

しかしながら全員がそう感じるかどうかは個人の問題とも言える。

また、巨大なサイトであればNetlify側でビルドする時間が300分制限にひっかかる可能性もあるので

その場合はローカルビルドも選択肢に入るかと思う。

戻す手順

私の備忘録としてもローカルビルドからNetlify側のビルドへ戻す手順をメモしておく。

1. gitignoreファイル

こちら.gitignoreファイルからpublic/となっている項目のコメントを外す。

次のコマンド

git rm -r public/

これによりpublicフォルダを同期しないようになるはず。

2. netlify.toml

[build]内に

command = "npm run build"

こちらを復活させる(コメントアウトされていた)

これを入れるとNetlify側でビルドコマンドが走るようになる。

さらに[[plugins]]に次を追加

package = "netlify-plugin-gatsby-cache"

これでNetlifyの高速ビルド用のプラグインを追加。

3. (不要かも)Netlifyにログインしてビルドプラグインを追加

※私の過去の記事によると、上のtomlを記述すると未インストールのものは自動でインストールされるようなので次は不要かもしれないが、一応やっておいた

Pluginsのタブから

こちらをインストール。

そもそもビルドプラグインの機能自体がオフの場合は別の画面がでているかもしれない。

過去の記事も参照

【Netlify x Gatsby.js】ビルド時間を短縮！差分だけビルドする機能(Incremental Builds)を導入するテスト！

4. 一応確認

package.jsonのbuildコマンドを確認

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

ローカルビルド用にcross-envが付いているが、netlify側もこのままで良かった。変更していない。

その後ろ側に付いているオプションはincremental build用。

こちらも上に記載した過去の記事で解説しているので知らなければ参照。

完了

特に複雑な設定なしでこれでビルドが成功した。

初回はクリーンビルドになるのでビルド時間が長かったが次のような結果となった。

13分強。

毎回これだと流石に1日1記事アップできないが...

上のビルドコマンドは差分ビルドなので記事追加を試してみると

まだサンプル数が少ないがローカルでビルドしてもNetlifyでビルドしてもそれほど変わらないように見える。

しばらく運用して更にビルド時間が増えるようならまた考えたい。

さいごに

いつぞやのアップデートでNetlify自体がGatsbyの差分ビルドに対応しており記事を追加するだけなら以前よりビルド時間も短くなっているはずだ。

ローカルでビルドするとコマンドの手間も増える。

よって現状ではビルドはNetlify側に投げたほうが楽だろうという結論に達した。

今後は一月のビルド時間をチェックしながらどちらが良いかをもう一度検討したい。