“Hello, New Relic!” 基礎中の基礎が学べるハンズオンをやってみた #newrelic

無償の公式ハンズオンで APM や Browser、Synthetics、NRQL など New Relic の基本的な使い方を学びました。APM を始めたい開発者は当然ながら、なかなかコードをさわる機会のないインフラエンジニアのためとも言える素敵なハンズオンをレポートします
2021.12.17

本記事は New Relic Advent Calendar 2021 の 17 日目の記事です。

New Relic が公開しているトレーニングサイト、New Relic University (NRU) には、ウェビナーやハンズオンなど多くのコンテンツが収められています。

その中で今回、「New Relic 最初の一歩」ともいえそうなハンズオン「Hello, New Relic!」をやってみたので、その冒頭部分だけレポートします。

何が学べる?

「Hello, New Relic!」は以下の 5 つの Lab で構成されていて、New Relic の基本を順に学んでいくことができます。

  • Lab 1: Instrumenting with Agents
    • ハンズオン環境(EC サイトのテストアプリ)を Glitch.com 上に立ち上げ、New Relic APM と Browser (RUM) を組み込む
  • Lab 2: Exploring Your Data with NRQL
    • 上記アプリから収集されたデータを NRQL(検索言語)を使って検索、ダッシュボード作成
  • Lab 3: Custom Instrumentation
    • ビジネス KPI などのカスタムメトリクスを組み込み可視化
  • Lab 4: Alerting Best Practices
    • SLO ダッシュボードを作成しアラートを仕込む
  • Lab 5: True Availability Using Synthetics
    • 「料理の注文をする」という一連の流れを Synthetics で監視

いわゆる「Hello World」が APM、というところに、New Relic の本質が出ていますね!
インフラエンジニア出身の身としては、つい「New Relic Infrastructure を設定してメトリックを〜」と考えてしまいがちなので、アプリケーション中心のハンズオンは助かります。

ちなみに本ハンズオン(というか NRU 全体)は英語のみのコンテンツなのですが、あまり難しい言い回しなどは出てこないのと、動画と文章の両方で手順を説明してくれるので、Google 翻訳や DeepL などの翻訳アプリ片手に進めていけるかと思います。

実行環境:Glitch.com

上述していますが、このハンズオンは Glitch 上で実行します。
ぼくはこのサービスの存在をこれで知ったのですが、オンライン IDE と実行環境が無料でも使えてしまうという、とても素敵なサービスでした。

ただし、無料アカウント(Free プラン)では以下の制限があります。とはいえハンズオン環境としては十分以上ですね!

  • プロジェクトとそのコードは public 状態で、誰でも検索可能
    • その場合でも一部、API キーなどの機密情報などが記述できるファイルは非公開
  • Web アプリケーションは実行後 5 分でスリープされる
    • 静的コンテンツは常時アクセス可能

準備

ハンズオンを開始する前に、以下の二つのアカウントを準備しておきましょう。まだ持っていなければ、両方とも無料で開始できます。

  • Glitch
  • New Relic

Glitch ですが、Firefox ではコンテクストメニューが表示されないなど不安定なところが見られたので、Chrome ブラウザを使うとよさそうです。1

また、New Relic の API キー(ライセンスキー)も必要になりますので、以下のドキュメントを参照しつつ用意しておきましょう。Lab 1 の動画でも手順が説明されています。

ちなみに、New Relic University は New Relic アカウントでサインインが可能です。
サインインしておくと履歴が残り、あとから何を受講したか分かる様になるため、ハンズオンを始める前にやっておきましょう。

Lab 1: Instrumenting with Agents

では実際に手順を進んでいきたいと思います。 Lab 1 は、以下のステップに分かれています(以後も似たような感じで進んでいきます)。

  • 動画を見る
  • LAB 1: FoodMe を実行
  • LAB 2: Deploying the Browser Agent を実行

Lab の中に LAB があるの、ちょっと分かりにくいですね!
でも慣れれば大したことはないので、そういうものということでそのまま進んでいきましょう。

