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 タブを開いた状態のキャプチャ画像](https://wp.gaji.jp/wp-content/uploads/2020/07/5ea1236b1925431c7d15195623754973-740x311.jpg)
まずは Netlify の管理画面にアクセスし、上部メニューの Plugins
タブを開きます。
導入できるプラグインの一覧と説明のリストが表示されます。この中から導入したいプラグインを選びます。
![Plugins タブのプラグイン一覧で Lighthouse プラグインの説明と Install ボタンが表示されている箇所のキャプチャ画像](https://wp.gaji.jp/wp-content/uploads/2020/07/ffe86d46bfe957c80c310c47b694e7e5-740x78.png)
今回は例として Lighthouse
という、ビルド時に Lighthouse による検証を行うプラグインを導入します。
![プラグインの導入先サイトの選択画面ののキャプチャ画像](https://wp.gaji.jp/wp-content/uploads/2020/07/8eed745703fb12629940725a0b027ea1-740x270.png)
Install を選択すると、現在持っているサイトの一覧が表示されるので、導入したい対象のサイトを選択します。
![サイトにインストールされたプラグイン一覧のキャプチャ画像](https://wp.gaji.jp/wp-content/uploads/2020/07/ba74d55ce1374101e3b961d930af1e36-740x145.png)
Install が完了すると、対象のサイトの管理画面の Plugins
に導入したプラグインが表示されます。
この状態でサイトの Deploy
タブから Trigger Deploy > Deploy Site
を選択すると、プラグインが導入された状態でのビルドが行われます。
![ビルドログで lighthouse プラグインが走っている様子](https://wp.gaji.jp/wp-content/uploads/2020/07/8a4d4e8ba402fd791a69c99adf58d5fd-740x317.jpg)
Deploy Site を行い、ビルドログを確認してみると、サイトのビルドが終了した後に先程追加した Lighthouse プラグインが走っていることが分かります。
プラグインの削除方法
![プラグイン一覧画面の Lighthouse プラグインの Unstall plugin ボタンを選択している状態のキャプチャ画像](https://wp.gaji.jp/wp-content/uploads/2020/07/18cae8d8a1b624ad62166f6008f9b9dd-740x149.png)
プラグインをサイトから削除したい場合、サイトの管理画面の Plugins
から Option > Uninstall Plugin
を選択します。
削除したプラグインは再度同じ工程で導入することが可能です。
まとめ
今回は Netlify Build Plugins の概要と、その使用方法をまとめました。
非常に導入が簡単かつ多様な機能のプラグインが用意されているので非常に便利だと感じました。案件で Netlify を使う時にも強力なサポートとなるのではないかと思います。
Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています
Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。
現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい!
パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!
お問い合わせしてみる!