New Relicの基礎をProgateで学ぼう！（APM/Browser編）

# はじめに
オンライン学習サービスのProgateで、<strong>「New Relic を使ってアプリケーションを改善しよう」</strong>というNew Relic公認の学習コンテンツが無料で公開されました！！

https://app.path.progate.com/tasks/muzHlTIVNZkSxom_eL_be/preview


New Relicの主要機能であるAPMとBrowserをアプリケーションに導入するまでの流れと、<strong>導入後に発生するアプリケーションの性能劣化やエラーの原因を特定して、ソースコードの修正まで、エンジニアの実務に即した体験ができる実践的なコンテンツ</strong>になっており、なんと無料で学習することができます。

しかも、GitHub Codespacesを活用してアプリケーションの実行環境の構築が不要で学習することできるので、気軽に利用できるコンテンツになっています。もちろん、アプリケーションをダウンロードして、ローカル環境を使って学習を進めることもできます。

本記事で、どのような学習コンテンツか紹介します！！

:::note info
[New Relic株式会社のQiita Organization](https://qiita.com/organizations/newrelic)では、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。
:::

# 前提条件
まず、コンテンツを学ぶための前提条件について紹介です。
## 必須条件
ProgateとNew Relicのアカウント登録が必要になります。
それぞれ無料でアカウントを作ることができます。

New Relicは利用ユーザー数と転送データ量がライセンスの構成要素ですが、なんと全機能使い放題のユーザー1名と100GBのデータ転送が無料で利用できます。登録フォームへの入力だけですぐに使えるのですぐに登録できます。

https://newrelic.com/jp/sign-up-japan

https://qiita.com/ktst79/items/5ee74b34e6adb8a7a6fa

https://prog-8.com/account/sign_up

## オプション

### GitHub Codespacesでアプリケーション実行環境を用意する場合（オススメ）
GitHub アカウント（無料）の登録が必要になります。
GitHub CodeSpacesを利用することでアプリケーション実行環境を用意する時間が省けるのでオススメです。本記事ではGitHub CodeSpacesを利用します。
 
https://github.com/signup?source=login

### ローカル環境でアプリケーションを動かす場合
ローカルに環境を構築する場合の要件は[こちら](https://app.path.progate.com/tasks/muzHlTIVNZkSxom_eL_be/preview#%E5%89%8D%E6%8F%90%E6%9D%A1%E4%BB%B6)でご確認ください。

# アプリケーションの構成
今回使用するアプリケーションはExpress(Node.js)のAPIとReactのフロントアプリのSPAアプリケーションで構成されており、DBはMySQLを使用しています。APIにNew Relic APM、ReactのフロントアプリにNew Relic Browserを導入して、アプリケーションを改善する方法を学びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/6c83e58e-29b8-6093-cde7-ae0892011842.png)


# どんなコンテンツか見てみよう！！
それでは、どのような流れで学習できるか見ていきます！！

## Progateのアカウント作成
まずは、Progateのアカウントを作成します。
[「New Relic を使ってアプリケーションを改善しよう」](https://app.path.progate.com/tasks/muzHlTIVNZkSxom_eL_be/preview)の学習コンテンツにアクセスして、ページ右側にある「会員登録」をクリックした先のページでアカウントを作成します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/e2db1923-af2e-bb4e-de85-42adab8e89cb.png" width="50%">

## Codespaces 起動
アカウント作成→Progateにログイン後にもう一度、[コンテンツ](https://app.path.progate.com/tasks/muzHlTIVNZkSxom_eL_be/preview)にアクセスして、「はじめる」をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/ace85256-e5c3-19a7-90ff-7491bcf30d1a.png" width="85%">
「オンラインIDEを起動する」→「Codespaces で開発環境を起動する」をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/31ee7c14-aa9d-4e03-5e05-3f1cbfe688dd.png" width="60%">
「Create new codespace」をクリックします。
※GitHubにログインしてない場合はログイン後にクリック。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/5d818945-e3f1-50f3-b774-5676c84a8df0.png" width="60%">
実行環境が立ち上がるまで数分待ちます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/d2d07e94-7df3-c00c-d417-347f7901e290.png" width="70%">
環境が立ち上がると、IDEとターミナルを使えるようになります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/445fb609-424a-a634-a25b-c4f3c11882ea.png" width="６0%">

## アプリケーションのセットアップ
Codespacesの環境が立ち上がったら、アプリケーションのセットアップと起動テストまで確認します。詳細は[セットアップ手順](https://app.path.progate.com/tasks/muzHlTIVNZkSxom_eL_be/pages/setup)をご確認ください。

## New Relicのセットアップ
アプリケーションが動く確認が取れたら、[New Relicのセットアップ手順](https://app.path.progate.com/tasks/muzHlTIVNZkSxom_eL_be/pages/new-relic-setup)の案内に沿って、New Relicのアカウント作成後にアプリケーションへAPM、Browserのエージェントをガイドを見ながら、導入します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/6ed0d82c-5dbc-15ff-accd-5c599d93a15d.png" width="60%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/f2c575e0-35da-e47c-0702-72922be0a2bd.png" width="60%">

ここから先は学習コンテンツを通して体験して欲しいため、詳細の紹介は割愛しますが、APM/Browserを導入することでNew Relicの画面でアプリケーションのパフォーマンスやエラーの状態を確認でき、原因を特定して、コードの修正まで体験することができます！！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/328e3d54-84d7-673c-549b-1709603b2aee.png" width="90%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/2f080038-ba97-e6fe-7b16-7f4f561903dd.png" width="90%">

# その他のProgate New Relic タスク
https://qiita.com/nr-mito/items/868fd66746b28007095c

# まとめ
本記事では、オンライン学習サービスのProgateで公開されているNew Relic公認の学習コンテンツ <strong>[「New Relic を使ってアプリケーションを改善しよう」](https://app.path.progate.com/tasks/muzHlTIVNZkSxom_eL_be/preview)</strong> で、アプリケーションへのAPMとBrowserのセットアップだけではなく、New Relic上で観測しているアプリケーションのデータからエラーやパフォーマンス劣化を発見、原因を特定して、コードを修正するまで学べることを紹介いたしました。

エンジニアの実務に即した体験を体系的に学べる実践的なコンテンツになっており、学習環境の構築が不要で無料で学ぶことができます！！

是非、お試しください！！

:::note info
無料のアカウントで試してみよう！
[New Relic フリープランで始めるオブザーバビリティ！](https://qiita.com/ktst79/items/5ee74b34e6adb8a7a6fa)
:::
:::note info
[New Relic株式会社のQiita Organization](https://qiita.com/organizations/newrelic)では、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。
:::