Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GCP PubSub Emulatorの WEB UIツール作った話(未完)
Search
Yamato
December 28, 2020
0
350
GCP PubSub Emulatorの WEB UIツール作った話(未完)
Yamato
December 28, 2020
Tweet
Share
More Decks by Yamato
See All by Yamato
#phpconkagawa レガシーコードにもオブザーバビリティを 〜少しずつ始めるサービス監視〜
yamato_sorariku
0
830
わたしがインシデント対応のときに意識していることたち in PHPカンファレンス小田原2024 #phpcon_odawara
yamato_sorariku
0
290
PHPerKaigi_2024_アンカンファレンス_-_完成度低いの歓迎LT大会
yamato_sorariku
1
50
一年目の君へ、人に頼れるようになろう
yamato_sorariku
2
510
Cloud Runを最速で体験する方法
yamato_sorariku
0
280
クローズドなサービスをIdentity-Aware Proxyを使って安全に公開する
yamato_sorariku
0
590
WEBサービスを支えるインフラたち + 自己流の学び方
yamato_sorariku
0
170
PortainerとDocker Swarmで遊べる環境を作った話
yamato_sorariku
1
930
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Facilitating Awesome Meetings
lara
49
5.9k
Producing Creativity
orderedlist
PRO
340
39k
It's Worth the Effort
3n
182
27k
The Invisible Customer
myddelton
119
13k
Become a Pro
speakerdeck
PRO
22
4.8k
How to name files
jennybc
75
97k
Teambox: Starting and Learning
jrom
131
8.7k
A designer walks into a library…
pauljervisheath
201
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
400
65k
4 Signs Your Business is Dying
shpigford
179
21k
Documentation Writing (for coders)
carmenintech
65
4.3k
Transcript
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札幌
ゆる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 何もわからない ◦ でも、こういう機会を使って触ったことない言語にチャレンジしたのは正解だった ◦ 右も左もわからない中で試行錯誤するの楽しい 楽しんでいる様子
ありがとうございました!