【Heroku 監視】Graphite、Grafana、StatsDを使用してHerokuアプリを監視する方法

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/d93a96ca-affa-b081-221c-0c2731d2c68c.png)

この記事では、Hosted Graphiteと呼ばれるMetricFireのHerokuプラグインを使用してHerokuアプリを監視する方法を解説していきます。 アプリのメトリクスに加えて、HerokuアプリにStatsDも追加する方法も説明します。 次に、これらすべてのメトリクスをMetricFireのGrafanaダッシュボードに統合します。 これにより、Herokuのアプリリソースと、コードで指定した統計情報を追跡および測定できます。 実際どのようになるかは、上の画像をご参考ください。

#前提条件
HerokuアプリでのMetricFireのセットアッププロセスのみを今回は説明します。これは、HerokuCLIと一緒にHerokuアプリが既に実行されていることを前提とします。 この記事ではStatsDの設定方法を示していないため、StatsDに慣れていない場合は、[StatsDの記事](https://www.metricfire.com/blog/statsd-gauges-counters-and-timers-on-metricfire/?GAID=2038175526.1567400116)を確認してください。 Grafanaの使用については、[基本から上級まで、Grafanaダッシュボードに関する記事](https://qiita.com/MetricFire/items/f7ac1c9edf33eac48772)をチェックしみてください。


#[MetricFire](https://www.metricfire.com/japan/?GAID=2038175526.1567400116&utm_source=blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=How%20to%20Monitor%20a%20Heroku%20App%20with%20Graphite%2C%20Grafana%20and%20StatsD)
まず、HerokuのAPIキーを取得するためにMetricFireアカウントが必要になります。わずか数分で、[14日間の無料トライアル](https://www.hostedgraphite.com/accounts/signup-metricfire/?signup=japan&utm_source=blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=How%20to%20Monitor%20a%20Heroku%20App%20with%20Graphite%2C%20Grafana%20and%20StatsD)を取得できます。 ログインすると、下の画像のように、[Add-Ons]> [Add-Ons]> [Heroku]に移動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/c30dc26c-a1ad-529e-ab54-795950e7b38f.png)

MetricFireは、時間を節約するのに非常に優れています。実行する必要のあるコマンドはすでにレイアウトされており、下の画像でコピー先を確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/6876b90b-eda4-43da-84a9-ab3fc432a0da.png)

このコマンドでは、アプリ名を正しく入力する必要があることに注意してください。後でこのコマンドを実行するときに、<app_name>をHerokuのアプリ名に置き換えるだけです。

#Herokuアドオンのセットアップ
今回使用するシンプルなHerokuアプリはDjangoで実行されています。 コードはPythonで作成されますが、同じ概念を別の言語の他のフレームワークに適用できます。 アプリの概要は次のとおりです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/c067b66a-2089-5e16-90ae-a570eb71ee74.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/f869e7b1-11cb-b2d2-13bc-0ab7203480d2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/31057c33-a786-108a-abe4-f89579d08d60.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/4076e709-edef-099b-ec67-ffce9247891a.png)

レイアウトは非常にシンプルで簡単にステップを踏むことが出来、下の画像はHerokuでの実際の外観になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/122c7aba-0246-e28a-aca3-3ac85f4e51b8.png)

それでは、以前にMetricFireアカウントから取得したコマンドを使用してHerokuアドオンをアクティブ化しましょう。 下の画像でアウトプットを見ることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/397c1294-ea6d-c412-9b8f-1ab4a4065685.png)

次に、APIキーをHerokuの環境変数に追加する必要があります。 キー名はHOSTEDGRAPHITE_APIKEYになります。下の画像で出力を確認することもできます。 heroku config：set HOSTEDGRAPHITE_APIKEY = YOUR_API_KEYを実行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/da4a5bb9-4404-1870-09bc-7021ea590761.png)

これで、HerokuアプリがMetricFireアカウントにメトリックを送信するはずです。 メトリックツリーマップからこれらのメトリックを確認しましょう。 ダッシュボードから、次の画像のように[Metrics]> [Metric Treemap]に移動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/312b6854-15e8-074f-7d8b-238a24a07de5.png)