ちなみに Lab のほうは Lesson と呼ばれていることもあるので、この二つは単なる表記揺れという理解でいいと思います。

LAB 1: FoodMe App

LAB 1 の手順は以下のとおりです:

  1. Glitch のアカウントを用意(済み)
  2. 用意した Glitch アカウントにテストアプリのコード群を複製
  3. コード内のファイル .env を編集して New Relic ライセンスキーを埋め込む
  4. ファイル package.json を修正し New Relic 上で参照するアプリケーション名( FoodMe )をセット
  5. テストアプリにブラウザでアクセス
  6. テストアプリを操作してみる --> 計測データが New Relic に送信されることを確認

2.については、手順に記載されている URL を踏むことで自動的に clone されます。適当なプロジェクト名が自動的に付けられるので、一瞬分からなくなりますが、そういうものと思ってください。
もちろん後から変更が可能ですが、既に Glitch 上に存在している名前と重複はできない仕様みたいです。

プロジェクトを開くとこんな感じで、実際の実行画面を右側で見つつ、左側でコードをいじることが可能です。

さっそく.envファイルを修正し、ライセンスキーを書き込んでみましょう(ステップ 3.)。
ちなみに前述しましたが、このファイルに書き込まれたデータは非公開となるのでご安心ください。

4.は、見たところ既に FoodMe に書き換わっているのでそのまま手を付けず。Glitch の右側に表示されている FoodMe の画面で、適当に注文してみます。

最終的に「Purchase」をクリックしたら、New Relic の画面の方を見てみましょう。

何かしらデータが飛んできてますね!
現時点で、FoodMe アプリのサーバアプリケーション側の動作が New Relic で追えるようになっているはずです。2

LAB 2: Deploying the Browser Agent

このままいろいろ見て回ってもいいんですが、途中なので先に進みましょう。続いて LAB 2 に進みます。
手順に従ってリアルユーザーモニタリング(RUM)のための Browser Agent (JavaScript スニペット)を仕込みましょう。これで、購入者のブラウザで動作している JavaScript の動作も併せて追えるようになるはずです。

+ Add more data をクリックし、 Browser metrics > New relic Browserをクリックし、プルダウンメニューで New Relic のアカウントを選択します。
動画とはちょっと UI が変わっているのですが、まず「Copy/Paste Javascript code」ラジオボタンを選択し、

Name your app で Yes. を選択し、 FoodMe を選択して Enable をクリックします。

JavaScript スニペットが生成されるので、それをまるごとコピーし、Glitch に戻って、app/index.htmlの 6 行目(空行になっているところ)に貼り付けます。

そしたらまた、FoodMe アプリで何か注文してみましょう。
Browser でもデータが取れていることが分かりますね!

この後は?

取りあえず何度かトラフィックを生成して( = FoodMe で買い物してみて)データを貯めた後、New Relic の画面をいろいろと見て回ってください。 APM と Browser は互いに「同じアプリ」としてリンクされているので、データを統合的に観測できることがわかると思います。

その後ハンズオンの Lab 2, Lab 3 ... と進んでいくことで、以下を習得できます。ここから先は是非ご自分で手を動かしてみてください!

  • NRQL を使ってデータを縦横無尽に検索する
  • コード内で任意のメトリクス(custom data)を New Relic へ送信する方法
  • NRQL を使って SLO を計測しアラートを設定
  • Synthetics 監視を設定し、EC サイトの注文手順を定期的に実行し観測する

まとめ

New Relic の基本を学べる NRU ハンズオン "Hello, New Relic!" をやってみました。
手順もさることながら、予め New Relic が半分組み込まれた状態のコードが見られたり動かせたりするのは、初学者としてはうれしいのではないでしょうか。

NRU には他にも様々なコンテンツがありますので、この年末で時間に余裕のある方は、この機会に是非やってみてください!

脚注


  1. いちおう サポートブラウザ の中に Firefox は入っているのですが。。 
  2. 本来であれば、この手順の前に New Relic APM モジュールのコードへの組み込みが必要ではあるんですが、ここではそこは省略(作業済み)になっています