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
430
GCP PubSub Emulatorの WEB UIツール作った話(未完)
Yamato
December 28, 2020
Tweet
Share
More Decks by Yamato
See All by Yamato
続く障害からの脱却 オブザーバビリティで立て直すサービス開発
yamato_sorariku
0
1.2k
#phpconkagawa レガシーコードにもオブザーバビリティを 〜少しずつ始めるサービス監視〜
yamato_sorariku
0
1.2k
わたしがインシデント対応のときに意識していることたち in PHPカンファレンス小田原2024 #phpcon_odawara
yamato_sorariku
0
790
PHPerKaigi_2024_アンカンファレンス_-_完成度低いの歓迎LT大会
yamato_sorariku
1
87
一年目の君へ、人に頼れるようになろう
yamato_sorariku
2
630
Cloud Runを最速で体験する方法
yamato_sorariku
0
380
クローズドなサービスをIdentity-Aware Proxyを使って安全に公開する
yamato_sorariku
0
770
WEBサービスを支えるインフラたち + 自己流の学び方
yamato_sorariku
0
220
PortainerとDocker Swarmで遊べる環境を作った話
yamato_sorariku
1
1.2k
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Agile that works and the tools we love
rasmusluckow
330
21k
Six Lessons from altMBA
skipperchong
28
4k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Done Done
chrislema
185
16k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
490
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
A better future with KSS
kneath
239
17k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
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 何もわからない ◦ でも、こういう機会を使って触ったことない言語にチャレンジしたのは正解だった ◦ 右も左もわからない中で試行錯誤するの楽しい 楽しんでいる様子
ありがとうございました!