Redis @ Edge กับ Cloudflare Workers

Computing at the Edge เป็นหนึ่งในความสามารถที่น่าตื่นเต้นที่สุดในช่วงไม่กี่ปีที่ผ่านมา CDN ช่วยให้คุณเก็บไฟล์ของคุณไว้ใกล้กับผู้ใช้มากขึ้น Edge Computing ช่วยให้คุณสามารถเรียกใช้แอปพลิเคชันของคุณได้ใกล้ชิดกับผู้ใช้มากขึ้น ซึ่งช่วยให้นักพัฒนาสร้างแอปพลิเคชันที่มีประสิทธิภาพและเผยแพร่ไปทั่วโลก

Cloudflare Workers เป็นผลิตภัณฑ์ชั้นนำในพื้นที่นี้ในขณะนี้ มันให้สภาพแวดล้อมการประมวลผลแบบไร้เซิร์ฟเวอร์แก่คุณโดยไม่ต้องเริ่มเย็น คุณใช้ประโยชน์จากเครือข่ายทั่วโลกของ Cloudflare เพื่อลดเวลาแฝงของแอปพลิเคชันของคุณ คุณสามารถเขียนฟังก์ชันของคุณใน Javascript, Rust, C และ C++

คล้ายกับฟังก์ชัน Serverless (AWS Lambda เป็นต้น) Cloudflare Workers ไม่มีสถานะ ดังที่คุณเห็นในแบบสำรวจของ Cloudflare นักพัฒนากำลังขอวิธีเชื่อมต่อฐานข้อมูลจากฟังก์ชัน Edge น่าเสียดายที่ฐานข้อมูลส่วนใหญ่ไม่ได้ออกแบบมาสำหรับสภาพแวดล้อมแบบไร้เซิร์ฟเวอร์ แต่ต้องการการเชื่อมต่อแบบถาวร เราพัฒนา REST API บน Redis เพื่อเปิดใช้งานฟังก์ชัน edge แบบไร้เซิร์ฟเวอร์เพื่อเข้าถึง Upstash ด้วยวิธีที่ง่ายที่สุดและเร็วที่สุด

เปรียบเทียบกับ Cloudflare Workers KV

Cloudflare มีที่เก็บค่าคีย์พื้นฐานที่คุณสามารถใช้เพื่อจัดเก็บสถานะของฟังก์ชัน Edge ของคุณได้ Upstash Redis เหนือกว่า Cloudflare KV ในหลายๆ ด้าน:

• Cloudflare KV มีฟังก์ชันรับ/ตั้งค่า/ลบพื้นฐานเท่านั้น Upstash ให้โครงสร้างข้อมูล Redis ทั้งหมดแก่คุณ ซึ่งคุณสามารถสร้างฟังก์ชันการทำงานที่ซับซ้อนยิ่งขึ้นได้ (แฮช รายการ ชุดที่จัดเรียง ช่วง การต่อท้าย การเพิ่มขึ้น ฯลฯ)
• Cloudflare KV ได้รับการออกแบบให้สามารถเข้าถึงได้จากระบบนิเวศ Cloudflare ในขณะที่คุณสามารถเข้าถึงและใช้ Upstash Redis ได้จากทุกที่ เนื่องจากรองรับทั้ง Redis และ REST API คุณสามารถลดข้อมูลของคุณจาก Edge ไปยัง Redis จากนั้นจึงประมวลผลโดยไคลเอนต์ Redis ใดๆ
• Cloudflare KV ได้รับการปรับให้เหมาะสมสำหรับแอปพลิเคชันที่อ่านได้ยาก การเขียนอาจใช้เวลา 60 วินาทีในการจำลองไปยังตำแหน่งอื่น เวลาแฝงในการเขียนอยู่ในหน่วยมิลลิวินาทีสำหรับ Upstash

ตอนนี้ มาเขียนตัวอย่างง่ายๆ เพื่อแสดงพลังของการผสมผสาน Cloudflare+Redis

การวิเคราะห์ที่ Edge

