Edge Website Building

이 예제에서는 Edge KV와 Edge Cloud Apps 함수를 사용하여 작은 정적 웹사이트를 구축하는 방법을 보여줍니다. 함수는 URL 경로를 기반으로 Edge KV에서 파일을 검색하고, 적절한 콘텐츠 유형을 결정하고, 콘텐츠를 클라이언트로 다시 보냅니다. 이 접근 방식은 고성능, 고가용성 및 낮은 지연 시간으로 경량 정적 웹사이트를 빠르게 배포하는 데 이상적입니다.

에지 정적 웹사이트의 이점

• 서버리스 아키텍처: 기존 웹 서버가 필요하지 않으므로 운영 비용이 절감됩니다.
• 분산 배포: 웹사이트 리소스는 분산된 Edge KV에 저장되어 웹사이트 가용성과 내결함성이 향상됩니다.
• 즉각적인 업데이트: 웹사이트 콘텐츠 업데이트가 모든 에지 노드에 빠르게 동기화되어 빠른 배포가 가능합니다.
• 사용자 근접성: 사용자는 가장 가까운 에지 노드에서 웹사이트 콘텐츠에 액세스할 수 있으므로 지연 시간이 최소화되고 사용자 경험이 향상됩니다.

이 예제에서 Edge KV는 HTML 파일, 이미지 및 비디오와 같은 웹사이트의 정적 리소스를 저장하는 역할을 합니다. Edge Cloud Apps 함수는 사용자 요청을 처리하고, 요청된 URL을 기반으로 Edge KV에서 해당 리소스를 검색하고, 사용자에게 반환합니다.

코드 예제

/* 
 * Edge KV의 데이터 저장 형식:
 * | 키            | 값        |
 * | -------------- | ------------ |
 * | /index.html    | 해당 파일 데이터 |
 * | /img/about.jpg | 해당 파일 데이터 |
 * 요청된 URL이 http://www.test.com/catalog-z/index.html이라고 가정합니다.
 * 끝에 있는 파일 이름인 /index.html을 키로 사용하여 파일 데이터를 검색합니다.
 */
async function handleRequest(request) {
    // URL에서 요청된 파일 이름을 가져옵니다.
    let { pathname } = new URL(request.url.toLowerCase());
    if (pathname.endsWith('/')) { 
        pathname = pathname.substring(0, pathname.length - 1); 
    }
    pathname = pathname.substring("/catalog-z".length); // 경로 접두사 제거
    if (pathname === '') { 
        pathname = '/index.html'; // 기본값은 index.html입니다.
    }

    // 파일 이름을 키로 사용하여 Edge KV에서 파일 콘텐츠를 검색합니다.
    // 네임스페이스는 파일을 업로드할 때 사용된 "catalog_z2"입니다.
    const kv = new EdgeKV({namespace: "catalog_z2"});
    const content = await kv.get(pathname, {type: "stream"});

    // 파일을 찾을 수 없는 경우 404 오류를 반환합니다.
    if (content === null) {
        return new Response("페이지를 찾을 수 없습니다", {status: 404}); 
    }

    // 클라이언트에 대한 응답을 생성합니다.
    const contentType = contentTypeOfFile(pathname); // 파일 이름을 기반으로 콘텐츠 유형을 결정합니다.
    const headers = { 'Content-Type': contentType, 'Cache-Control': 'max-age=180' }; // 캐시 제어 설정
    console.log(`요청된 파일 이름: ${pathname}, 유형: ${contentType}`); 
    return new Response(content, {headers: headers}); 
}

// 파일 확장자를 기반으로 콘텐츠 유형을 결정합니다.
function contentTypeOfFile(fileName) {
    const ext = fileName.split('.').pop();
    switch (ext) {
        case 'html':    return 'text/html';
        case 'css':     return 'text/css';
        case 'js':      return 'application/javascript';
        case 'jpg':     return 'image/jpeg';
        case 'png':     return 'image/png';
        case 'mp4':     return 'video/mp4';
        case 'eot':     return 'application/vnd.ms-fontobject';
        case 'svg':
        case 'svgz':    return 'image/svg+xml';
        case 'woff':    return 'font/woff';
        case 'woff2':   return 'font/woff2';
        default:        return 'application/octet-stream';
    }
}
                    
addEventListener("fetch", event => {
    return event.respondWith(handleRequest(event.request));
});