仮想待合室ソリューションのQueue-itをAkamai EdgeWorkersで構築する

# Queue-it とは

Queue-itは、大規模なイベントなどでトラフィックがサイトに集中し、システムが高負荷によりダウンすることを回避できる待合室ソリューションを提供します。ウェブサイトが予期せずアクセス過多に陥った場合に、ユーザーを待機させることで、サイトへの負荷を軽減することができます。Queue-itの仮想待合室はfirst-in, first-out (FIFO)を実装しており、アクセスしてきた人を順番に並ばせることができます。また、待機画面は自由にカスタマイズすることができ、サイトデザインに適したものを利用することができます。
Queue-itを実装するためには、いくつかの手法がありますが、Queue-itとパートナー関係にあるAkamai EdgeWorkersを利用することにより、オリジンサーバーに手を加えることなく実装することができます。

https://queue-it.com/jp/why-queue-it/

待合室では待ち時間の目安を確認することができ、利用者にリアルタイムにメッセージを送ることもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/ee3e9475-ee15-3a13-fe26-4ff6b4b8b4a6.png)


# Akamai EdgeWorkersとは何か？

Akamai EdgeWorkersは、AkamaiのCDN上でJavaScriptを実行することができる、世界最大級かつ低レイテンシーのサーバーレスプラットフォームです。
コード実行のランタイムにはGoogle V8 Engineを利用しています。
EdgeWorkers上で処理を実行することで、高速で大規模な処理能力を手に入れることができ、オリジンでの処理を肩代わりすることができます。
Queue-itのような仮想待合室ソリューションをEdgeWorkersで構築することにより、CDNで静的コンテンツのキャッシュ応答やボットアクセスの緩和を処理しつつ、オリジンへの正規アクセスをQueue-itによって流量制御することによってトラフィックを適切に管理し、サイトダウンを防ぐことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/3eacf2fd-b42e-7171-fd9e-121a0ef47fb7.png)


# Queue-itをEdgeWorkersで構築する。

Akamai EdgeWorkersを使用してQueue-itを構築するには、次の手順を実行する必要があります。

1. Queue-itで仮想待合室を作成します。
2. Akamai Queue-it Connectorをダウンロードし、Akamai Control Center(ACC)からEdgeworkerを構築します。
3. ACCからCDNの配信設定を修正し、Queue-itに転送するための設定を追加します。
4. 設定をStagingとProduction環境に反映し、サイトへのアクセスを確認します。

:::note info
AkamaiからQueue-itアカウントをご提供することが可能です。
:::

:::note alert
Queue-itとAkamai EdgeWorkersまたはCDNの設定をセルフインテグレーションすることは推奨しておりません、要件に合わせた実装が必要となるため実装時はAkamaiのアカウントチームにご相談ください。
:::


## Queue-itで仮想待合室を作成する

仮想待合室を作成します。

手順の参考となるQueue-itのクイックスタートガイドやテクニカルホワイトペーパーは以下から入手が可能です。

https://queue-it.com/jp/resources/white-papers/

Wating Rooms Configurationにサイトのドメインを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/aacffdd0-dca0-ff03-d4cb-635f7fef4c41.png)

Wating Rooms から仮想待合室を作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/437e1111-493c-6758-6d55-dce99bb994b4.png)

今回は常時稼働する仮想待合室を作成しますが、イベントの時にだけ動作する仮想待合室を用意することも可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/2317fc2b-2ae8-e9e1-3712-c55bde82b678.png)

idは待合室の識別子として利用します。Nameは訪問者を表示する際に利用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/0c189878-d7d7-e7e7-b830-c7f2eec7eaf7.png)

Targetを確認して、次へ進みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/c520873a-7cec-5470-2e96-87ca66be9959.png)

設定内容を確認して問題なければ、Createを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/78496ce1-5fac-1578-1bad-7d7a58e1ff2f.png)

