本記事はAaron BassettによるJumpstart your Jamstack monitoring Blogのアップデート抄訳記事です。
高速なユーザー体験や洗練されたヘッドレスCMSを実現するためJamstackでサイトを構成されている方はNetlifyを構築と配信の基盤に利用されている事も多いと思います。
Netlifyは、必要なリソースの構築とデプロイのワークフローを簡潔にすることで開発エンジニアのみなさんがより迅速に、スケーラブルなサイトを創造する支援をしています。我々New Relic自身も開発エンジニアの仕事を楽にしてあげたいという共通の想いからNetlifyのファンです。
高速な表示が売りのJamstackサイトであっても計測は重要です。ワンショットのCore Web Vitals計測ではなく実際に利用しているユーザー体験を継続的に、定量的に新しいデプロイのたびにユーザー体験がどう変化しているか観測しましょう。
そのために我々はNetlifyを利用しているユーザーのためにプラグインとDashboardsを作成しました。このプラグインによって以下のことが可能になります。
- ユーザー体験を計測するNew Relic Browser Agentを自動インストール
- Browser Agentを通してJamstackアプリケーションでパフォーマンス状態を観測する
- 新しいデプロイが本番環境サイトのパフォーマンスメトリクスにどのような影響を与えるのか理解する
- サイトの LCP : Largest Contentfull Paint, FID : First Input Delay, CLS : Cumulative Layout Shift などGoogleのCore Web Vitalsを計測する
- ユーザーに影響が及ぶ前にエラーを発見し、修正する
また、Add DataのNetlify Buildsに用意されたダッシュボードとアラートを活用することで以下のことが可能になります。
- Netlifyでビルドが発生した事を自動的にNew Relicに通知
- NetlifyでのBuild失敗の検知
- Javascript Errorsが増加した場合の検知
- Page Load Time Degradesの検知
Netlify New Relicプラグインのインストール
Netlify用プラグインをインストールするには、New Relicにログイン（または無料アカウントに登録）し、New Relic API Keyから License KeyとBrowser Keyを作成します。
方法1 : Netlify UI からのインストール
ご自身のNetlifyアカウントからplugins directoryへ移動し"New Relic"を検索してください。
"Install"を選択しプラグインをインストールするサイトを選択します。
次にNew Relicにデータを送信するために必要な環境変数を設定します。 Netlify UIから Site settings > Build and deploy > Environmentへ移動し以下の環境変数を設定してください。
その他利用可能な環境設定変数の一覧はこちらのドキュメントを参照してください。
方法2 :netlify.toml設定ファイル経由でのインストール
プラグインは以下コードを対象環境の ntelify.toml ファイルに追記する事でもインストールできます。
[[plugins]]
package = "@newrelic/netlify-plugin"
[plugins.inputs]
newrelicAccountId = "123456"
newrelicLicenseKey = "12345678901234567890"
newrelicBrowserLicenseKey = "ABCD-0987654321"
newrelicAppId = "123456789"
enableBrowserMonitoring = truenewrelicAccountId, newrelicLicenseKey, newrelicBrowserLicenseKey, newrelicAppId および newrelicAccountId の各値は方法1と同様にご利用のNew Relic環境へ合わせてください。
一般的なKeyの扱いと同様、New Relic各種 API Keyの露出を避けたい場合もあると思います。 その場合はプラグインのパッケージのみを指定し、Keyなど各種パラメータは環境変数や方法1で解説しているNetlify UIからの環境変数指定を実施する形とすることも可能です。
上記サンプル以外の件今日設定変数の一覧は方法1と同様にこちらのドキュメントを参照してください。
New RelicにおけるNetlifyのパフォーマンスダッシュボードとアラート設定
New RelicのAdd Data画面から"Netlify"を検索します。 Dashboardタブから"Netlify"を選択し画面の指示に従いインストールを完了させましょう。またAlertsタブからは"Netlify Builds alert policy"でアラートのテンプレートをインストールできます。
New RelicにおけるNetlifyの詳細ログの閲覧
同様にAdd dataからNetlify Traffic and Function Logsのダッシュボードを入手するとログ連携したNetlifyの詳細ログが見やすく表示できます。
*NetlifyからNew Relicにログを送信する詳細についてはNetlify公式のドキュメントを参照してください。
本Blogで説明されていない追加機能や設定オプションについてはプラグインのドキュメントをご確認ください。
次のステップ
New Relicアカウントをお持ちでない場合は、サインアップしてください。無料アカウントには、毎月100GBの無料データ取込み、1名の無料フルアクセスユーザー、および無制限の無料ベーシックユーザーが含まれます。
本ブログに掲載されている見解は著者に所属するものであり、必ずしも New Relic 株式会社の公式見解であるわけではありません。また、本ブログには、外部サイトにアクセスするリンクが含まれる場合があります。それらリンク先の内容について、New Relic がいかなる保証も提供することはありません。
