GCP PubSub Emulatorの WEB UIツール作った話(未完)

GCP PubSub Emulatorの WEB UIツール作った話(未完) ゆるWeb勉強会@札幌 OnLine #11

ゆるWeb勉強会@札幌 OnLine #11 #ゆるWeb札幌自己紹介 ❏ 名前 ❏ @yamato_sorariku　　 ❏
仕事 ❏ Webエンジニア(フロントもバックエンドもインフラも ) ❏ 最近良く使う言語： Ruby, JavaScript ❏ 最近良く使うクラウドベンダ： GCP ❏ 持ってるさくらVPSの台数 ❏ 6台(Docker swarmクラスタとか) ❏ LT登壇経験 ❏ 今回が2回目（2020/12現在）

ゆるWeb勉強会@札幌 OnLine #11 #ゆるWeb札幌今回のお話業務中、PubSubを使って連携してるサービスの開発環境でちょっとやりにくいなーーーというポイントがあったので、ツールを作って解決しようと試みたお話です。 ▪ Cloud Pub/Sub(https://cloud.google.com/pubsub/docs/overview?hl=JA)
イベントを生成する「パブリッシャー」とイベントを処理する「サブスクライバー」がお互いに依存せずデータ連携などできるようにするためのもの。イベントのリアルタイム配信はもちろん、エラー発生時のリトライなどもしてくれる。

ゆるWeb勉強会@札幌 OnLine #11 #ゆるWeb札幌こんな環境で開発しています。

ゆるWeb勉強会@札幌 OnLine #11 #ゆるWeb札幌数種類のマイクロサービスが起動していて、それぞれはPubSubを通して連携

ゆるWeb勉強会@札幌 OnLine #11 #ゆるWeb札幌 BサービスからPubSubイベントが発火したときの Aシステムの挙動を確認には Bサービスで実際に動作させて PubSubイベントを発火させる必要がある

ゆるWeb勉強会@札幌 OnLine #11 #ゆるWeb札幌チョット困ったポイント ❏ テストデータの作りにくさ Aサービスで特定のデータを含む PubSubイベント発火時の動作を確認したいとき、 Bサービスの状態などに依存して、思ったようにイベント発火させれないケースがある。
（そのためだけにBサービスの状態を色々いじるのは手間 ……） ❏ PubSubで飛び交うデータの追いづらさ PubSubで飛び交っているデータの中身がなかなか追えない。ログに吐き出してみても、開発環境だとその他ログなどで流れてしまい見づらい ……。（Railsを使っているため、開発環境だと盛大にクエリログが流れる）

ゆるWeb勉強会@札幌 OnLine #11 #ゆるWeb札幌少し考えました ❏ 飛んでいるデータが追いにくい ❏ テスト用にデータを飛ばしにくい　　　　　　　　　↓
だったら…… 画面上で飛んでいるPubSubの中身を見たり、好きなメッセージを Pushできるものを作ればいい！

ゆるWeb勉強会@札幌 OnLine #11 #ゆるWeb札幌ということで作りました(未完) PubSub Emulator UI (https://github.com/yamato-sorariku/pubsub-emulator-ui) GoとTypeScriptで実装し、単体のDockerコンテナとして起動
PublishされたメッセージをWebSocketを使ってブラウザへ送信して表示ブラウザからPublishするためのエンドポイントも用意、ブラウザから PubSubイベントが発火可能 • フロントエンド ◦ TypeScript + Nuxt.js + TailwindCSS • バックエンド ◦ GoのHTTPサーバ (lib: gin-gonic/gin) ◦ WebSocket配信 (lib: gorilla/websocket) ◦ PubSubの対象TopicをSubscribe (lib: go/pubsub)

ゆるWeb勉強会@札幌 OnLine #11 #ゆるWeb札幌

ゆるWeb勉強会@札幌 OnLine #11 #ゆるWeb札幌さっくり仕組み解説 Goで作ったAPIサーバでPubSub Emulatorのメッセージを監視フロントからPOSTされたJsonを PubSub Emulatorに送信

ゆるWeb勉強会@札幌 OnLine #11 #ゆるWeb札幌さっくり仕組み解説サービスからPubSubメッセージが飛んだとき、 Go APIサーバがメッセージを Pullして、ブラウザに対して WebSocketで送信

ゆるWeb勉強会@札幌 OnLine #11 #ゆるWeb札幌デモ

ゆるWeb勉強会@札幌 OnLine #11 #ゆるWeb札幌今後の話 ❏ もう少し格好いい画面にしたい ❏ TailwindCSS使ってエイッって感じで作ってそのままなので。 ❏
Goがかなり乱暴なコードになってるので直したい ❏ もう少し言語仕様わかってきたタイミングでリファクタしたい ❏ WebSocketが安定してない ❏ WebSocket接続して少し時間経ったら、エラーが発生してしまいブラウザにデータが飛ばない ……。（なんかミスってるので修正予定）

ゆるWeb勉強会@札幌 OnLine #11 #ゆるWeb札幌作った感想 • 開発する環境をツール開発で良くしていく楽しさ ◦ 開発環境で妥協 (苦労)はしてはいけない！
• Go 何もわからない ◦ でも、こういう機会を使って触ったことない言語にチャレンジしたのは正解だった ◦ 右も左もわからない中で試行錯誤するの楽しい楽しんでいる様子

ありがとうございました！

GCP PubSub Emulatorの WEB UIツール作った話(未完)

GCP PubSub Emulatorの WEB UIツール作った話(未完)

Yamato

More Decks by Yamato

Featured

Transcript