边缘建站

本示例展示如何利用Edge KV和Edge Cloud Apps 函数搭建一个小型的静态网站，当您需要快速搭建一个轻量级的静态网站，并希望网站具备高性能、高可用性和低延迟等优势时，可以采用此方案。

边缘静态网站的优势

• 无需服务器: 无需搭建和维护传统的 Web 服务器，降低运维成本。
• 分布式部署: 网站资源存储在分布式的Edge KV中，提高网站的可用性和容错能力。
• 快速更新: 网站内容更新后，可以快速同步到各个边缘节点，实现快速上线。
• 就近访问: 用户可以从最近的边缘节点获取网站内容，降低访问延迟，提升用户体验。

本示例中，Edge KV 负责存储网站的静态资源，例如 HTML 文件、图片、视频等，而Edge Cloud Apps 函数则负责处理用户请求，根据请求的URL从Edge KV中获取相应的资源并返回给用户。

详细代码

/* 
 *Edge KV 中的数据存储格式如下：
 *| KEY            | VALUE        |
 *| -------------- | ------------ |
 *| /index.html    | 相应文件数据   |
 *| /img/about.jpg | 相应文件数据   |
 *假设请求 URL 为：http://www.test.com/catalog-z/index.html
 *我们取末尾的文件名 /index.html 作为 key，就可以拿到这个文件的数据 
 */
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

    // 以文件名为 key 从 Edge KV 中取出文件内容，注意 namespace 是之前上传文件时使用的 catalog-z
    const kv = new EdgeKV({namespace: "catalog_z2"});
    const content = await kv.get(pathname, {type: "stream"});
    if (content == null) {
        // 如果未找到文件，返回 404 错误
        return new Response("Page not found", {status: 404}); 
    }

    // 将取到的文件响应给客户端
    const contentType = contentTypeOfFile(pathname); // 根据文件名设置 Content-Type
    const headers = { 'Content-Type': contentType, 'Cache-Control': 'max-age=180' }; // 设置缓存控制
    console.log(`请求文件名：${pathname}，类型为：${contentType}`); 
    return new Response(content, {headers: headers}); 
}

// 根据文件扩展名判断 Content-Type
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));
});