おれの技術日記

元はJava+SQLがメインのエンジニア、フロントエンドは軽くかじった程度で苦手。最近忘れっぽいので覚えたことをいろいろメモするためにブログ開始。

GCPでオレオレGoogle Analytics(リアルタイム版)を開発する(その1)

あまりに放置しすぎて存在すら忘れていたこのブログ、久々に手を動かしたので備忘録を残す。

今回作るのはこんな感じ。GAみたくwebサイトのページにタグを埋めてビーコンを飛ばし、それをCloud Functionsで受け取ってBigQueryにストリーミングinsertし、リアルタイムで分析ができる環境を作る。今後いろいろ拡張していくかもしれないけど、取り急ぎは最小限データを流すところだけ頑張る。
f:id:kuniaki12:20200525155452p:plain
この構成の場合、全てのコンポーネントがサーバレスなので何も意識しなくても勝手にスケールしてくれる。いい時代になったなあ・・・


1. まずはwebページを置くためのGCSバケット

というわけで、まずはCloud Functionsから・・・の前にブラウザでアクセスできるwebページを用意する。GCE上にwebサーバを立ててもいいんだけど、別にwebサーバを運用管理するのが今回の目的ではないのでGCSを使ってサクッと実現する(設定次第でCDNとしても使える)。

GCSのページで「バケットを作成」をクリックして
f:id:kuniaki12:20200525161101p:plain
各種情報をつらつらと設定。バケット名はグローバルで一意なので注意。今回も「my-first-bucket12345」という適当な名前を設定してみたらすでに重複していたくらい一意。
f:id:kuniaki12:20200525161345p:plain
ガチにCDNとして運用するならマルチリージョンにするとか日本のデータセンターを選ぶとかした方がいいんだと思うけど、今回はあくまでテストHTMLを置くだけなのであまり考えずにこんな設定。


さて、バケットができたらインターネットアクセスを許可する設定。権限タブから「メンバーを追加」をクリック。
f:id:kuniaki12:20200525161815p:plain

allUsersに対してストレージオブジェクト閲覧者を設定する。
f:id:kuniaki12:20200525161936p:plain


2. HTMLは超最低限でOK

ここまででGCSの設定はOKなので、こんな感じでindex.htmlを作ってアップロード。

<!doctype html>
<html>
<body>
<h1>Hello World!</h1>
</body>
</html>

URLは
https://storage.googleapis.com/[バケット名]/ファイル名
になるので、アクセスしてこんな感じで見えればOK。
f:id:kuniaki12:20200525162858p:plain


とりあえずHTML配置しておわっちゃったけど汗
次回以降ビーコン計測のあたりをやってきます。