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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. ゆる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)
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide