$30 off During Our Annual Pro Sale. View Details »

[Home NOC Operators' Group] User Dashboardを作ってみた話

yoneyan
August 14, 2021

[Home NOC Operators' Group] User Dashboardを作ってみた話

e-ZUKA Tech Night vol.52 -コロナ禍を支えるITインフラ-
発表資料

yoneyan

August 14, 2021
Tweet

More Decks by yoneyan

Other Decks in Programming

Transcript

  1. User Dashboardを作っ てみた話 Yuto Yoneda 8/12 e-ZUKA Tech Night

  2. 自己紹介 米田 悠人 • 大阪 • 大阪工業大学 情報科学部 情報ネットワーク学科 4年

    • 最近の趣味はインフラ歩きやNTTと電電公社の社歌を聴くこと GitHub: https://github.com/yoneyan Twitter: https://twitter.com/yoneyan_ja
  3. ユーザのみなさんとのやり取り(一年前) メールOnly。。。。

  4. 例)

  5. わからん。。。

  6. メールのメリット • 対応人数が少ない場合は、割と楽 • 誰でも使える

  7. メールのデメリット • 運営委員の負担がかなり高い ◦ 運営委員が忙しく、いつの間にか忘れてしまう ◦ スパムメールが大量に受信されるため、埋もれる ◦ netboxや内部Wiki、Configから情報を読み取る必要があり、ユーザの識別に時間が非常にかかる •

    他の運営委員と内容の共有が難しい
  8. 2020/03 後半頃~ ユーザ管理システムを作ってみよう

  9. 2020/04 ~ 言語選定 • Angular(Firebase関連を少しだけ触ってみたかったから ) Firebase + Angularで作ってみようとなった

  10. 2020/04 緊急事態宣言中~ HomeNOC operators’ Groupでは関係のないアプリケーション開発をしまくる • vmmgr • シフト表ぽいもの

  11. 2020/04 緊急事態宣言中~ HomeNOC operators’ Groupでは関係のないアプリケーション開発をしまくる • vmmgr • シフト表ぽいもの

  12. 2020/05 ~ • 開発スタート

  13. v1.0 Release 2020/07/06

  14. None
  15. None
  16. 仕組み 使用技術 • Firestore Database • Authentication • Functions

  17. Firebase Functions

  18. 問題点 • 従量課金制になる ◦ 内側から外側への通信にはお金がかかる • オンプレにしたいという意見が多い+したかった • チャット機能自体がなく、ユーザとのやり取りは結局メールになる •

    HomeNOCの本来のサービスコードでは対応できないことが判明
  19. バグなどの多さも課題。。。 • 入力に対するチェック機能が実装しきれていなかった • 単純に管理者が使いづらい

  20. v2.x 2020/11 密かにリリース

  21. サービスコードを一新(これまで) Static BGPによるEther IP接続の場合、3SE2020001 • グループ毎に割り当てられる ◦ グループIDがService Code •

    拡張不可 • 複数拠点で異なる接続方法で結ぶとサービスコードが不一致になる
  22. サービスコードを一新(現在) GroupID: 1でStatic BGPによるEther IP接続の場合、1-3S00001-EIP001 Groupのみ定義: 1 サービス情報のみ定義: 1-3S00001 接続も含めた定義:

    1-3S00001-EIP001 • サービス品目の複数対応 • 接続品目の複数対応
  23. 特徴 • バックエンドを内製化 ◦ 従量課金ではなくなった • グループの概念を実装 • チャット機能の実装 •

    サービスコードの大幅な変更
  24. 構成

  25. DB構造

  26. 問題点 エラー内容がようわからん

  27. v3.xは2021/05 こっそりリリース UIの変更はまったくないため省略

  28. 変更点 • ログ取得の実装(ログインユーザなどがわかるようにする) • 個人情報扱いの変更による大幅な DBの変更 • いらないTableは修正、削除を実施する • Production用のDBを生で触らなくてもいいように

    dwebadmを充実させる(時間はかなりかか る) • DBアクセス頻度を減らす
  29. 問題点 • WebフレームワークとしてAngularを使っていたが扱える人が少ない • ユーザ側のサーバに不要な APIが存在していた • gorm(O/Rマッパー)のライブラリがv1だった(最新はv2)

  30. v4.x Release (latest)

  31. None
  32. None
  33. 変更点 • WebフレームワークをAngularからReactに変更 • サポートチャットにてMarkdownが使用可能 • ユーザ単位でもチャットできるように変更 • ユーザ、グループ、サービス情報、接続情報の各追加ページにて文字数制限やチェック機能の強化を実施 •

    不必要なAPIを削除し、よりセキュアにした • 不要なレスポンスを削り、セキュリティの強化 • 各リストにて、検索機能の追加 • ユーザページにてサーバアクセスの頻度を少なくした • UIの大幅改修 • TokenデータをSessionStorageからCookieに変更 • 申請手続きページの改修 • 通知機能の改修 • 寄付の仕組みを追加 • 会費徴収の仕組みを追加 • タグ機能の追加
  34. DB構造 •

  35. チャットの仕組み

  36. 実は。。。

  37. チャットが届くまで

  38. チャットが届くまで その1

  39. チャットが届くまで その2

  40. チャットが届くまで その3

  41. バグ報告はgithubから https://github.com/homenoc

  42. バグ報告

  43. これからも、User First ....