JavaScript＋AzureFunctionsで簡易アクセス解析をやってみた

7086 ワード
AzureFunctions Azure JavaScript CosmosDB アクセス解析 JavaScript テキストリンク

背景

静的なWEBサイト(HTML/CSS/JavaScript)で、ちょっとしたアクセス解析っぽいものを実現したくて試してみました。サーバーサイドで処理できる環境を準備したり、アクセス解析ツールを使ったりするのが、正攻法なのかもしれないですが、ローカルネットワーク内で運用されているWEBサイトで、尚且つ、環境まで触れない（いまは触らない）というのもあり、ちょっと何か出来ないかと思ってやってみたものです。

構成

  • HTML+CSS
  • JavaScritp(Fetch API)
  • Azure Functions
  • Azure Cosmos DB

流れ

  1. WEBページの操作（ボタンクリックなど）
  2. JavaScript(Fetch API)でHTTPリクエスト
  3. Azure FunctionsのHTTPトリガーで処理が起動
  4. HTTP通信で受信したデータをAzure Cosmos DBに格納

ソースコード

HTML

<a href="xxxx.html" onclick="javascript:logClick('xxxx')">ああああ</a></li>

JavaScript

function logClick(xxxx) {

  // Create param
  const yyyy= "hogehoge";

  // Create the query param for Azure Functions
  const params = {
    xxxx: xxxx,
    yyyy: yyyy
  };
  const qs = new URLSearchParams(params);

  // POST to Azure Functions
  fetch(`https://xxxx.azurewebsites.net/api/HttpTriggerXXXX?${qs}`, { method: "POST", })
    .then(response => response.text())
    .then(text => { console.log(text); })
    .catch(console.error);
}

Azure Functions

using System.Net;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Primitives;
using Microsoft.Extensions.Logging;
using Newtonsoft.Json;

public static IActionResult Run(HttpRequest req, out object outputDocument, ILogger log)
{
    string XXXX= req.Query["xxxx"];
    string YYYY= req.Query["yyyy"];

    if (!string.IsNullOrEmpty(XXXX) && !string.IsNullOrEmpty(YYYY))
    {
        outputDocument = new
        {
            XXXX,
            YYYY
        };

        return (ActionResult)new OkResult();
    }
    else
    {
        outputDocument = null;
        return (ActionResult)new BadRequestResult();
    }
}

まとめ

データベース上にデータが格納されるまで確認できました。
可視化まわりは今後ちまちまやっていこうと思います。