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


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

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

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

Netlify Build Plugins とは?

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

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

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

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

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

プラグインの導入方法

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

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

Netlify の管理画面で Plugins タブを開いた状態のキャプチャ画像

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

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

Plugins タブのプラグイン一覧で Lighthouse プラグインの説明と Install ボタンが表示されている箇所のキャプチャ画像

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

プラグインの導入先サイトの選択画面ののキャプチャ画像

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

サイトにインストールされたプラグイン一覧のキャプチャ画像

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

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

ビルドログで lighthouse プラグインが走っている様子

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

プラグインの削除方法

プラグイン一覧画面の Lighthouse プラグインの Unstall plugin ボタンを選択している状態のキャプチャ画像

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

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

まとめ

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

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

Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています

Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。

現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい!

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!

投稿者 Ishigaki Shotaro

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。