@nifty天気予報：フルリニューアルの挑戦 - NIFTY Tech Talk #22

by ニフティ株式会社

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Copyright © NIFTY Corporation All Rights Reserved.  フルリニューアルの背景   旧システムは運用コストの増大、ユーザー体験の劣化など多くの課題を抱えていた ● 自社製CMSに依存した作りのため、拡張が行えない ● 更新作業が複雑なため、データ更新に時間がかかる ● 天気情報反映にラグがある ● 目的のページにたどり着けない ● PCページで使える機能がスマホページにはない運用コストの増加ユーザー体験の低下

Slide 7

Slide 7 text

Copyright © NIFTY Corporation All Rights Reserved.  フルリニューアルの目標とコンセプト   ● 必要最低限の保守で安定したサービス運営をできるようにする ● 自社製CMSからの完全脱却 ● 直感的に操作しやすいデザイン ● PC,スマホで変わらない機能を提供する ● レスポンシブデザインの採用運用保守の最適化ユーザー体験の改善 ● 近年の突発的な災害情報に対応する ● 重要視される情報をいち早くユーザーに届ける仕組みの構築災害・防災情報の強化

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Copyright © NIFTY Corporation All Rights Reserved.  チーム体制と役割   ● エンジニア：8人 ○ サービス担当：2名 ○ SRE：3名 ○ OJT中の新人：2名 ○ テックリード：1名 ● 企画：1名 ● デザイン：2名 ● ユーザー分析 ● 要件定義 ● 画面設計 ● インフラ設計 ● システム設計 ● データベース設計 ● インフラ実装 ● バックエンド実装 ● フロントエンド実装 etc... チーム体制エンジニアの役割分析、デザイン領域からリリースまでのすべてにエンジニアが関わっている

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Copyright © NIFTY Corporation All Rights Reserved.  採用した技術   ● アプリケーション、バッチはすべてコンテナで稼働 ● 環境の一貫性を確保 ● 迅速なデプロイメントとスケーリングコンテナ活用 GraphQLによる天気API Next.js＆TypeScript ● 社内で初採用！ ● 柔軟なデータ取得 ● オーバーフェッチを削減 ● 強力な型システム ● SSRによるパフォーマンス向上 ● 静的型付けによるバグの早期発見 Go言語によるバッチ処理 ● 高速な実行処理 ● 保守性の高さ ● クリーンアーキテクチャベースのディレクトリ構成

Slide 12

Slide 12 text

Copyright © NIFTY Corporation All Rights Reserved.  12  アーキテクチャ（アプリケーション）   ● ECS（Fargate） ● ECR ● ALB ● CloudFront インフラビルド＆デプロイ ● AWSリソースはすべてTerraformで管理 ● ecspressoをGitHub Actionsに組み込み、ブランチ戦略に則って自動的にデプロイするワークフローを構築

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Copyright © NIFTY Corporation All Rights Reserved.  14  アーキテクチャ（バッチ処理）   ● Lambda ● ECR ● Step Functions ● EventBridge ● Secrets Manager ● S3 ● Aurora Serverless v2 インフラデプロイ ● AWSリソースはTerraform ● バッチ本体は、Github Actions上でイメージにビルドし、ECRに自動的にpushするワークフローを構築 ● RIEを使ってローカルでも検証できる環境を構築フルマネージドサービスを活用し、安価かつ高速処理を実現

Slide 15

Slide 15 text

Copyright © NIFTY Corporation All Rights Reserved.  15  モニタリング   ● ログ ● アラート ● モニタリングダッシュボード ● SLO ● X-Ray CloudWatch CloudWatch RUM ● 社内初採用！ ● ウェブアプリのパフォーマンス、利用状況監視 SREチームによって充実したモニタリング環境を実現 OpenTelemetry ● 社内初採用！ ● アプリケーションのオブザーバビリティを実現するためのツール ● トレースを収集し、X-Rayで可視化

Slide 16

Slide 16 text

Copyright © NIFTY Corporation All Rights Reserved.  16  デザインシステム   ● デザインの一貫性が欠如し、各プロジェクトで個別にUIが作成されていた ● フルリニューアルのため、大量のアイコン、画面レイアウトの管理に困っていた課題社内初となるデザインシステムを導入 ● 今回は全社員がアクセスできるnotionでデザインシステムを作成 ● データベースを活用し、ファイル管理とみやすさの両立を実現実現方法

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Copyright © NIFTY Corporation All Rights Reserved.  22  フルリニューアル後の数値変化（※リリースして間もないためブレはあります）   離脱率 ● 旧環境と比較して55％のコスト削減インフラコスト ● 旧環境と比較して約20%減少地震情報表示 ● 15分近くかかっていたデータ反映を最短1分に短縮天気情報 ● 最大5分かかっていたデータ反映を最短1分に短縮

Slide 23

Slide 23 text

Slide 24

Slide 24 text