ActionsからNew Actionsを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/1510e164-b84f-87e5-1a02-b16a2df6eeaa.png)

各項目を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/d3b78ffc-fcf1-638d-57cc-6362ce037984.png)

今回の設定値については以下となります。

Name : Action名
Wating Room : 先程作成したIDを指定
Theme : Default
Language : Japanese
Configuration : Default
Triggers : All Pages

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/3059c78f-5341-f5c8-8162-41be8751231f.png)

設定を反映させるためPublish Nowを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/cfd9b262-a22f-7215-f67c-c36ff02fe86d.png)

後の手順で、CDN上のEdgeWorkersrとの連動に必要となるAPI Keyを控えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/1a42d4be-c0c8-5353-ac4f-6798779d1a7a.png)

Secret keyも控えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/c5708cf6-06b0-1d41-a796-3072dbf2ec21.png)

## EdgeWorkersでQueue-it Connectorを構築する

構築手順は以下を参考にします。

https://github.com/queueit/KnownUser.V3.Akamai

ACCから新規のEdgeWorkerを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/0a4e8545-5755-a386-cf20-709a7a3ba811.png)

EdgeWorkersでQueue-itを動作させるためには、Dynamic Computeを選択する必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/12398fd1-74da-e75a-ecfd-f3e5d017dabd.png)

新規に作成するため、Create versionを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/d07b479b-52dc-60d9-0b6c-ab30d2a37742.png)

最新のAkamai Queue-it Connectorをダウンロード(執筆時点の最新は3.11)し、EdgeWorkersにアップロードします。

https://github.com/queueit/KnownUser.V3.Akamai/releases

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/2c09baf7-f0d3-8e79-e08a-10c7de1a0f41.png)

StagingとProductionにActivateします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/ba50a89e-6d03-aad8-840c-19d741cbe070.png)

各環境に展開されるのを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/a583df0b-02ec-6c05-be73-2501b6fa970d.png)

EdgeWorkersの作成は完了です。

## Akamai CDNのProperty設定をする

Property Variablesを設定します。先程Queue-itで控えた情報を利用して作成します。


| Variable | 必須 | Value | SECURITY SETTINGS |
| :---: | :---: | :---: | :---: |
| PMUSER_QUEUEIT_CUSTOMERID | Yes | Queue-it Customer ID |hidden|
| PMUSER_QUEUEIT_SECRET_KEY | Yes | Queue-it Secret key|hidden|
| PMUSER_QUEUEIT_CONFIG_TYPE | Yes |cache|hidden|
| PMUSER_QUEUEIT_API_KEY | Yes  | Queue-it API Key |
| PMUSER_TRUE_CLIENT_IP | Yes | ConnectorのIPを検証するために利用 | Visible |
| PMUSER_DEFAULT_HOST| EWが失敗した際に転送するホスト | %(AK_HOST) | hidden |
| QUEUEIT_TRIGGER | Queue-itに転送するアクセスにはEWを動作させないようにするフラグ |true| Visible |
| PMUSER_QUEUEIT_EXECUTED | Queue-itか実行されたかの確認フラグ | Queue-It EdgeWorkersは、この変数を`true`に設定します | Visible |
| PMUSER_QUEUEIT_GENERATE_EQTOKEN|EnqueueTokenを利用する際に設定| Optional boolean value ('true'/'false') where default is 'false'. |Visible |
| PMUSER_QUEUEIT_NO_KEY| EnqueueTokenを利用する際に設定 | Optional boolean value ('true'/'false') where default is 'false'. |Visible |
| PMUSER_QUEUEIT_EQTOKEN_VALIDITY | No | Default: 240000 ms if provided value is null or less than 30000 ms | Visible |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/6b2c6ddc-1dea-83cd-1090-8c1efd19123e.png)


３つのRuleを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/1b65b1df-adcd-efc2-de5d-4c904caf55e4.png)


Download IntegrationではQueue-itに転送する設定を行います。
Criteriaを設定します。

