Gatsbyjs でブログを作成する度に、Netlify で build するようにしています。

コンテンツの量が増えると、build 時間がかかるようになり、先日 1 回の build 時間が 10 分を超えてしまいました。

Netlify の無料 build 時間は 300 分です。

無料枠を超えてしまうと、build 時間が 800 分になる代償として 7 ドル徴収されてしまいます。

image2

無料枠を超えないようにするために、1 回の build を短縮するにはどうすればよいのでしょうか?

今回は、Netlify の build 時間を短縮する方法を紹介します。

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

cross-env は、ローカル環境や、ステージング環境、本番環境で環境変数を切り替えてくれます。

コマンドを入力し、cross-env をインストールします。

npm install --save cross-env

Netlify に netlify-plugin-gatsby-cache をインストールする

Netlify は、Gatsby のキャッシュを保持するプラグインを提供しています。

Netlify にログインし、Plugins をクリックします。

image3

Gatsby cache の『install』をクリックします。

image4

インストールするサイトを選択します。

image5

インストールします。

package.json を修正する

開発しているサイトのpackage.jsonを開きます。

scriptsbuild"gatsby build"から"cross-env GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --log-pages"へ変更します。

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

Netlify にキャッシュを保持するため、1 回目の build 時間は短縮されません。

2 回目以降、build 時間が短縮されます。

1 回目の build

image6

2 回目の build

image7

build 時間が 85%短縮することができました。

Netlify の build 時間が長い方は、ぜひ試してみてください。

ブログ一覧