New Relicの基礎をProgateで学ぼう！（Synthetic編）

学習サービスのProgateで、<strong>「New Relic を使って外形監視をしてみよう」</strong>というNew Relic公認の第2弾学習コンテンツが公開されました。どんなコンテンツか見てみましょう！！

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

# 学習コンテンツについて
## 内容について
第2弾コンテンツでは、サンプルのSNSアプリケーションをAWSのEC2上に構築し、New RelicのSyntheticの使い方を学べる内容になっています。

Syntheticを使うことで、システムに対して実際に外側からアクセスして稼働状況を確認でき、以下のような様々な外形監視を行うことができます。

- Webサービスの死活監視
- 世界中からのアクセス速度測定
- クリティカルユーザージャーニーを確認するシナリオ監視
- APIエンドポイントの応答監視
- SSL証明書の期限監視
- リンク切れのチェック

今回のコンテンツでは、**Syntheticを使った幾つかの外形監視の設定方法をハンズオン形式で体験**することができます。ガイドを受けながらセットアップを体験できるため、初めてNew Relicを触る方でも問題なく進めることができます。

ちなみに第1弾コンテンツでは、New Relicの主要機能であるAPMとBrowserを使って、アプリケーションのエラーやパフォーマンスの劣化の原因をNew Relic 上で特定して、改善するまでの流れを体験できるコンテンツになっています。第1弾コンテンツについては以下のQiita記事が参考になります。

https://qiita.com/nr-mito/items/6ec377dc32eb9487f563

## Syntheticのモニタータイプについて
Syntheticは以下の7種類のモニタータイプを提供しており、今回のコンテンツでは、**Ping / Step monitor / Scripted browser**の3タイプの設定を体験できるコンテンツになっています。

- Ping: 指定した URL に対して HTTP(S)リクエストを送り、ステータスコードやレスポンスタイムを取得します
- Step monitor: コードレスで複数のユーザーステップを設定し、ユーザージャーニーをシミュレートして監視します
- Scripted browser: Selenium を用いてユーザーの操作をシミュレートし、複雑なユーザーフローや機能性をテストします
- Simple browser: 実際のブラウザ（Chrome や Firefox）を使用してページ全体の読み込みやパフォーマンスを確認します
- API test: API エンドポイントに対してリクエストを送り、応答の内容やパフォーマンスを検証します
- Certificate check: SSL 証明書の有効期限を監視し、期限切れを防ぎます。
- Broken links: 指定した URL 内のリンクをクロールし、リンク切れがないかをチェックします

SSL証明書とリンク切れの監視については別Qiita記事で紹介しているので、是非ご確認ください。

https://qiita.com/T_OMORI/items/b6e35e28a8bdcc0a0bfc#%E5%A4%96%E5%BD%A2%E7%9B%A3%E8%A6%96

## コンテンツ受講の前提条件
コンテンツを受講するための前提条件について紹介です。

### Progateのアカウント
Progateのアカウントを無料作成する必要があります。
GoogleやApple IDなどソーシャルログインにも対応しています。

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

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

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

### AWSアカウント
コンテンツ内でAWSのEC2を作成する手順があるため、AWSアカウントの作成も必要になります。

https://aws.amazon.com/jp/free/?gclid=EAIaIQobChMItPmzluriigMVqQ57Bx0lAicaEAAYASAAEgIDa_D_BwE&trk=58ef6015-6519-450b-96ea-258378c321895&sc_channel=ps&ef_id=EAIaIQobChMItPmzluriigMVqQ57Bx0lAicaEAAYASAAEgIDa_D_BwE:G:s&s_kwcid=AL!4422!3!618145042463!p!!g!!amazon%20web%20services!18137558856!140477907517&all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc&awsf.Free%20Tier%20Types=*all&awsf.Free%20Tier%20Categories=*all

### その他利用するツール
コンテンツを受講する端末に以下のツールのセットアップが必要になります。
各ツールのセットアップ方法はProgateのタスク内でご確認いただけます。

- Progate CLI
- Node.js 18.12.0 以降
- Puppeteer
- AWS CLI

# どんなコンテンツか見てみよう！
学習コンテンツを通して体験して欲しいため、本記事では概要レベルでコンテンツの内容を紹介します。

最初にProgate CLIを使って、Progateが用意している学習用のコード一式を端末にダウンロードする形になっています。

```bash:コマンド実行例
progate download **** --project-dir new_relic_app_synthetic_monitoring --name new_relic_app
```

NEW_RELIC_APPという名前でコード一式がダウンロードされます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/76cc6b10-63a1-83e0-5409-d4c190cd2fc4.png" width="50%">

EC2とSyntheticの監視対象になるSNSアプリケーションはCloudFormationで簡単にセットアップできるようになっています。
```bash:コマンド実行例
aws cloudformation deploy --stack-name new-relic-app --template-file ./cloudformation/new_relic_app.yml
```
EC2起動後、「http:// EC2 の IPアドレス :3000」にブラウザでアクセスし、SNSアプリケーションにアクセスできることを確認します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/a35736fa-91a0-f1b6-4903-09f97333946f.png" width="50%">

この後、3つのモニタータイプの設定を試していく流れになっています。

PingモニターではSNSアプリケーションのプロセスをワザと落として、外形監視に失敗する状態を作り、SyntheticによるPing監視のステータスの変化を確認することが出来るようになっています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/1504d049-37ba-c75a-17c0-b12dc0cccdbe.png" width="90%">

続いて、Step monitorを使って、ノーコードでユーザーのブラウザ操作を模倣した外形監視の設定の流れを体験します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/0575b8d2-1a5c-e01c-7799-778d1c9a71bf.png" width="80%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/96b897fd-001d-485d-6bed-a8bfdb8fa785.png" width="80%">

最後に、Scripted Browserを使って、JavaScriptで定義したユーザーのブラウザ操作を監視する設定を試す形になっています。

JavaScriptはサンプルが用意されており、サイトにアクセスして特定の画像をダウンロードできるか監視するスクリプトになっています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/00bc14dd-f98a-97d0-cfc3-a9217d85ef29.png" width="80%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/4e21b5a8-aa4c-e2f3-66c3-8258593ca4a2.png" width="80%">

# まとめ
本記事では、オンライン学習サービスのProgateで公開されているNew Relic公認の学習コンテンツ [New Relic を使って外形監視をしてみよう](https://app.path.progate.com/tasks/QFiyY6Yn3vf3j9M3KFKxC/preview)の学習を通して、New Relic Syntheticによる様々なタイプの外形監視の設定方法を学ぶことができることを紹介しました。是非、お試しください！！

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

# その他
New Relicでは、**新しい機能やその活用方法**について、QiitaやXで発信しています！
**無料でアカウント作成**も可能なのでぜひお試しください！

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

:::note info
無料のアカウントで試してみよう！
[New Relic フリープランで始めるオブザーバビリティ！](https://qiita.com/ktst79/items/5ee74b34e6adb8a7a6fa)
:::