|If条件|値|マッチ条件|値|
|---|---|---|---|
|Path||matches one of|/queueit/integrationconfig/|
|Request Header|api-key|is one of|Queue-itのAPI Key|


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/04252203-ed5c-7195-7c0d-761c3ca95c26.png)

Behaviorを設定します。

|Behavior|設定名|設定値|
|---|---|---|
|Origin Server|Origin Server Hostname|{{user.PMUSER_QUEUEIT_CUSTOMERID}}.queue-it.net|
|Modify Outgoing Request Path|Action|Replace part of the incoming path|
||Find what|/queueit/integrationconfig/|
||Replace with|/status/integrationconfig/secure/{{user.PMUSER_QUEUEIT_CUSTOMERID}}/|
|Set Variable|Variable|PMUSER_QUEUEIT_TRIGGER|
||Create Value From|Expression|
||Expression|false|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/a59638c1-8882-a975-1e6e-0e84f90c93f3.png)

次にEdgeWorkersを動作させるためのRuleを修正します。

Queue-itへ転送させる処理にEdgeWorkersが動作しないように設定します。

|If条件|値|マッチ条件|値|
|---|---|---|---|
|Variable|PMUSER_QUEUEIT_TRIGGER|is one of|true|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/2c565a73-ccaa-c722-b598-9527dcdbbe2e.png)

Queue-itのConnectorが検証するIPを設定し、EdgeWorkersを動作させます。

|Behavior|設定名|設定値|
|---|---|---|
|Set Variable|Variable|PMUSER_TRUE_CLIENT_IP|
||Create Value From|Expression|
||Expression|{{builtin.AK_CLIENT_REAL_IP}}|
|EdgeWorkers|Enable|On|
||Identifier|作成したIDを指定|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/5d794ed3-a27f-4696-97ff-f0badb835a39.png)


最後に、EdgeWorkersの動作が失敗した場合の処理を追加します。


|If条件|値|
|---|---|
|EdgeWorkers Execution Status|Failure|

|Behavior|設定名|設定値|
|---|---|---|
|Site Failover|Enable|On|
||Action|Use alternate hostname in this property|
||Alternate Hostname in This Property|{{user.PMUSER_DEFAULT_HOST}}|Modify Request Path|No|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/28fa7aae-a922-bdd1-84f3-755e57fff92b.png)

作成したProperty設定をStagingとProductionに展開します。


## Queue-itの運用

サイトへアクセスし、Queue-itが適用されていることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/a1d92bfa-4142-0b03-1f87-7348e188cb53.png)

Queue-itのMonitor画面では実際の流用を確認しつつアクセス数を調整することが可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49877/fac99b6b-bc21-28f6-9d41-25d567fcc355.png)

**[Introducing the monitor tiles](https://support.queue-it.com/hc/en-us/articles/360018917414-Introducing-the-monitor-tiles)**

# まとめ

Akamai EdgeWorkersを使用することでオリジンサーバーに手を加えることなく、Queue-itの待ち行列システムを実装することができます。これにより、ウェブサイトの負荷を軽減し、ユーザーエクスペリエンスを向上させることができます。
Akamai EdgeWorkersは様々な処理をオリジンからクラウドへとオフロードすることができます。サンプルコードは以下のリンクから参照ください。

- [edgeworkers-examples](https://github.com/akamai/edgeworkers-examples)


Akamai はCDN、セキュリティ、クラウドサービスを通じ、オンラインライフの力となり守っています。本稿でご紹介したような課題やご相談があれば、お気軽にお問い合わせください
- [Akamai 営業担当者へのお問い合わせ](https://www.akamai.com/ja/why-akamai/contact-us/contact-sales)

# 関連記事

アカマイ・テクノロジーズ合同会社はQiitaでAkamai Cloud Computing Services関連など開発者向けの記事を掲載しております。

https://qiita.com/xenbase/items/52e2956a64cedc772bd9