Overview
Basic Concepts
Quick Start
Manage Functions In Edge Cloud Apps
Function Deployment
Trigger Your Functions
Edge KV
Developer Tools
Examples
Examples Overview
Page Rewriting
Terminal-Based Content Adaptation
Edge Rendering
Edge Website Building
Request Signature and Legitimacy Verification
Multilingual Support with WASM
Site Proxy
Websocket Interaction
Virtual Waiting Room
Runtime APIs
CloudIDE
Limits

Virtual Waiting Room

最終更新日:2024-09-03 17:00:41

この例では、Edge Cloud Apps関数を使用して、Webサイトの特定のページへのアクセスを制御する仮想待合室を実装する方法を示します。これは、Eコマースのプロモーション、製品の発売、コンサートチケットの販売中など、高トラフィックの急増が予想される場合に特に役立ちます。仮想待合室は、ユーザーアクセスを管理し、突然のトラフィックの急増によってオリジンサーバーが過負荷になるのを防ぎます。

この例では、ペットショップのWebサイトの「チーム」ページをシミュレートし、そのための仮想待合室を設定します。待合室では、最大1人の同時訪問者(正常に入室すると15秒間の直接アクセスウィンドウ)と2人のキューサイズが許可されます。 簡略化された単一マシンのテストでは、「クライアントIP +ユーザーエージェント」が固有のクライアント識別子として使用されます。

コード例


import { waitingRoomSingle } from "./wslib-waiting-room-single"

async function handleRequest(request) {
    const headers = request.headers
    const url = new URL(request.url)
    const clientID = headers.get("cdn-src-ip") + headers.get("user-agent") // アクセスターミナルを識別するためにクライアントが決定します
    if (!clientID) {
        return fetch(request)                           // ターミナル識別子がない場合、待合室ロジックを適用できません
    }
    const roomID = url.hostname                         // クライアントがどのURLスコープが待合室を共有するかを決定します
    const args = {
        connectedTimeout: 15,                           // 接続プールに挿入されたデータが自動的に削除されるまでの期間
        connectedMax: 1,                                // 許可される最大接続クライアント数
        waitingTimeout: 30,                             // 待機プールに挿入されたデータが自動的に削除されるまでの期間
        waitingMax: 2,                                  // 許可される最大待機クライアント数
        waitingPageMaxRefreshInterval: 3,               // 待機ページを更新する最大間隔
        generateWaitingPage: null,                      // 待機ページを生成するためのカスタマイズ可能なコードです。提供されない場合は、デフォルトのページが使用されます
        generateBusyPage: null,                         // ビジーページを生成するためのカスタマイズ可能なコードです。提供されない場合は、デフォルトのページが使用されます
    }

    const resp = await waitingRoomSingle(request, roomID, clientID, args)
    // テストの便宜上、ブラウザのキャッシュを無効にします
    resp.headers.delete('ETag')
    resp.headers.delete('Last-Modified')
    return resp
}
                    
addEventListener("fetch", event => {
    return event.respondWith(handleRequest(event.request))
})

注意

  • Edge Cloud Apps関数によって提供される仮想待合室機能は、クライアントの状態を保存および管理するためにEdge KVを活用します。Edge KVは、ターゲットページに接続されているクライアントとキューで待機しているクライアントに関する情報をそれぞれ保存する、「接続プール」と「待機プール」という2つの重要なデータプールを維持します。関数は、「クライアントIP +ユーザーエージェント」などの情報を使用してクライアントを識別し、アクセス時のタイムスタンプとともにキーバリューペアとしてEdge KVにこの情報を保存します。クライアントがアクセスすると、関数はクライアントのCookieを調べて、新規訪問者なのか、すでに待機キューにいるのかを確認します。関数は、キーバリュー、自動有効期限メカニズム、およびソート機能を利用して、クライアントのキューイング、タイムアウト制御、および同時アクセス制限を効果的に実装し、仮想待合室のスムーズな運用を保証します。事前定義されたルールに基づいて、関数はユーザーをターゲットページまたは待機ページのいずれかに誘導します。
  • 同時訪問者の最大数、待機時間、待機ページの更新間隔などの待合室のパラメータを、特定の要件に合わせて調整できます。
  • ユーザーエクスペリエンスを向上させるために、generateWaitingPagegenerateBusyPageをカスタマイズして、それぞれパーソナライズされた待機ページとビジーページを表示することもできます。