IPアドレスから抽出した位置情報をマップに描写する

## はじめに
　[こちらの記事](https://qiita.com/nr-mito/items/7c79f1adfbd4aaeca39d)でIPアドレスから位置情報を抽出する方法について紹介させていただきました。今回は抽出した位置情報をマップに描写してNew Relicのダッシュボードに加えてみたいと思います！

:::note info
最新のアップデートの詳細はこちら。
[New Relic アップデート](https://newrelic.com/jp/blog/nerdlog/new-relic-update "New Relic アップデート")
:::

## 設定するのに必要なもの

### Status Widget Pack
　New RelicのダッシュボードはReact.jsで構築されたオープンソースのカスタムチャート Widgetの豊富なライブラリを提供しており、今回はNew RelicがGitHubで公開している[Status Widget Pack](https://github.com/newrelic/nr1-status-widgets)を使用します。

### NR1 CLI
　Status Widget PackをNew Relicのアカウントにデプロイする必要があり、デプロイするためにNR1 CLIというNew Relicが提供しているCLIツールを作業端末にインストールします。NR1 CLIのリファレンスは[こちら](https://developer.newrelic.com/explore-docs/nr1-nerdpack/)で確認できます。

### Gitとnpm
　Status Widget Packをデプロイするために[Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)と[npm](https://docs.npmjs.com/getting-started) を端末にインストールしておきます。

### MapboxのAPIキー
　Status Widget Packで提供しているマップ WidgetはIPアドレスから抽出した位置情報の経度と緯度からマップに位置情報を描写するにあたり、[Mapbox](https://www.mapbox.jp/)という位置情報サービスのAPIを利用しています。APIへの月間リクエスト数が0~100,000以内は無料で利用可能です。

## 設定の流れ

　それでは実際に設定をしていきます！

### NR1 CLIをインストール
　まず、作業端末にNR1 CLIをインストールします。

1. New Relicにログインします。
1. [Build on New Relic](https://one.newrelic.com/launcher/developer-center.launcher?pane=eyJuZXJkbGV0SWQiOiJkZXZlbG9wZXItY2VudGVyLmRldmVsb3Blci1jZW50ZXIifQ==) にアクセスします。
1. CLIを実行するために必要なNew RelicのAPIキーを選択もしくは新規作成します。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/bc115f44-89d0-213b-a9a6-c40953137af9.png)
1. 環境に適したインストーラーをDLします。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/0dfba8df-36a2-10e2-e839-5dd9fca6ec04.png)
インストールは非常に簡単で、Macはpkg、Windowsはexeのインストーラーでインストール。LinuxはcurlコマンドでインストールスクリプトをDLして実行することでインストールされます。今回はMacにインストールします。
1. インストール後、nr1 CLIにデプロイ先となるNew Relicのアカウント情報、APIキーを設定します。上の手順を進めることでアカウント名、APIキーは自動で補完してくれるため、コピーして実行するだけで設定できます。regionはNew Relicのアカウントが稼働しているregionを指定します（基本、US）を指定してください。
``` shell
nr1 profiles:add --name {account-slug} --api-key {api-key} --region {us|eu} 
```

　NR1 CLIの設定はこれで完了です。

### Status Widget Packをインストール
　続いて、Status Widget PackをNew Relicのアカウントにデプロイします。

　リポジトリを作業端末にcloneします。
```bash
git clone https://github.com/newrelic/nr1-status-widgets.git
```
　rootディレクトリに移動してnpm installで必要なnodeモジュールをインストールします。
```bash
cd nr1-status-widgets
npm install
```
　New Relicのアカウントにデプロイします。
```bash
nr1 nerdpack:publish
```

### MapBoxのAPIキーを取得
1. MapBoxに[サインアップ](https://account.mapbox.com/auth/signup)して無料アカウントを作成します。
1. サインアップ後、[アカウント管理TOPページ](https://account.mapbox.com/)に表示されているDefault public tokenの値をコピーします。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/76a7bf49-717f-d660-4a69-79fa2e2cd44d.png)

　MapBoxでの作業は以上になります。

### ダッシュボードにマップ Widgetを追加
　New Relicのサイトで作業していきます。

1. 左ナビゲーションから「Apps」をクリックします。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/63108b95-5f96-d56d-edf7-13ad72f8c49c.png)
1. 「Custom vizualizations」をクリックします。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/a2b28791-e019-f0f2-db99-2e244a821b8a.png)
1. 「Map Widgets」をクリックします。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/7127a470-e36b-021b-3f50-99d7e9ade7e9.png)
1. 「Map Box Access Token」にMabBoxのAPIキーを貼り付けます。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/8b869bca-4ac4-3229-c37f-c0f898d12d06.png)
1. ダッシュボードを追加するNew Relicのアカウントを追加します。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/0645edfe-23b8-0a31-53ad-f58e79e3b4c8.png)
1. 「Edit」をクリックします。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/640ff3e6-062a-fcc2-ebeb-40770d720cac.png)
1. IPアドレスから抽出した位置情報を取得するNRQLを入力して「Done」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/a4b17b27-5347-d3e9-177d-bec22bb2c95b.png)