การวิเคราะห์เว็บเป็นความต้องการทั่วไปสำหรับเจ้าของเว็บไซต์ทุกคน Google Analytics มีประสิทธิภาพมาก แต่นักพัฒนาหลายคนไม่ชอบแบ่งปันข้อมูลการเข้าชมกับ Google และใส่คุกกี้ลงในเบราว์เซอร์ของผู้ใช้ เนื่องจากการเข้าชมเว็บไซต์ของคุณผ่าน CDN คุณจึงสามารถติดตามการเข้าชมที่เลเยอร์ Edge ได้อย่างง่ายดาย เราจะใช้ตัวอย่างง่ายๆ เพื่อแสดงการติดตามการเข้าชมของผู้ใช้จาก Cloudflare Workers เราจะสกัดกั้นการรับส่งข้อมูลใน Cloudflare Workers และบันทึกคำขอของผู้ใช้ไปยัง Upstash Redis จากนั้นเราจะเขียนแอปพลิเคชันพื้นฐานแบบสแตนด์อโลนซึ่งจะวิเคราะห์คำขอและให้ข้อมูลต่อไปนี้แก่ฉันในวันที่เลือก:

• การดูหน้าเว็บ
• ผู้เข้าชมที่ไม่ซ้ำ
• ประเทศที่มีผู้เข้าชมมากที่สุด
• หน้าที่เข้าชมบ่อยที่สุด

ตั้งค่า

หากคุณยังไม่มี ให้สร้างฐานข้อมูลโดยทำตามคำแนะนำนี้ ในหน้าฐานข้อมูล ให้คลิกปุ่ม REST API และคัดลอก REST URL หากคุณมีบัญชี Cloudflare คุณสามารถสร้างฟังก์ชัน Workers หรือคุณสามารถใช้ Playground โดยไม่ต้องมีบัญชีได้เช่นกัน

:::noteSelect ฐานข้อมูลทั่วโลก ขณะสร้างฐานข้อมูล Upstash ฐานข้อมูลทั่วโลกจำลองข้อมูลไปยังหลายภูมิภาคเพื่อลดเวลาแฝงจากฟังก์ชัน edge:::

รหัสคนงาน Cloudflare

ฟังก์ชัน Cloudflare Workers ยอมรับ request เป็นพารามิเตอร์ เมื่อใช้ REST API ของ Upstash ฉันบันทึกคำขอไปยังรายการ Redis ฉันใช้วันที่ปัจจุบันเป็นคีย์สำหรับรายการ Redis ดังนั้นเราจึงบันทึกคำขอต่อวันในรายการแยกกัน

Upstash REST API ต้องการจุดปลายและโทเค็น หลังจากสร้างฐานข้อมูลแล้ว คุณสามารถคัดลอกปลายทางและโทเค็นจากคอนโซลโดยคลิกไปที่ REST API ปุ่ม. อัปเดตฟังก์ชัน Cloudflare Workers ด้วยโค้ดด้านล่าง โดยแทนที่ปลายทางและโทเค็น:

const endpoint = "REPLACE_UPSTASH_REST_ENDPOINT";
const token = "REPLACE_UPSTASH_REST_TOKEN";

async function recordRequest(request) {
  let d = new Date();
  let datestr = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
  let data = [["url", request.url], ...request.headers];
  let url = endpoint + "/lpush/" + datestr;
  const init = {
    body: JSON.stringify(data),
    method: "POST",
    headers: {
      Authorization: "Bearer " + token,
    },
  };
  return await fetch(url, init);
}

async function handleRequest(request) {
  recordRequest(request);
  return new Response("My Awesome Website");
}

addEventListener("fetch", (event) => {
  event.respondWith(
    handleRequest(event.request).catch(
      (err) => new Response(err.stack, { status: 500 })
    )
  );
});

รหัสเครื่องมือ Analytics

ตอนนี้ มาเขียนแอปพลิเคชันบรรทัดคำสั่งง่ายๆ ซึ่งจะใช้วันที่เป็นอาร์กิวเมนต์และส่งข้อมูลการวิเคราะห์กลับมาให้เรา สร้างโฟลเดอร์และเรียกใช้ npm init . จากนั้นติดตั้งไคลเอนต์ Redis ด้วย npm install ioredis . คัดลอก .env.example เป็น .env ไฟล์และตั้งค่า Redis URL (ioredis) ของคุณ อัปเดต index.js ด้วยด้านล่าง:

const Redis = require("ioredis");
require("dotenv").config();
console.log("EDGE analytics with CloudFlare Workers and Upstash Redis.");
let redis = new Redis(process.env.REDIS_URL);
let dateArg = process.argv[2];
let datestr;
if (dateArg) {
  datestr = dateArg;
} else {
  let d = new Date();
  datestr = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
}

