はじめに

こんにちは、エアークローゼットでエンジニアをしているNghiaです。
この記事は、エアークローゼット Advent Calendar 2022 の7日目の記事です！よろしくお願いします！

背景

エアークローゼットの倉庫管理システムでは在庫引当作業があります。
在庫引当とは、受注した段階で発注者のために在庫を確保しておくことです。実際の在庫の動きは伴いませんが、将来レンタルされる予定のため、別の発注者にレンタルできません。

旧ワークーフロー：

1. 倉庫管理者が管理画面で引当実行リクエストをAPIサーバーへ送ります。

2. サーバーで引当実行処理します。

3. (2)が完了したら、結果を画面に返します。

課題としてはデータ量がどんどん多くなって、(2)が完了できるまで時間かかるようになりました。結果、引当成功してるのにタイムアウトエラーになって、倉庫管理者が結果確認できなくなってしまいました。ここの引当実行処理はLong Tasksと呼ばれます。

そのため、引当実行画面のUXを改善するのが必要となりました。

対応方針

UX改善するため、Long tasks処理とAPI処理を分離することをしました。アーキテクチャが以下となります。

1. 引当実行依頼リクエストをメッセージキューに送ります。

2. リクエスト受付完了ステータスをフロントに返します。

3. 裏側で引当実行処理します。

4. 引当完了したら、フロントに通知します。

5. 倉庫管理者が引当処理進捗確認できるように。

新しいワークーフロー

1. 倉庫管理者が引当実行依頼リクエストをAPIへ送ります。

2. APIが即時に引当実行処理することの代わりに、受付完了のレスポンスをフロントへ返します。

3. 同時に引当実行リクエストをメッセージキューへ送ります。

4. メッセージがキューに来たら、裏側のワーカーが非同期トリガーされて、引当実行開始になります。

5. 進捗と実行結果をどんどんNoSQLに保存します。

6. フロント側がロングポーリングプロトコルで実行進捗と引当結果を取得します。

7. 引当完了したら、結果をフロントに一括表示させます。

倉庫管理者が引当進捗と最後の結果を確認できて、安心でシステム使えるようになりました。

まとめ

Long tasks処理とAPI処理を分離アーキテクチャで引当実行画面のUXを改善できました。システムの規模がどんどん大きくなったら、アーキテクチャも変化になるのは避けられないと思います。
エアクロでは、エンジニアに多くの新しい経験をさせていただきますので、皆様もご興味あればぜひぜひ！->採用サイト

最後に

最後までご覧いただきありがとうございました🙇‍♂️
エアークローゼット Advent Calendar 2022はまだ続きますので、ぜひ他のエンジニア, デザイナー, PMの記事もご覧いただければと思います。

次はエンジニアのtangoさんです！
よろしくお願いします！