大手小売向けECサイトと管理サイトを⁠、React + Lumen でリプレイス

プロジェクトでの変化

• リプレイス対象
  ECサイト + 管理サイト
• 進行管理
  計画通りに段階リリース
• 運用切替
  業務停止を最小化

課題

動いているECサイトと管理サイトを⁠、同時に作り替える案件でした⁠。切り替えの時期は⁠、業務側と運用側それぞれの都合に合わせて決める必要があります⁠。小売の繁忙期は動きません⁠。その時期に止めるという選択肢がない以上⁠、リリースの順序は業務カレンダーから逆算するしかありませんでした⁠。加えてフロントとAPIの両方で構成が変わります⁠。影響範囲を先に見えるようにしておかないと⁠、どこで何が壊れるか分からないまま進むことになります⁠。

アプローチ

1. 01 現行サイトの機能を画面・API単位で棚卸ししました
2. 02 React + Redux でフロント⁠、Lumen でAPI層を再設計しました
3. 03 Dockerで開発・ステージング・本番の環境を統一しました
4. 04 業務側と切替計画を握り⁠、段階リリースで影響を局所化しました
5. 05 繁忙期を避けたリリースカレンダーを業務側と合意し⁠、無理のない進行管理を行いました
6. 06 切替後の運用引き継ぎを意識し⁠、運用ドキュメントとモニタリング項目を設計と並行して整備しました

成功要因

画面・API単位の棚卸し

稼働中システムを画面・API単位で棚卸しし⁠、リプレイスの影響範囲を見える化しました⁠。

段階リリース運用

現行と並走しながら段階リリースし⁠、業務停止を最小化する切替計画を業務側と握って進めました⁠。

フロント・APIの責務分離

React + Reduxのフロントと Lumen のAPIを分離設計し⁠、双方の変更が互いに引き摺らない構造を取りました⁠。

環境統一による検証速度

Docker で開発・ステージング・本番の環境を揃え⁠、リプレイス中の検証回数を担保しました⁠。

ソリューション

React + Redux のフロントと Lumen ベースのAPIを Docker 上に構築し⁠、現行システムと並走させながら少しずつ切り替えました⁠。PMとして関係部門との調整も引き受けています⁠。業務カレンダーに合わせて段階的に出したことで停止時間を抑え⁠、繁忙期に入る前にコア機能の移行を終えました⁠。フロントとAPIの責務を分けた効果は⁠、その後の機能追加で表れています⁠。