3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめに

この記事はNew Relic Advent Calendar 2024の12日目の記事です

普段はWebバックエンドを中心に勉強しています
今回はProgate Pathを利用してNew Relicに入門してみようと思います
New Relicの魅力や活用方法を初心者視点でお伝えします

注意事項
初めてNew Relicを触るため、記載内容に誤りがある場合があります
ご了承のうえ、優しくご指摘いただけると嬉しいです

New Relicとは

New Relicはアプリケーションのパフォーマンスをリアルタイムで監視・分析するためのツールです
開発者や運用担当者が、エラーやパフォーマンスの問題を素早く特定して解決できるように設計されています
モニタリング対象はWebアプリケーション、モバイルアプリケーション、インフラストラクチャなど多岐にわたり、視覚的でわかりやすいダッシュボードを提供しています

環境構築

バージョン一覧

今回使用した開発環境のバージョンは以下の通りです

名称 version
OS macOS Sequoia 15.2
node 23.3.0
npm 10.9.2
mysql 9.0.1

Progate Pathの指示に従いセットアップを進めました
セットアップ後 http://localhost:3000/ にアクセスし、以下の画面が表示されれば成功です
image.png

New Relicのセットアップ

New Relicのサインアップ

New Relicのアカウントを作成

登録後、以下の画面が表示されれば完了です
image.png

New Relic APMの導入

New Relic APM(Application Performance Monitoring)はアプリケーションのパフォーマンスやエラーを監視・分析するツールです
今回はNode.js環境で実行されるExpressのサーバにNew Relic APMを導入します

New Relic APMのセットアップ

Node.js用のAgentをインストール
ライセンスキーを取得

この時点ではTest the connectionに失敗します
コネクションを有効化するためにアプリケーションにライセンスキーを渡す必要があります

バックエンドサーバにAPMを導入

newrelic と @types/newrelic をインストールする

$ npm install newrelic -w api
$ npm install -D @types/newrelic -w api

newrelicのインポート

api/src/server.ts
import "newrelic";

api/.env と api/.env.test の NEW_RELIC_LICENSE_KEY に取得したライセンスキーを設定

api/.env
NEW_RELIC_LICENSE_KEY="ライセンスキー"

バックエンドサーバの再起動

$ npm run start:api

Test the connection の画面に戻り Test Connection を実行するとStatusがSuccessfulになります

フロントエンドサーバにAPMを導入

Browser monitoringからブラウザモニタリング用のユニペットを取得
front/index.html の head タグ内にユニペットを記載

front/index.html
<!DOCTYPE html>
<html lang="en">

<head>
(取得したユニペットを追加)
</head>

フロントエンドサーバを再起動

$ npm run start:front

これでフロントエンド、バックエンドのAPMの設定が完了しました
アクセス時の様々なデータを収集出来るようになりました

APM & Service
image.png

Browser
image.png

New Relicで出来ること

ここから先は有料コンテンツになります
Progateを使ってNew Relicを学び、実際にどのような効果が得られるのかをご紹介します

エラーの発見

New Relic のダッシュボードでは、Error rate や Top 10 error messages を通じて、アプリケーションで発生しているエラーを一目で確認できます。

image.png

いつ・どこで・どのような理由でエラーが発生しているのかをリアルタイムで把握できるため、迅速な対応が可能です
以下の場合、特定のAPIエンドポイントで頻発していたエラーについて原因を調査し、修正することが出来ました

image.png

リクエストパラメータとレスポンスの詳細を確認することで、開発環境で同じエラーを再現できます
このように再現性が高いと、デバッグに必要な時間が大幅に短縮されるだけでなく、エラー修正後の効果検証も確実に行えます
エラー発見から修正までの流れが視覚的に分かりやすいため、チーム全体で課題解決に取り組みやすい環境を作れます

パフォーマンスの改善

New Relicはパフォーマンス改善にも大きな力を発揮します
以下のようにエンドポイントごとのレスポンスタイムを確認できます
GET /api/posts トランザクションに約130msと、比較的長い時間がかかっていることが分かります
image.png

Transaction traceを展開すると、N+1問題が発生していることが判明しました
この問題は、データベースへの不要なクエリが大量に発生してしまう非効率な処理パターンです。

image.png

N+1問題を解消するため、一度のクエリで必要なデータを全て取得するようにコードを修正しました
その結果、レスポンスタイムは12msにまで改善しました

image.png

まとめ

New Relicは、エラーやパフォーマンス問題を迅速に特定し、解決するための強力なツールです
本記事では、Progateで学んだ基本的な使い方をもとに、以下のポイントを解説しました

  • エラーの特定と修正
    Error rateやエラーメッセージの可視化により、どこで問題が発生しているかを容易に把握可能
    また、記録された詳細なエラーデータを活用することで、再現性の高いデバッグを実現

  • パフォーマンスの改善
    トランザクションやレスポンスタイムを分析し、ボトルネックとなる箇所を効率的に特定可能
    さらに、実際の修正による効果を数値で確認できるため、改善の成功を明確に評価出来る

New Relicは初心者にも扱いやすく、実際の運用現場でも即戦力になるツールです
さらに、現在Progate Pathが12月31日まで無料で利用可能です!
この機会に、Progateを活用してNew Relicの基礎を習得し、アプリケーション開発や運用の効率化に役立ててみてはいかがでしょうか?

無料期間を活かして、新しいスキルを習得する絶好のチャンスです!まずは始めてみましょう!

image.png

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?