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
[Home NOC Operators' Group] User Dashboardを作ってみた話
Search
yoneyan
August 14, 2021
Programming
0
260
[Home NOC Operators' Group] User Dashboardを作ってみた話
e-ZUKA Tech Night vol.52 -コロナ禍を支えるITインフラ-
発表資料
yoneyan
August 14, 2021
Tweet
Share
More Decks by yoneyan
See All by yoneyan
NREに向けた取り組みと さくらのサービス別通信状況(β)について / about NRE and sakura service network status beta
yoneyan
0
32
IPアドレス管理指定事業者における業務自動化の取り組みと活用例
yoneyan
0
100
Other Decks in Programming
See All in Programming
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
850
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
430
C#/.NETのこれまでのふりかえり
tomokusaba
1
160
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
550
Realtime API 入門
riofujimon
0
110
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
現場で役立つモデリング 超入門
masuda220
PRO
13
2.9k
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.3k
qmuntal/stateless のススメ
sgash708
0
120
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
160
Amazon Neptuneで始めてみるグラフDB-OpenSearchによるグラフの全文検索-
satoshi256kbyte
4
330
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
692
190k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
4 Signs Your Business is Dying
shpigford
180
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Documentation Writing (for coders)
carmenintech
65
4.4k
Making Projects Easy
brettharned
115
5.9k
Transcript
User Dashboardを作っ てみた話 Yuto Yoneda 8/12 e-ZUKA Tech Night
自己紹介 米田 悠人 • 大阪 • 大阪工業大学 情報科学部 情報ネットワーク学科 4年
• 最近の趣味はインフラ歩きやNTTと電電公社の社歌を聴くこと GitHub: https://github.com/yoneyan Twitter: https://twitter.com/yoneyan_ja
ユーザのみなさんとのやり取り(一年前) メールOnly。。。。
例)
わからん。。。
メールのメリット • 対応人数が少ない場合は、割と楽 • 誰でも使える
メールのデメリット • 運営委員の負担がかなり高い ◦ 運営委員が忙しく、いつの間にか忘れてしまう ◦ スパムメールが大量に受信されるため、埋もれる ◦ netboxや内部Wiki、Configから情報を読み取る必要があり、ユーザの識別に時間が非常にかかる •
他の運営委員と内容の共有が難しい
2020/03 後半頃~ ユーザ管理システムを作ってみよう
2020/04 ~ 言語選定 • Angular(Firebase関連を少しだけ触ってみたかったから ) Firebase + Angularで作ってみようとなった
2020/04 緊急事態宣言中~ HomeNOC operators’ Groupでは関係のないアプリケーション開発をしまくる • vmmgr • シフト表ぽいもの
2020/04 緊急事態宣言中~ HomeNOC operators’ Groupでは関係のないアプリケーション開発をしまくる • vmmgr • シフト表ぽいもの
2020/05 ~ • 開発スタート
v1.0 Release 2020/07/06
None
None
仕組み 使用技術 • Firestore Database • Authentication • Functions
Firebase Functions
問題点 • 従量課金制になる ◦ 内側から外側への通信にはお金がかかる • オンプレにしたいという意見が多い+したかった • チャット機能自体がなく、ユーザとのやり取りは結局メールになる •
HomeNOCの本来のサービスコードでは対応できないことが判明
バグなどの多さも課題。。。 • 入力に対するチェック機能が実装しきれていなかった • 単純に管理者が使いづらい
v2.x 2020/11 密かにリリース
サービスコードを一新(これまで) Static BGPによるEther IP接続の場合、3SE2020001 • グループ毎に割り当てられる ◦ グループIDがService Code •
拡張不可 • 複数拠点で異なる接続方法で結ぶとサービスコードが不一致になる
サービスコードを一新(現在) GroupID: 1でStatic BGPによるEther IP接続の場合、1-3S00001-EIP001 Groupのみ定義: 1 サービス情報のみ定義: 1-3S00001 接続も含めた定義:
1-3S00001-EIP001 • サービス品目の複数対応 • 接続品目の複数対応
特徴 • バックエンドを内製化 ◦ 従量課金ではなくなった • グループの概念を実装 • チャット機能の実装 •
サービスコードの大幅な変更
構成
DB構造
問題点 エラー内容がようわからん
v3.xは2021/05 こっそりリリース UIの変更はまったくないため省略
変更点 • ログ取得の実装(ログインユーザなどがわかるようにする) • 個人情報扱いの変更による大幅な DBの変更 • いらないTableは修正、削除を実施する • Production用のDBを生で触らなくてもいいように
dwebadmを充実させる(時間はかなりかか る) • DBアクセス頻度を減らす
問題点 • WebフレームワークとしてAngularを使っていたが扱える人が少ない • ユーザ側のサーバに不要な APIが存在していた • gorm(O/Rマッパー)のライブラリがv1だった(最新はv2)
v4.x Release (latest)
None
None
変更点 • WebフレームワークをAngularからReactに変更 • サポートチャットにてMarkdownが使用可能 • ユーザ単位でもチャットできるように変更 • ユーザ、グループ、サービス情報、接続情報の各追加ページにて文字数制限やチェック機能の強化を実施 •
不必要なAPIを削除し、よりセキュアにした • 不要なレスポンスを削り、セキュリティの強化 • 各リストにて、検索機能の追加 • ユーザページにてサーバアクセスの頻度を少なくした • UIの大幅改修 • TokenデータをSessionStorageからCookieに変更 • 申請手続きページの改修 • 通知機能の改修 • 寄付の仕組みを追加 • 会費徴収の仕組みを追加 • タグ機能の追加
DB構造 •
チャットの仕組み
実は。。。
チャットが届くまで
チャットが届くまで その1
チャットが届くまで その2
チャットが届くまで その3
バグ報告はgithubから https://github.com/homenoc
バグ報告
これからも、User First ....