Virtual Waiting Room

이 예제에서는 Edge Cloud Apps 함수를 사용하여 웹사이트의 특정 페이지에 대한 액세스를 제어하는 가상 대기실을 구현하는 방법을 보여줍니다. 이는 전자 상거래 프로모션, 제품 출시 또는 콘서트 티켓 판매 중과 같이 높은 트래픽 급증이 예상될 때 특히 유용합니다. 가상 대기실은 사용자 액세스를 관리하고 갑작스러운 트래픽 급증으로 인해 오리진 서버가 과부하되는 것을 방지합니다.

이 예제에서는 애완동물 가게 웹사이트의 “팀” 페이지를 시뮬레이션하고 이에 대한 가상 대기실을 설정합니다. 대기실은 최대 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는 대상 페이지에 연결된 클라이언트와 대기열에서 대기 중인 클라이언트에 대한 정보를 저장하는 "연결 풀"과 "대기 풀"이라는 두 가지 필수 데이터 풀을 유지 관리합니다. 함수는 "클라이언트 IP + 사용자 에이전트"와 같은 정보를 사용하여 클라이언트를 식별하고 액세스 타임스탬프와 함께 키-값 쌍으로 Edge KV에 이 정보를 저장합니다. 클라이언트가 액세스하면 함수는 클라이언트의 쿠키를 검사하여 새 방문자인지 아니면 이미 대기열에 있는지 확인합니다. 함수는 키-값, 자동 만료 메커니즘 및 정렬 기능을 활용하여 클라이언트 대기열, 시간 초과 제어 및 동시 액세스 제한을 효과적으로 구현하여 가상 대기실의 원활한 작동을 보장합니다. 사전 정의된 규칙에 따라 함수는 사용자를 대상 페이지 또는 대기 페이지로 안내합니다.
• 동시 방문자 수, 대기 시간, 대기 페이지 새로 고침 간격과 같은 대기실 매개변수를 특정 요구 사항에 맞게 조정할 수 있습니다.
• 사용자 경험을 향상시키기 위해 generateWaitingPage 및 generateBusyPage를 사용자 지정하여 각각 개인화된 대기 페이지와 사용량이 많은 페이지를 표시할 수도 있습니다.