ツリーマップにHerokuセクションがあることがわかります。これは、Herokuのアドオンが機能していることを意味します。 Grafanaグラフを設定する前に、アプリにStatsDを追加して、どのボタンがいつ押されているかを追跡しましょう。

#StatsDの実装
StatsDは、アプリのコードにコードを追加することで実装されます。 上記の「View：dashboard / views.py」というラベルの付いた画像を参照し、それを下の画像と比較して、StatsDコードが追加された場所を確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/ee37b468-b6eb-5d91-bea0-17eed2ecd179.png)

ログインボタンと「サポート」ボタンにカウントメトリックを追加するだけです。 上の画像でわかるように、support_buttonが実際に不良ページにつながっています。 これは、ボタンの失敗を再現するためのもので、後でグラフに表示されます。

アプリのボタンを押して、StatsDメトリックをテストしてみましょう。 これらのボタンをクリックした後、Herokuログをチェックして、実際に何かが行われたかどうかを確認しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/66918b14-c0ec-a93c-4f67-4eeea7e5988b.png)

上の画像でわかるように、ログインボタンは200の応答を返し、「Support」ボタンは404の応答を返します。 これは、私たちが設定しようとしたものから予想されたとおりです。 次に、それらのStatsD統計がMetricFireアカウントに送信されたかどうかを確認します。 MetricFire Dashboard > Metrics > Metrics Treemapに戻り、「Counter」ボックスを探します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/4184fb7d-0751-e1c5-996b-63b7d7172f15.png)

ログインボタンとサポートボタンがStatsDメトリックをMetricFireアカウントに送信していることがわかります。 必要なすべてのメトリックが揃ったので、MetricFireでGrafanaダッシュボードを設定しましょう。

#MetricFireでのGrafanaダッシュボードの設定
MetricFireアカウントのGrafanaに新しいダッシュボードを追加しましょう。 追跡するのに役立つメトリックがいくつかあります。 最初に、下の画像のように、取得した404応答の量を視覚化します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/198d700a-b107-4e86-870e-51cc5c35f5b5.png)

次に、次の画像のように、サービスの量と使用されたバイトの量を視覚化します。 メトリックを変換して好みのグラフを作成するために使用できる関数を試してみてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/7ca1213f-1d43-60d1-f946-230345bf5147.png)

次に、StatsDメトリックを404パネルに追加します。 これは、ページにあるボタンを追跡し、どのボタンが悪い応答を示すかを確認したいためです。 404パネルでStatsDメトリックをクエリする場合は、以下の画像を確認してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/85d62575-5706-fd06-0c91-59dab6399c4f.png)

バーを表示するように視覚化を変更しました。緑は404、黄色はログインボタン、青はサポートボタンです。 単純なアプリが実際に頻繁に使用されるサイトであった場合、バーの色を確認するだけで、どのボタンが失敗しているかを関連付けることができます。 メトリック、関数、および視覚化を試して、メンテナンスとデバッグに役立つダッシュボードを作成することが出来るのです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/2b77950b-d561-40c8-50b3-b1a7fdea7371.png)


これらを、是非試してみたい場合は、[MetricFire](https://www.metricfire.com/japan/?GAID=2038175526.1567400116&utm_source=blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=How%20to%20Monitor%20a%20Heroku%20App%20with%20Graphite%2C%20Grafana%20and%20StatsD)の[無料トライアル](https://www.hostedgraphite.com/accounts/signup-metricfire/?signup=japan&utm_source=blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=How%20to%20Monitor%20a%20Heroku%20App%20with%20Graphite%2C%20Grafana%20and%20StatsD)に参加して、Herokuアプリからメトリックの送信を開始してください。 また、[デモを予約](https://www.metricfire.com/demo-japan/?GAID=2038175526.1567400116&utm_source=blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=How%20to%20Monitor%20a%20Heroku%20App%20with%20Graphite%2C%20Grafana%20and%20StatsD)してご連絡いただければ、あなたのご利用に必要な監視についてさらにお話しすることができます。