ใช้ฟีเจอร์แฟล็กใน Next.js ด้วย Upstash Redis เพื่อการเผยแพร่ที่ปลอดภัยและยืดหยุ่น

การสร้างเส้นทาง API

เราต้องสร้างเส้นทาง API ด้วยการใช้งานที่แตกต่างกันสองแบบ เราจะใช้แฟล็กคุณลักษณะเพื่อสลับไปมาระหว่างกัน

สำหรับสิ่งนี้ ให้สร้างไฟล์ที่ 50 .

ควรมีรหัสนี้:

import { flagIsActive } from "../../lib/featureFlags";
 
export default async function handler(request, response) {
 let sort = bucketSort;
 
 const newSortingAlgorithm = await flagIsActive("newSortingAlgorithm");
 
 if (newSortingAlgorithm) sort = selectionSort;
 
 const { numbers } = request.body;
 const sorted = sort(numbers);
 
 response.status(200).json({
 numbers: sorted,
 newSortingAlgorithm,
 });
}
 
// old sorting algorithm
const bucketSort = (arr, size = 5) => {
 const min = Math.min(...arr);
 const max = Math.max(...arr);
 const buckets = Array.from(
 { length: Math.floor((max - min) / size) + 1 },
 () => [],
 );
 arr.forEach((val) => {
 buckets[Math.floor((val - min) / size)].push(val);
 });
 return buckets.reduce((acc, b) => [...acc, ...b.sort((a, b) => a - b)], []);
};
 
// new sorting algorithm
const selectionSort = (arr) => {
 const a = [...arr];
 for (let i = 0; i < a.length; i++) {
 const min = a
 .slice(i + 1)
 .reduce((acc, val, j) => (val < a[acc] ? j + i + 1 : acc), i);
 if (min !== i) [a[i], a[min]] = [a[min], a[i]];
 }
 return a;
};

เส้นทาง API นี้เป็นเครื่องคัดแยกตัวเลขอย่างง่าย ใช้อาร์เรย์ของตัวเลขที่ไม่ได้เรียงลำดับและจะใช้หนึ่งในสองอัลกอริธึมการเรียงลำดับเพื่อเรียงลำดับ

อัลกอริธึมการเรียงลำดับเหล่านี้หมายถึงการเปลี่ยนแปลงใดๆ ที่คุณต้องการ "สลับ" ในแอปพลิเคชันของคุณ ใส่ทั้งสองอย่างลงในโค้ดของคุณและสลับไปมาระหว่างกันโดยใช้ 65 ฟังก์ชั่นโดยการเปลี่ยนค่าใน Redis

เราเรียก 79 ฟังก์ชั่นและตั้งชื่อให้กับแฟล็กที่เราต้องการตรวจสอบ หากตั้งค่าสถานะเป็น 81 ใน Redis ฟังก์ชันนี้จะส่งคืน 94; มิฉะนั้นจะส่งกลับ 101 .

หลังจากการเรียงลำดับ เส้นทาง API จะตอบสนองด้วยอาร์เรย์ที่เรียงลำดับ

ผลักดันโครงการไปที่ GitHub

หลังจากปรับใช้ทุกอย่างแล้ว เราจำเป็นต้องผลักดันโปรเจ็กต์ไปยังพื้นที่เก็บข้อมูลบน GitHub เพื่อให้สามารถเข้าถึงได้สำหรับบริการการปรับใช้ของ Verce GitHub อธิบายวิธีสร้างพื้นที่เก็บข้อมูลในเอกสาร

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

การสร้างฐานข้อมูล Upstash Redis®

คุณสามารถสร้างฐานข้อมูลใหม่ในคอนโซล Upstash รูปที่ 1 แสดงการกำหนดค่าที่ดีสำหรับบทช่วยสอนนี้

ตามที่รูปที่ 1 กล่าวไว้ ฐานข้อมูลหนึ่งฐานข้อมูลนั้นฟรี ดังนั้นคุณจะไม่ต้องจ่ายอะไรเลยสำหรับบทช่วยสอนนี้

เปิดแท็บเบราว์เซอร์โดยเปิดคอนโซล Upstash ไว้เพราะเราต้องการในภายหลังเพื่อรวบรวมข้อมูลประจำตัวฐานข้อมูล

การเชื่อมโยงพื้นที่เก็บข้อมูล GitHub กับ Vercel

หากคุณใช้บัญชี GitHub ของคุณเพื่อเข้าสู่ระบบ Vercel การเพิ่มพื้นที่เก็บข้อมูล GitHub ทำได้เพียงไม่กี่คลิก ในรูปที่ 2 คุณจะเห็นด้านซ้ายบนของแดชบอร์ด Vercel คลิกที่ “เพิ่มใหม่…” และเลือก “โครงการ”

เลือก "ดำเนินการต่อด้วย GitHub" และปุ่ม "นำเข้า" ปุ่มใดปุ่มหนึ่งที่เป็นของพื้นที่เก็บข้อมูลที่คุณสร้างในขั้นตอนก่อนหน้า

สุดท้าย ขั้นตอนการกำหนดค่าโปรเจ็กต์จะปรากฏขึ้น โดยคุณจะต้องเพิ่มตัวแปรสภาพแวดล้อมของคุณ สำหรับการกำหนดค่าที่เหลือ คุณสามารถคงค่าเริ่มต้นไว้ได้ รูปที่ 4 แสดงตำแหน่งที่คุณต้องป้อนตัวแปรเหล่านี้

เรียกว่า 114 และ 121 และคุณจะพบมันในคอนโซล Upstash ของคุณที่เราเคยสร้างฐานข้อมูลมาก่อน รูปที่ 5 แสดงปุ่มที่คุณต้องการคัดลอกค่าที่จำเป็นสำหรับตัวแปรของเรา

 $ curl --header "Content-Type: application/json" \
 --request POST \
 --data '{"numbers":[1, 100, 10, 1000, 100000, 10000]}' \
 API_ROUTE_URL