Upgrade to Pro — share decks privately, control downloads, hide ads and more …

インフラを横断して可視化するダッシュボードの開発

Naomichi Yamakita
February 26, 2023
12

 インフラを横断して可視化するダッシュボードの開発

Naomichi Yamakita

February 26, 2023
Tweet

More Decks by Naomichi Yamakita

Transcript

  1. metapsについて ファイナンス
 マーケティング
 DX支援/その他
 決済サービスの提供を軸に、 
 お金×テクノロジーに関わる事業を 
 総合的に展開 


    広告配信、販促最適化まで 
 デジタルマーケティングを 
 ワンストップで支援 
 企業のDXを支援するSaaSや 
 開発チームのマッチングサービスを 
 提供

  2. スピーカー紹介 山北 尚道 ベトナム・ハノイでのオフショア事業立ち上げからキャリアをスタートし、アプリケーション開発か らマネジメントまでを経験。 2015年に株式会社メタップスに参画。徐々にクラウドインフラにも携わり、現在は同社で横断 的なテックリードやSREエンジニアとして従事。 AWS Dev Day

    Tokyo https://pages.awscloud.com/rs/112-TZM-766/images/G-1.pdf メタップスにおける ECS デプロイ戦略 - AWS https://aws.amazon.com/jp/blogs/news/ecs-deployment-strategy-at-metaps/ メタップスが取り組むシステムの運用状況を可視化するダッシュボード開発 https://aws.amazon.com/jp/builders-flash/202210/metaps-monitoring-dashboard-development/ Naomichi YAMAKITA
  3. AWSはLambda、DatadogやSentryはWebhook経由でイベントを送信 する仕組みを構築。
 ソース 送信するデータの例 メトリクス配送フロー AWS • GuardDutyの検出結果 • SecurityHubの検出結果

    • Inspectorが検知した脆弱性の検出結果 EventBridge -> SQS -> Lambda -> API Gateway Datadog • モニターのアラート • ログのアラート • SLO計測値 Webhook -> API Gateway Sentry • アプリケーションで発生した例外 Webhook -> API Gateway PagerDuty • オンコールイベント Webhook -> API Gateway メトリクスソースを管理する

  4. • フレームワーク
 ◦ Vue.js
 
 • UIライブラリ
 ◦ Vuetify
 


    • ビルド
 ◦ Vite
 
 • グラフ描画
 ◦ Google Chart Tools 
 
 • デプロイ・ホスティング
 ◦ Amplify
 フロントエンドを構成する技術

  5. Viewのレイヤー構成
 • Container/Presentational
 データ管理はContainer。データ表示は Presentational。
 
 • Hook
 Container層をスリム化するための共通 APIレイヤー。


    useProfile (例) ・onMountedで、APIのget。結果をprofileに格納する。 ・setProfile関数で、APIでpatch。DB更新する。 ・return { profile, setProfile } # hookからデータのゲッター、セッターを取得 const { profile, setProfile } = useProfile # Presentationalにデータを渡す <ProfileView :profile="profile", :setProfile="setProfile"> # 表示する <p>名前:{{profile.name}}</p> # 更新する <form submit="setProfile(param)">... Hook Container Presentational
  6. BaseComponent/PresentationalComponentに分ける。
 
 • BaseComponent
 ◦ あらゆるすべてのページから使うことが想定されるコンポーネント。
 ◦ Storybookで使い方をカタログ化。
 
 •

    PresentationalComponent
 ◦ 特定のページ、特定のページ群だけで使うコンポーネント。 
 ◦ 可読性のために、部分的に切り出すことや、共通化も許可。 
 
 コンポーネントの分け方

  7. GoogleChartsを採用
 Google Charts Highcharts Chart.js 基本的な描画 ◦ 
 (svg)
 ◦

    
 (svg)
 ◦ 
 (canvas)
 マウスホバーの強調表示 ◦
 ◦
 △
 グラフ中の要素にイベント ◦
 ◦
 ×
 細かなデザイン調整 ◦
 ◦
 △
 ドキュメントが充実 ◦
 ◦
 ◦
 無料 ◦
 ×
 ◦
 グラフ描画ライブラリの選定

  8. • API管理
 ◦ API Gateway
 
 • 認証
 ◦ Cognito


    
 • アプリケーション基盤
 ◦ Lambda
 
 • フレームワーク
 ◦ Serverless Framework 
 
 • 配信
 ◦ Serverless Application Repository 
 バックエンドを構成する技術

  9. • ユーザー管理にはCognito User Poolsを 採用。ユーザーIDを保護するため2要素 認証 (TOTP) を必須化。
 
 •

    API Gatewayの各エンドポイントにCognito User Pool Authorizerをアタッチ。
 
 • Amplify SDK (Auth) 経由でCognitoに認可 を求め、JWTを利用してAPI Gatewayにリ クエストを送信。
 ダッシュボードAPIの認証

  10. • API Gatewayはイベントデータ受信後、DocumentDBにデータを登録す る。
 
 • DocumentDBはAWSが提供するJSONドキュメント指向データベース。
 ◦ MongoDBとの互換
 ▪

    MongoDB 3.6/4.0系互換API対応。 
 
 ◦ フルマネージド
 ▪ オートスケール、自動パッチング、S3へのストリームバックアップなど。 
 
 ◦ 高パフォーマンス
 ▪ ストレージとコンピュートノードを分離し、高いパフォーマンスを実現。 
 データストレージ

  11. • API Gatewayは毎秒数千以上のリクエストを捌き、データベース に書き込む必要がある。
 ◦ 高スループット、低レイテンシを重視。
 ◦ DocumentDBであれば、秒間100万リクエストを実行可能。
 
 •

    ログデータの特性上、データ構成は柔軟に変更できることが望ま しい。
 ◦ スキーマレスを重視。
 ◦ MongoDB互換APIを備えており、データ検索や集計も柔軟に対応可 能。
 DocumentDBを採用した理由

  12. • Lambda (Ruby) を採用。
 
 • MITは通知やロギング、コンフィグレーショ ンなどを提供する軽量フレームワーク (Lambda Layer)。


    アプリケーション基盤
 class HelloWorld < Mit::Function::Base def run fields = { 'Greeting' => I18n.t('greeting') } Hello.create(fields) Mit::Notifier.send(I18n.t('subject'), fields) create_response end Firework Edge sample
  13. Serverless FrameworkからServerless Application Repositoryにアプリケーションを配 布するプラグインを実装。
 
 
 
 
 


    
 アプリケーションのインストールは、 CloudFormationやTerraformでIaC化することが 可能。
 アプリケーションの配布
 docker-compose run --rm sls publish --config serverless-firework.yml --stage production --function ec2-security-update --semantic-version=0.12.7 実行コマンド