@cosme SHOPPINGに仮想待合室を導入したら、想像してた〇倍効果があった話

## はじめに

この記事は [アイスタイル Advent Calendar 2024](https://qiita.com/advent-calendar/2024/istyle) 6日目の記事です。

こんにちは。アイスタイルでショッピングを担当しているtsuboikeと申します。

私、電子タバコ愛煙者の一人なのですが、紙タバコ吸ってる人を見てると100円ライターを使っている人が多い気がしてます。
マッチは見なくなりましたね。マッチ使ってる人って異質とも思える時代になったなぁと思います。

マッチは異質。マッチはいしつ。まっちわいしつ。まちあいしつ。。。
そう、**仮想待合室**のお話です！！
（ちょっと強引なくらいが丁度いいと思っている昭和世代のためご了承ください）


大手企業も採用している [Queue-it]() さんの仮想待合室を [＠cosme SHOPPING](https://www.cosme.com/) にも導入してみたら、弊社の一大イベント「ビューティーデー」開始時にサーバーを襲っていた負荷が、昨年までは「嵐」今年は「そよ風」くらいの壮絶な効果があったのでご紹介したいと思います。

## 昨年までの状況

改めまして弊社、年に一度の大イベント**ビューティーデー**というイベントを行っておりまして、いつも買ってる商品が**最大30%ポイントバック**で買えたり、**限定セットがお得な値段**で買えたり、**サンプルセットがもらえたり**と大変お得なイベントを **毎年12月1日～3日（予約は11月後半から）** に実施しております！！（宣伝）

<img width="70%"  alt="@cosme beauty day 2024" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3036117/bac1a125-7df6-67ec-361a-09fb1c6a4fe6.png">

そして商品の在庫には限りがあるので、特に人気商品の購入意欲の高い方々が、売り切れる前にとお越しいただき、イベント開始の瞬間には**通常の〇〇倍という刺激的なアクセス**が来るわけです。

**【去年のイベント開始時（12時）】**

![コメント 2024-12-05 003403.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3036117/d7edf5f1-b8af-2a8b-70a8-2e43ccede134.png)

**MAX <font color="red">81%強！！</font>（どんだけぇ～！！）**

もちろん対策はしていて、数か月前から負荷対策プロジェクトを立ち上げてあれやこれやと改修やチューニングしたり、当日のサーバー台数をウン倍にして待ち構えているわけです。

ただ残念ながら過去には

 　**「アットコスメのサイトが重い」**

 　**「サイトに繋がらなくて事前予約できなかった」**

というユーザー様のお声がありました。

負荷対策を頑張っている一方、毎年ユーザー様が増えてくださるお陰で、前年以上の対策が必要なのです。。。
（愚痴ではなく<font color="HotPink">**嬉しい悲鳴**</font>です！！いつもご愛用ありがとうございます！！）

そして細分化すると150以上のシステムが絡み合ってる弊社システム。

どこかのシステムが高負荷に耐えられずお亡くなりになると、そこをボトルネックに、そのシステムを呼んでいる所、それをまた利用している所、のように連鎖的にお亡くなり（もしくは激重）になります。

そのような多岐にわたるシステム構成も相まって、**負荷対策の難しさを痛感**しておりました。

という事で、実は昨年から導入を試みてましたが昨年はステージでの検証までとなった**仮想待合室**、今年は晴れて導入することができました！！

仮想待合室の概要・動作イメージは、弊社のヘルプページに解説がございます。

https://www.cosme.com/help/help_28.html


## 導入方法の検討

導入方法は色々とあるようですが、一番簡単そうだったのはフロントエンドのHTMLにJavaScriptのスクリプトを組み込むというもの。

**【クライアント側 (JavaScript) への実装】**

https://queue-it.com/developers/connectors/#client-side-javascript

ただし、この方法だと**サイトを開いてJavaScriptを実行する必要がある**ので、遅延読み込みを入れたシングルページのサイトならともかく、弊社のようなコントローラーでデータをとってきてビューで表示、という構造のサイトだとサーバー負荷観点では効果は薄い。

という事で、フロントサーバーに来る前に仮想待合室に飛ばすためにCloudFront に導入する手法を用いました。

**【CloudFront への実装】**

https://queue-it.com/developers/connectors/cloudfront-connector/

導入に当たり、アレやコレやの困難はあったものの無事（？）にビューティーデーまでに実装できました。

結果はというと。。。

## 今年の状況


**【今年の開始時】**

![コメント 2024-12-05 004318.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3036117/e00c8e45-64cf-09c8-00e9-77a99099e66b.png)

**<font color="LimeGreen">MAX14%ちょい</font>（そよ風ぇ～！！）** ←「どんだけぇ～」のリズムでお願いします

**去年と同じサーバー構成** で **MAX14%ちょいの負荷**となり、その後も緩やかに落ちていくのが分かります。

ちなみにMAXに上がる前に落ち込んでいるのは、サイトを回遊しているお客様も**10分前には皆待合室に誘導する**という設定で負荷が落ちています。

そしてそして、負荷は下がってはいるのですが、ユーザー様が待合室で待っている時に離脱してしまっては本末転倒。

肝心のユーザー様の注文画面までのアクセス数は、イベント開始直後で**昨年の約1.5倍** になっていました！！（数字はざっくりと丸めております）

帽子が脱げると書いて脱帽！！

また、＠cosme SHOPPING が平和だったという事は、ログイン時に参照している会員系のシステムや、購入時の決済系システム、クチコミ系のシステムなどなど、多岐にわたり問題なく、無事にビューティーデー2024を終了することができました！！

気になるユーザー様からは

　**「仮想待合室のおかげでスムーズにストレスなく買い物出来た！」**
 
　**「今年は買い物しやすかった、待合室システムのおかげかな？」**
  
というありがたいお言葉を沢山頂いておりました（涙）


## 今回の考察
* 瞬間的なアクセス増は仮想待合室をお試しあれ（多くのチケットサイトで採用されている意味が身をもって分かった）
* 仮想待合室にもコストは掛かるが、サーバー費用はコストダウンできる
* 負荷対策として手を動かしてた工数を、別の開発に充てられる

## 最後に
仮想待合室導入時に苦労したことなども書きたいのですが、セキュリティ観点で何処まで書けるかは未知数。

ただ、今後機会を頂けたら新たな記事を執筆したいと思っております。

あ、ちなみに弊社、年始に[**初売りセール**](https://www.cosme.com/static/feature/dir/hatsuuri/)というお得なイベントも開催していますので、ぜひ年明けにサイトをご覧になってください！！（宣伝）

<img width="70%"  alt="@cosme hatsuuri 2025" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3036117/f31325dc-7d63-07b8-9d00-49fddb20b697.png">

最後に、アットコスメを通じて、**皆様が良きコスメ、良きブランド様に出会えること**を心より願っております！！

https://www.cosme.com

それでは、明日も [アイスタイル Advent Calendar 2024](https://qiita.com/advent-calendar/2024/istyle) をお楽しみください！！