内製化によるシステムモダナイゼーションの実践

JJUG CCC 2024 Fall の登壇資料です

Transcript

1. Copyright© CREDIT SAISON Co., Ltd. All Right Reserved . 内製化によるシステムモダナイゼーションの実践 株式会社クレディセゾン テクノロジーセンター EXグループ 奥村和彦
2. Copyright© CREDIT SAISON Co., Ltd. All Right Reserved . 2 自己紹介 @kazokmr 奥村 和彦 クレディセゾン テクノロジーセンター EXグループ 4課 所属 1. 電⼦機器の設計会社 ラジオ/オーディオ製品の電気回路設計・基板設計 2. SES プログラマー 3. (株)NSP ⾃社パッケージの開発・導⼊・保守 4. リックソフト(株) Atlassianツールのプリセールスエンジニア 5. 弥⽣(株) 新規プロダクト開発チームのテックリード 6. (株)クレディセゾン 2023年9⽉⼊社 Netアンサー開発チーム
3. Copyright© CREDIT SAISON Co., Ltd. All Right Reserved . 3 チームの役割とNetアンサー 基幹システム 社内API基盤 会員向けWebサービス 内製化チーム担当 各種お⼿続きを受付け、基幹システムへ問い合わせ と申込を⾏う会員向けWebサービス クレディセゾンのNetアンサー以外にもクレジット カード発⾏会社の会員向けサービスの開発・保守も 担当している
4. Copyright© CREDIT SAISON Co., Ltd. All Right Reserved . 2005年〜 2025年04⽉〜 2024年4⽉〜 4 Netアンサーの歴史 l 2005年サービス開始。オンプレミスで運⽤。これまで2回の更改。 l 2024年4⽉から、AWSへリフトし既存アプリはEC2、 明細照会機能はリプレースしてEKSへ l 2024年7⽉から、既存アプリのフレームワークをSpringへ移⾏しEKSへ VPC Amazon EC2 Amazon EKS Amazon RDS VPC Amazon EKS Amazon RDS データセンター (オンプレミス) 内製化チーム 参画 FW移⾏チーム 結成
5. Copyright© CREDIT SAISON Co., Ltd. All Right Reserved . 5 「クラシック」と「モダン」にサービスを分割 モダン クラシック Servlet JSP REST API Javascript modules Netアンサー Database (PostgreSQL) SessionCache (Redis) ①利⽤する機能をリクエスト ②JSPからHTMLを⽣成して返す モダンを呼ぶ場合はJSを定義する ③HTMLに定義した JSモジュールをロードする ④モダンのAPIにリクエストし、 JSONを読み込んでレンダリング CDN/ Ingress l 既存のサービスを移⾏した「クラシック」と 新規機能を中⼼とした「モダン」にサービスを分割 l クライアントからのリクエストはまず、クラシックで受け付けて処理する l モダンが担当する機能であれば処理を委譲する
6. Copyright© CREDIT SAISON Co., Ltd. All Right Reserved . 6 フレームワークを Struts1 から Spring Boot3 へ クラシック Tomcatサーバー 組み込みTomcat ActionServlet RequestProcessor ActionForm Action JspServlet 業務ロジック web.xml struts- config.xml DispatcherServlet Controller 業務ロジック HTTP リクエスト UseCase/Service Tomcatサーバー + Struts1 (TERASOLUNA 1) SpringBoot 3 JSP 業務ロジックとViewの移⾏が課題 Model and View
7. Copyright© CREDIT SAISON Co., Ltd. All Right Reserved . 7 業務ロジックとViewは既存コードを使う 組み込みTomcat RequestProcessor ActionForm Action JspServlet 業務ロジック struts- config.xml DispatcherServlet Controller JSP @Controller public class HogeController { private final RequestProcessor requestProcessor; @RequestMapping( method = {RequestMethod.GET,RequestMethod.POST}, path = {"*.do", "*/*.do"} ) public void process(HttpServletRequest request, HttpServletResponse response){ requestProcessor.process(request, response); } } l HTTPリクエストの受け付けはSpring MVC l 業務ロジックのハンドリングはStruts1 l URL は ”.do” のまま クラシック
8. Copyright© CREDIT SAISON Co., Ltd. All Right Reserved . 8 クラシックとはいえ モダン化も実施 l Javaの実⾏環境を 8 から 21 へ l 利⽤できなくなったAPI の最新化 l Virtual Threads の有効化 l Spring FWのライブラリの活⽤ l Spring Session l セッションをRedisにキャッシュし、アプリをステートレスに l Spring Cloud l 機密情報(secrets)の管理を従来のファイル管理から AWS Secrets Managerに変更 l Spring Boot Actuator l ADOT (AWS Distro for OpenTelemetry) と連携してMetrics と Logs を AWSに転送 l 構成管理に Gradle を導⼊ l 10社で分かれていたリポジトリをモノレポ構成に変更。共有ライブラリもサブプロジェクトにした l ソースコード管理を Subversion から Git (GitHub) に移⾏ l 移⾏期間中は 既存のSubversionで作業した内容を⽇次連携してGitHub に取り込み クラシック
9. Copyright© CREDIT SAISON Co., Ltd. All Right Reserved . 9 フロントエンドアプリ と バックエンドAPIサービスに分ける 業務API クレディ セゾン A社 B社 C社 D社 E社 F社 G社 H社 I社 クレディ セゾン A社 B社 C社 D社 E社 F社 G社 H社 I社 モダン クラシック フロントエンド •TypeScript/Javascript •Svelte •Vite バックエンド •Java •Spring Boot •Gradle l 画⾯デザインや提供機能など会社ごとに異なるフロントエンドは会社別のアプリで提供 l 基幹システムと連携する業務ロジックは全社共通のAPIサービスに集約して提供 • 会社ごとにコードが分割 • 業務ロジックもViewが冗⻑化 モダン API
10. Copyright© CREDIT SAISON Co., Ltd. All Right Reserved . 10 UI/UXの向上を主管部⾨と⼀緒に進めている l クレディセゾン社内向けに ドキュメントサイト を公開している l Storybook で 開発中画⾯を公開し、主管部⾨とユーザー部⾨が早期に確認できるようにしている モダン
11. Copyright© CREDIT SAISON Co., Ltd. All Right Reserved . 11 開発フローの改善 l テスト ~ ビルド ~ デプロイ の ⾃動化 によって リリースイベントを⽇常的なものにした テスト戦略 • E2E (Playwright) • シナリオベースに⼀連の操作をチェック • API (Karate) • APIの⼊出⼒バリエーションをチェック • 周辺システムは Wiremock から stubを返す • ユニット(JUnit/Vitest/Testing-library) • メソッド/関数の⼊出⼒が想定通りかチェック • Viewの正しさはStorybookで確認 • DBはDockerコンテナを利⽤しMockにしない CI/CD • GitHub Actions • ⾃動テスト(Unit, API, E2E を全て実施) • イメージをビルドし AWS ECRにプッシュ • AWS • CDK (Java) で サービスの IaC を実現 • Kubernetes (AWS EKS) • ArgoCD の Blue/Green デプロイを採⽤ • kustomize で 本番と検証の環境差分を管理 モダン クラシック
12. Copyright© CREDIT SAISON Co., Ltd. All Right Reserved . 12 クラシックのREST API 化 • クラシックのレスポンスの Content-type を `text/html` から `application/json` にする • struts-config.xml の JSPへの forward を削除して RequestProcessorで JSPの処理をスキップ • RestController で `request.getSession()` から レスポンスオブジェクトを⽣成しJSONで返す <action path="/hoge” <!--<forward name="success" path="/hoge.jsp"/>--> </action> public void process(HttpServletRequest request, HttpServletResponse response){ ... If (!processForward(request, response,mapping)) { return; } ... } @PostMapping("/fuga.do") Res fugaController(HttpServletRequest request, HttpServletResponse response) { requestProcessor.process(request, response); return fugaHelper.convertFuga(request); } public class FugaHelper { Res convertFuga(HttpServletRequest request) { HttpSession session = request.getSession(); return new Res(session.getAtribute(”key”); } } struts-config.xml RequestProcessor は forward先が無いので終了 RestController で 業務ロジックの結果をJSONに変換 クラシック
13. Copyright© CREDIT SAISON Co., Ltd. All Right Reserved . 業務ロジック （ユースケース） 13 クラシック と モダン から フロントエンドSSR と バックエンドAPIへ 1. クラシックの業務ロジックをモジュール分割する 2. RestController と 分割した業務モジュール を モダンサービスのバックエンドAPIに統合 3. クラシックの Struts1の設定 と JSP を廃⽌し SvelteKit (SSR)によるフロントエンドサーバーに 業務ロジック ⼿続き1 ⼿続き2 API Client DAO ⼿続き1 ⼿続き2 API Client DAO バックエンドAPI SvelteKit JSP struts- config 業務 ロジック API Client DAO 業務 ロジック API Client DAO Svelte コンポー ネントA Svelte コンポー ネントB クラシックの業務ロジックのメソッドを クラスに分割して、業務ロジックは ユースケースとして個々のクラスを呼ぶ 「クラシック」と「モダン」 から 「SvelteKit 」と「APIバックエンド」へ +
14. Copyright© CREDIT SAISON Co., Ltd. All Right Reserved . 14 Netアンサー の 未来 l まだまだモダン化できることが沢⼭ある l 基幹システム周辺はNetアンサー以外も システム更改 と サブシステムの新規開発を計画中 バックエンド • クラシックの業務ロジックのモダン化 • 全ての業務をAPIサービス化 • Java 25, Spring Boot 4 への対応 フロントエンド • UI/UX改善を 全社のWebサイトに展開 • マスタコンポーネントの 整備 • Svelte 5 対応 インフラ・CI/CD • パフォーマンスや運⽤監視の最適化 • EKSクラスタのアップデート対応 • 新規システムのAWS構築 システムアーキテクチャ • 新規案件やバッチ移⾏のコントロール • 開発プロセス、システムの改善 • チームリード(技術⼒向上の施策など)
15. Copyright© CREDIT SAISON Co., Ltd. All Right Reserved . 15 https://hrmos.co/pages/980004249767264257/jobs/0000138 • テクノロジーセンターのこともっと詳しく知りたい • テクノロジーセンターのメンバーとお話ししたい • 事業会社で内製化開発に興味がある ⇦ こちらまでお問い合わせください！ (URLは↓)