การผสานรวม Redis กับ Fastly Compute@Edge เพื่อติดตามการเข้าชมหน้าเว็บอย่างมีประสิทธิภาพ

บทนำ

ในบทความนี้ เราจะสร้างแอปพลิเคชันง่ายๆ ที่ทำงานบน Fastly Compute@Edge ซึ่งจะเข้าถึง Upstash Redis เพื่อติดตามจำนวนการเข้าชมหน้าเว็บ (Page Views)

แรงจูงใจ

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

Compute@Edge เป็นแพลตฟอร์ม Serverless ของ Fastly คุณสามารถเขียนโค้ดด้วย Rust, AssemblyScript, หรือ JavaScript และรันบนเครือข่าย Edge ของ Fastly ฟังก์ชัน Compute เป็น Stateless หมายความว่านักพัฒนาต้องเก็บ State ของแอปพลิเคชันไว้ที่ที่เก็บข้อมูลภายนอก แต่ Fastly ใช้ WebAssembly เป็น Runtime ซึ่งไม่รองรับการเชื่อมต่อ TCP Upstash Redis จึงเป็นโซลูชันที่สมบูรณ์แบบสำหรับ Fastly Compute Functions ด้วย REST API, การจำลองข้อมูลทั่วโลก (Global Replication) และราคาแบบ Serverless

ดู โค้ดตัวอย่าง และ демо

การตั้งค่าโปรเจกต์

1. สร้างฐานข้อมูลใน Upstash Console

สร้างฐานข้อมูลใน Upstash Console แนะนำให้เลือก Global Database เพื่อ Latency ต่ำที่สุดจากตำแหน่ง Edge

2. ติดตั้ง Fastly CLI

brew install fastly/tap/fastly

3. กำหนดค่า CLI ด้วยบัญชี Fastly

fastly configure

4. สร้างโฟลเดอร์และเริ่มต้นโปรเจกต์

รันคำสั่ง fastly compute init ภายในโฟลเดอร์:

➜ using-fastly-compute git:(master) ✗ fastly compute init
Creating a new Compute@Edge project. Press ^C at any time to quit.
Name: [using-fastly-compute]
Description:
Author: [enes@upstash.com]
Language: [1] Rust [2] AssemblyScript (beta) [3] JavaScript (beta) [4] Other ('bring your own' Wasm binary)
Choose option: [1] 3
Starter kit: [1] Default starter for JavaScript
A basic starter kit that demonstrates routing, simple synthetic responses and overriding caching rules.
https://github.com/fastly/compute-starter-kit-javascript-default
Choose option or paste git URL: [1]
✓ Initializing... ✓ Fetching package template... ✓ Updating package manifest... ✓ Initializing package...
Initialized package using-fastly-compute to: /Users/enes/dev/examples/using-fastly-compute
To publish the package (build and deploy), run: fastly compute publish
SUCCESS: Initialized package using-fastly-compute

5. ติดตั้งแพ็กเกจที่จำเป็น

npm install @upstash/redis flight-path

6. อัปเดต webpack.config.js

plugins: [
  // Polyfills go here.
  // Used for, e.g., any cross-platform WHATWG, or core nodejs modules needed for your application.
  new webpack.ProvidePlugin({
    URL: "core-js/web/url",
  }),
],

7. อัปเดต fastly.toml

authors = ["enes@upstash.com"]
description = "Example of using Upstash with Fastly Compute@Edge"
language = "javascript"
manifest_version = 2
name = "fastly-upstash"
service_id = "PASTE_YOUR_SERVICE_ID"

[local_server.backends.upstash-db]
url = "https://eu1-liberal-cat-30162.upstash.io"

คุณต้องสร้าง Fastly Compute Service และวาง Service ID ของคุณไว้ข้างต้น

8. เพิ่ม Upstash REST URL เป็น Backend

Fastly Compute กำหนดให้การเชื่อมต่อเครือข่ายภายนอกทุกครั้งต้องลงทะเบียนเป็น Backend บนหน้า Services ให้คลิก Edit Configuration > Clone version x to edit > Origins > Create a host

หลังจากเพิ่ม Host แล้ว ให้คลิกไอ콘แก้ไขเพื่อตั้งชื่อ Host เป็น upstash-db ซึ่งจะตรงกับตัวเลือก backend ขณะกำหนดค่า Upstash Redis Client นำ https:// ออกจาก URL สุดท้ายให้คลิกปุ่ม Activate ที่มุมขวาบนเพื่อเปิดใช้งานการกำหนดค่ากับ Deployment ปัจจุบัน

local_server.backends.upstash-db จำเป็นสำหรับการรันฟังก์ชันในเครื่อง (Local) แทนที่ URL ด้วย REST URL ของฐานข้อมูล Upstash ของคุณ

การนำไปใช้ (Implementation)

แก้ไขไฟล์ src/index.js ดังนี้:

import { Router } from "flight-path";
import { Redis } from "@upstash/redis/fastly";

const router = new Router();
const redis = new Redis({
  url: "PASTE_YOUR_UPSTASH_REST_URL",
  token: "PASTE_YOUR_UPSTASH_TOKEN",
  backend: "upstash-db",
});

router.get("/", async (req, res) => {
  const count = await redis.incr("count");
  res.send(`Fastly with Upstash! Count: ${count}`);
});

router.listen();

คัดลอกและวาง REST URL และ Token จาก Upstash Console

เราเชื่อมต่อกับ Upstash ผ่าน Upstash Redis Client เพิ่มตัวนับ (Counter) และส่งกลับ Response

หมายเหตุ: คุณไม่สามารถใช้ Redis Client อื่นๆ ได้ เนื่องจากพวกเขาใช้ TCP Connection ซึ่ง Fastly Compute ไม่รองรับ

ขณะตรวจสอบสิทธิ์ด้วย auth() คุณต้องเพิ่ม backend: upstash-db เป็นตัวเลือกคำขอเพิ่มเติม เนื่องจาก Fastly Compute กำหนดให้การเชื่อมต่อเครือข่ายภายนอกต้องลงทะเบียนเป็น Backend

รันในเครื่อง (Run Locally)

รันฟังก์ชันในเครื่องด้วยคำสั่ง:

fastly compute serve

สร้างและปรับใช้ (Build and Deploy)

สร้างและปรับใช้ฟังก์ชันด้วย:

fastly compute publish

แอปพลิเคชันของคุณจะถูกสร้างและปรับใช้โดย Fastly คำสั่งจะแสดง URL เพื่อทดสอบว่าทำงานได้หรือไม่:

https://horribly-organic-spider.edgecompute.app

สรุป

ในบทความนี้ เราได้สร้างแอปพลิเคชันง่ายๆ ที่รันบน Fastly Compute at Edge โดยใช้ Upstash เรายินดีที่จะปรับปรุง Upstash และเนื้อหาของเราจากความคิดเห็นของคุณ แจ้งความคิดเห็นได้ที่ Twitter หรือ Discord