Netlify Build Plugins を導入してNetlify のビルドプロセスを拡張する

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

前回の自分の記事でも書きましたが、 GatsbyJS + Netlify という環境で構築されている Gaji-Labo のコーポレートサイトをより効率的に更新できるように、最近サイトを動かす環境をアップデートすることを検討しています。

今回も、そんな検討の中で知った Netlify Build Plugins という Netlify の機能について知見をまとめたいと思います。

Netlify Build Plugins とは？

Netlify Build Plugins とは、静的ウェブサイトのホスティングサービスである Netlify 上でサイトのビルドを行う際に、ビルドのキャッシュやサイトのアセットの最適化など、通常のビルドに加えて様々な機能を拡張できるプラグイン群です。

例えば、以下のようなプラグインが用意されています。

• サイトのパフォーマンスを向上させるためにサイトで使用されている画像などのアセットの分析と最適化を行う
• Lighthouse を使用してサイトのパフォーマンスの検証を行う
• サイトマップ、RSSフィード、検索インデックスなどのコンテンツを生成する
• React 向けの静的サイトジェネレーターである GatsbyJS や Next.js のビルドのキャッシュを行い次回ビルドを高速化する

以前は導入したいサイトのリポジトリ上に netlify.toml という設定ファイルを追加して設定する必要があったのですが、最近のアップデートで Netlify の管理画面上からプラグインを導入できるようになりました。（引き続き設定ファイルから導入することもできます）

詳しくは公式のドキュメントもご参照ください。

プラグインの導入方法

今回は Gaji-Labo のコーポレートサイトと同様の環境の、 GatsbyJS で構築されたサイトのビルドを行う際を例に導入方法を紹介します。

また、前述の通り netlify.toml を介してプラグインを導入する方法もありますが、今回は Netlify の管理画面上からプラグインを導入する方法をご紹介します。

まずは Netlify の管理画面にアクセスし、上部メニューの Plugins タブを開きます。

導入できるプラグインの一覧と説明のリストが表示されます。この中から導入したいプラグインを選びます。

今回は例として Lighthouse という、ビルド時に Lighthouse による検証を行うプラグインを導入します。

Install を選択すると、現在持っているサイトの一覧が表示されるので、導入したい対象のサイトを選択します。

Install が完了すると、対象のサイトの管理画面の Plugins に導入したプラグインが表示されます。

この状態でサイトの Deploy タブから Trigger Deploy > Deploy Siteを選択すると、プラグインが導入された状態でのビルドが行われます。

Deploy Site を行い、ビルドログを確認してみると、サイトのビルドが終了した後に先程追加した Lighthouse プラグインが走っていることが分かります。

プラグインの削除方法

プラグインをサイトから削除したい場合、サイトの管理画面の Plugins から Option > Uninstall Plugin を選択します。

削除したプラグインは再度同じ工程で導入することが可能です。

まとめ

今回は Netlify Build Plugins の概要と、その使用方法をまとめました。

非常に導入が簡単かつ多様な機能のプラグインが用意されているので非常に便利だと感じました。案件で Netlify を使う時にも強力なサポートとなるのではないかと思います。