Netlify Build Pluginsとは？

NetlifyでBuildをする際に、ビルド機能を拡張するための機能です。Pluginsを追加することによって、テストを実行したり、Cacheをしたり様々な機能を拡張することが出来ます。
執筆時点(2020.6.21)ではBetaの機能になります。
詳しくは以下をご覧ください。
Build Plugins | Netlify

試してみる

実際に当ブログで試してみました。
当ブログはGatsbyで作成しているので、Gatsby Cacheを使ってみました。このPluginsはGatsbyのCacheをNetlifyのBuild間で永続化して、ビルド時間を短縮するためのプラグインです。
Gatsby Cache

Build Pluginsを使用する手順

Build Image selection

Netlify Build Pluginsは最新の機能になるので、BuildImageを最新のものに更新しましょう。
Setting > Build&Deploy > Build Image SelectionでUbuntu Xenial 16.04 (default)になっているか確認してください。

PluginsをUIから追加

出来たら、Pluginsを追加します。Build PluginsはUIから簡単に追加することが出来ます。
UI上にないものは設定ファイルを書くことで追加出来ます。また、Pluginsは自作することも出来ます。詳しくは以下をご覧ください。
File-based configuration | Netlify

今回はNetlifyのUI上から追加したいと思います。
Pluginsのページにいき、Pluginsを追加していきます。


今回は冒頭で述べたGatsby Cacheを追加します。

Installをクリックして、追加したいSiteを選択すれば完了です！簡単ですね。
また、OptionsからPluginsのDocsなど詳細を確認できます。アンインストールもこちらから。

プロジェクトに設定ファイルを書く

Pluginsを追加したプロダクトに設定ファイルを書きます。Build Pluginsの設定はnetlify.tomlに書いていきます。

touch netlify.toml

//netlify.toml
[build]
 publish = "public"

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

build ・・・GatsbyではBuild時に静的ファイルがpublicフォルダに出力されるので、Build対象になるpublicを設定しています。
plugins・・・必要なpluginを設定します。ここではnetlify-plugin-gatsby-cacheを設定しています。インストールする必要はありません（Build Pluginによってはインストールが必要なものもあるので各ドキュメントを参照してください）。

以上になります。簡単に設定出来るのが、Netlify Pluginの魅力だと思います。

NetlifyにDeployする

検証のために当ブログを実際にNetlify経由でDeployしたいと思います。
ちなみに以前のBuild時に出力されたLogは以下になります。

12:19:18 AM: Site is live
12:20:16 AM: Finished processing build request in 3m19.061114045s

Netlify Build PluginでGatsby Cacheを設定してBuildを行うと以下のようなLog
が出力されます。

5:09:48 PM: ​
5:09:48 PM: ┌─────────────────────────────┐
5:09:48 PM: │        Netlify Build        │
5:09:48 PM: └─────────────────────────────┘
5:09:48 PM: ​
5:09:48 PM: ❯ Version
5:09:48 PM:   @netlify/build 2.0.10
5:09:48 PM: ​
5:09:48 PM: ❯ Flags
5:09:48 PM:   deployId: 5eef15a7f3b4c823960a9582
5:09:48 PM:   mode: buildbot
5:09:48 PM: ​
5:09:48 PM: ❯ Current directory
5:09:48 PM:   /opt/build/repo
5:09:48 PM: ​
5:09:48 PM: ❯ Config file
5:09:48 PM:   /opt/build/repo/netlify.toml
5:09:48 PM: ​
5:09:48 PM: ❯ Context
5:09:48 PM:   production
5:09:48 PM: ​
5:09:48 PM: ❯ Loading plugins
5:09:48 PM:    - netlify-plugin-gatsby-cache@0.3.0 from netlify.toml
5:09:48 PM: ​
5:09:48 PM: ┌────────────────────────────────────────────────────────┐
5:09:48 PM: │ 1. onPreBuild command from netlify-plugin-gatsby-cache │
5:09:48 PM: └────────────────────────────────────────────────────────┘
5:09:48 PM: ​
5:09:48 PM: Found a Gatsby cache. We’re about to go FAST. ⚡️
5:09:48 PM: ​
5:09:48 PM: (netlify-plugin-gatsby-cache onPreBuild completed in 505ms)
5:09:48 PM: ​
5:09:48 PM: ┌────────────────────────────────────┐
5:09:48 PM: │ 2. build.command from netlify.toml │

Buildの前にgatsby cacheが機能しているのがわかります。最終的なビルド時間は以下のようになりました。

5:10:54 PM: Site is live
5:11:42 PM: Finished processing build request in 2m28.534661971s

検証したサイトのページ数が少ないので、あまり大きな差は出ませんでしたが、ビルド時間が短縮されました！

まとめ

Netlify Build Pluginsはとても簡単にUI上から設定が行えるので是非試してみてください！
Gatsby×Netlifyで高パフォーマンスなWebサイト制作がどんどん簡単に行えるようになっていきますね！
今後のNetlifyに期待です！