ForgeVision Engineer Blog

フォージビジョン エンジニア ブログ

PANORA VRのウェブサイトを死活監視した話

こんにちは!VR事業部の長谷川(id:waffle_maker)です。
これはOculus Rift Advent Calendar 2017の23日目の記事です。

はじめに

PANORA VRとは

PANORA VRとは、Mogura VRと双璧をなす日本のVRメディアです。
2017年の夏頃からPANORA VRのウェブサイトで「データベース接続確立エラー」を表示される障害が頻発していました。

panora.tokyo

ちゃんと調べた訳ではありませんが、PANORA VRで新しい記事が投稿されると、Twitterで拡散されてアクセスが集中し、結果としてウェブサーバの許容範囲を超えて「データベース接続確立エラー」が発生するのでは無いかと思います。
編集長の広田さんとは、VRを通して個人的なお付き合いがあり、夏期休暇中だったこともあり、対策に協力することにしました。

死活監視とは

ウェブサイトに定期的にアクセスして、ウェブサーバが正常に稼働しているか監視する仕組みのことです。
商用サービスでは障害が発生した場合、管理者に通知すると共に、機器を再起動したり予備機に切り替えたりしますが、今回は編集長の広田さんにTwitterでメンションを送るようにしました。

今回使用したサービス

Google Apps Script

Googleのプラットフォーム上でスクリプトを実行する事が出来るサービスです。 今回は、定期的にウェブサイトにアクセスして、障害が発生していたらIFTTTに指示を出す用途で使用しました。

developers.google.com

IFTTT

ウェブサービス同士を連携する事ができるサービスです。
今回は、Google Apps Scriptからの指示を受けて、Twitterに投稿を行う用途で使用しました。

ifttt.com

IFTTTの設定

予め、IFTTTにユーザアカウントを作成し、Twitterアカウントを連携してください。

Appletの作成

URLにアクセスするとTwitterに投稿を行うAppletを作成します。

f:id:waffle_maker:20171223115851p:plain
New Appletを選択します。
f:id:waffle_maker:20171223130338p:plain
+を選択します。
f:id:waffle_maker:20171223115902p:plain
Webhooksを選択します。
f:id:waffle_maker:20171223115908p:plain
Receive a web requestを選択します。
f:id:waffle_maker:20171223115913p:plain
Event Nameを設定し、Create triggerを選択します。
※ここで設定したEvent Nameは後で使用する為、メモしておきます。-①

f:id:waffle_maker:20171223115919p:plain
+を選択します。
f:id:waffle_maker:20171223115922p:plain
Post a tweetにツイートしたい文字列を設定し、Create actionを選択します。
※@に続けてTwitter IDを指定することで、任意のユーザにメンションを飛ばすことが出来ます。
f:id:waffle_maker:20171223115826p:plain
Finishを選択します。
f:id:waffle_maker:20171223115830p:plain
Appletの登録が完了しました!

Keyの確認

Webhooksを使用する為のKeyを確認します。

f:id:waffle_maker:20171223115855p:plain
Servicesを選択します。
f:id:waffle_maker:20171223115836p:plain
Webhooksを選択します。
f:id:waffle_maker:20171223132031p:plain
Documentationを選択します。
f:id:waffle_maker:20171223133313p:plain
Keyが表示されました。
※ここで表示されたKeyは後で使用する為、メモしておきます。-②

Keyの確認が完了しました!

Google Apps Scriptの設定

予め、Googleにユーザアカウントを作成してください。

スクリプトの作成

ウェブサイトにアクセスして、異常を検出したらIFTTTのWebhooks URLにアクセスするスクリプトを作成します。
Google Driveにアクセスし…

f:id:waffle_maker:20171223120952p:plain
新規から、Google Apps Scriptを選択します。
f:id:waffle_maker:20171223134507p:plain
コード.gsに書かれているソースコードを削除し、下記ソースコードを貼り付けます。
※ここで、監視したいウェブサイトのURL、検出したい文字列(正常にウェブサイトが表示された際にHTMLに含まれる文字列)、①Event Name、②Keyを編集します。

function websiteWatchAlert() { 
  var url = "{ここにウェブサイトのURLを記入}";
  var message = '';
  var options = {
    muteHttpExceptions : true
  }
  var response = UrlFetchApp.fetch(url, options);
  var response_code = response.getResponseCode();

  if(response_code==200){ 
    // ここで対象ページのhtmlを検証してください 
    var content = response.getContentText("UTF-8"); 
    var reg = /{ここに検出したい文字列を記入}/; 
    if(!reg.exec(content)){ 
      message = url+" ページが正しく表示されていません"; 
    }else{
      Logger.log("OK");
    }
  }else{ 
    message = url+" 不正なレスポンスコードが返されました: "+response_code; 
  }
  Logger.log(message);
  
  if(message.length>0){ 
    var url2 = "https://maker.ifttt.com/trigger/{ここに①Event Nameを記入}/with/key/{ここに②Keyを記入}";
    // POSTデータ
    var payload = {
      "value1" : response_code,
      "value2" : "",
      "value3" : ""
    }
    // POSTオプション
    var options2 = {
      "method" : "POST",
      "payload" : payload
    }
    UrlFetchApp.fetch(url2, options2);
  }
}

f:id:waffle_maker:20171223120947p:plain
実行を選択して、正常に動作しているか確認します。

スクリプトの作成が完了しました!

トリガーの設定

f:id:waffle_maker:20171223121010p:plain
現在のプロジェクトのトリガーを選択します。
f:id:waffle_maker:20171223134956p:plain
トリガーが設定されていません。今すぐ追加するにはココをクリックしてください。を選択します。
f:id:waffle_maker:20171223135000p:plain
イベントを設定し、保存を選択します。

トリガーの設定が完了しました!

動作確認

広田さんに通知が飛ぶかもしれないとDMしている間に、Twitterにメンションが…
早速、喜びの声を頂きました。
やったー!動いたみたい!

おまけ

Twitterでは、同じ内容のツイートを連続して行うことが出来ないため、復旧するまで通知したい場合は…

f:id:waffle_maker:20171223115435p:plain
Add IngredientからOccuredAtを追加します。

※ただし、これをやってしまうと、ウェブサイトが復旧するまで1分間隔で通知が飛ぶという事になりかねません。気を付けましょう。

まとめ

ウェブサービスを活用することで、自前でサーバを用意すること無く、ウェブサイトの死活監視を行うことが出来ました。
まだ試していませんが、IFTTTの設定次第では、スマホに電話をかけたり出来そうです。

24日目は、MogamiTsuchikawaさんの素人がOculusとWinMR開発していることを色々書きます。です。