1. 　「Add to a dashoboard」をクリックして、既存のダッシュボードもしくは新規作成するダッシュボードにマップWidgetを追加します。 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/60485bd4-76b9-0985-e3dc-76e5b2f03239.png)
1. Map Widgetが作成されました。 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/f6f3978f-69cc-660a-9797-0ceea507e467.png)

## NRQLについて

　NRQLの記述例を記載します。

```sql
SELECT
     // 必須: 「name:Attribute名」でエイリアスを設定する
    latest(ClientIP.city) as 'name:City',
     // 必須: IPアドレスから取得した緯度の値を設定
    latest(ClientIP.latitude) as latitude,
     // 必須: IPアドレスから取得した経度の値を設定
    latest(ClientIP.longitude) as longitude,
     // 任意
    latest(ClientIP) as ClientIP,
     // 任意
    count(ClientIP) as count
FROM
    Log
WHERE
     // 任意：　今回はnginxのアクセスログから位置情報を抽出
    application = 'nginx' FACET ClientIP,
    // 必須
    string(latitude, precision : 5) as 'lat',
    // 必須
    string(longitude, precision : 5) as 'lng'
since 24 hours ago
```

　上記NRQLを実行することでMap Widgetsに位置情報のアイコンが表示されるようになります。アイコンをクリックすると詳細情報が確認できます。スクリーンショットの赤枠で囲った箇所にNRQLで 「name:Attribute名」とエイリアス設定した値が表示されるようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/80318eb2-593f-ef5c-4a3e-88e19bc05ebd.png)

## Map Widgetsの表示をカスタマイズ
　NRQLの値からアイコンの色を変更することができます。例ではcount数が2以上の場合、赤色にアイコンを変更する設定を入れています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/4e138a68-70b1-509c-57c7-562ba77d4ba1.png)

ImageURLを設定することで独自のアイコンを付与することも出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/f82bc576-2245-1e9e-08fc-10c6fd8b5e39.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/53160f0e-18f8-f999-621e-61ff74269ffb.png)

## まとめ
　IPアドレスから抽出した位置情報をマップ上に描写してダッシュボードに加える手順の流れを紹介させていただきました。マップ上に描写するだけではなく、特定のしきい値を超えたロケーションの色を変更したり、画像で強調することが出来るため、例えば同一IPアドレスから異常なアクセス数があった際に強調しておくことで、「怪しいアクセス元から攻撃を受けてるかもしれない」など、視覚的に気付くことができるようになります。

:::note info
最新のアップデートの詳細はこちら。
[New Relic アップデート](https://newrelic.com/jp/blog/nerdlog/new-relic-update "New Relic アップデート")
:::
:::note info
無料のアカウントで試してみよう！
[New Relic フリープランで始めるオブザーバビリティ！](https://qiita.com/ktst79/items/5ee74b34e6adb8a7a6fa)
:::