redis.lrange(datestr, "0", "-1", function (err, result) {
  let pageview = 0;
  let users = new Set();
  let countries = new Map();
  let paths = new Map();
  if (err) {
    console.log("Could not connect to Redis.");
    console.error(err);
  } else {
    console.log(
      "Upstash Redis Connection Successful. Analyzing the access logs..."
    );
    if (!result || result.length === 0) {
      console.log("Could not find any access logs for the date:" + datestr);
    } else {
      for (const elem of result) {
        let entries = JSON.parse(elem);
        for (let entry of entries) {
          if (entry[0] === "accept") {
            if (entry[1].startsWith("text")) pageview++;
          }
          if (entry[0] === "cf-ipcountry") {
            let temp = countries.get(entry[1]);
            if (!temp) {
              temp = 0;
            }
            countries.set(entry[1], temp + 1);
          }
          if (entry[0] === "url") {
            let temp = paths.get(entry[1]);
            if (!temp) {
              temp = 0;
            }
            paths.set(entry[1], temp + 1);
          }
          if (entry[0] === "x-real-ip") {
            users.add(entry[1]);
          }
        }
      }
      countries = new Map([...countries.entries()].sort((a, b) => b[1] - a[1]));
      paths = new Map([...paths.entries()].sort((a, b) => b[1] - a[1]));
      console.log("\nDATE: " + datestr);
      console.log("\nPAGE VIEWS: " + pageview);
      console.log("\nUNIQUE VISITORS: " + users.size);
      logMap("TOP COUNTRIES", countries);
      logMap("TOP PAGES", paths);
    }
  }
});

function logMap(title, data) {
  console.log("\n" + title);
  console.log("----------------");
  console.log(mapEntriesToString(data));
}

function mapEntriesToString(entries) {
  return Array.from(entries, ([k, v]) => `${k} : ${v}\n`).join("");
}

ตอนนี้คุณสามารถเรียกใช้แอปพลิเคชันของคุณด้วย node index 2021-6-16 หรือเพียงแค่ node index . อันหลังจะสอบถามสำหรับวันนี้

คุณสามารถนึกถึงตัวอย่างนี้เป็นจุดเริ่มต้น คุณสามารถพัฒนาเว็บแอปพลิเคชันที่สมบูรณ์พร้อมแผนภูมิและตารางตามความต้องการด้านการวิเคราะห์ของคุณ คุณสามารถใช้โครงสร้างข้อมูล Redis อื่นๆ เพื่อการวิเคราะห์ที่มีประสิทธิภาพยิ่งขึ้น

แผนงาน Upstash Edge

REST API เป็นก้าวแรกในเรื่องราวของ Edge เรากำลังวางแผนการพัฒนาที่สำคัญสองประการในปีนี้

• Edge Caching:(อัปเดต:เปิดตัวแล้ว เรียนรู้เพิ่มเติม) ตอนนี้ คำขอ REST ทั้งหมดของคุณมาถึงภูมิภาคฐานข้อมูลของคุณแล้ว เราจะรองรับ Edge Caching ในเร็วๆ นี้ ดังนั้นคำขอ REST ของคุณจะถูกแคชไว้ที่ตำแหน่งขอบทั้งหมดทั่วโลก ซึ่งจะทำให้ Upstash Redis มีเวลาแฝงต่ำทั่วโลกเช่น Cloudflare KV
• ฐานข้อมูลที่จำลองแบบทั่วโลก:(อัปเดต:เผยแพร่แล้ว เรียนรู้เพิ่มเติม) การจำลองแบบทั่วโลก (หลายภูมิภาค) จะจำลองข้อมูลของคุณไปยังหลายภูมิภาค ดังนั้นคำขอทั้งหมด (ทั้ง Redis และ REST API) จะไปที่ตำแหน่งที่ใกล้ที่สุด ซึ่งจะทำให้คุณมีเวลาแฝงต่ำทั่วโลกโดยมีการเสียสละในเรื่องความสม่ำเสมอน้อยที่สุด

ฉันกำลังวางแผนที่จะเขียนบล็อกโพสต์เกี่ยวกับแผนงาน Edge ของเราโดยเฉพาะ คอยติดตามและติดตามเราบนทวิตเตอร์