Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> Redis

Triển khai Feature Flags trong Next.js với Upstash Redis cho Release An toàn, Linh hoạt

Cập nhật là một phần không thể thiếu của mọi phần mềm; bạn cần sửa lỗi, thêm tính năng mới, và nói chung là lặp lại để làm cho mọi thứ an toàn, tin cậy hoặc nhanh hơn.

Nhưng gắn kết các tính năng mới hoặc thay đổi nói chung với việc triển khai không phải lúc nào cũng là ý tưởng hay. Đôi khi bạn tuân theo lịch triển khai định kỳ, nhưng team marketing chưa sẵn sàng công bố tính năng mới. Nếu các thay đổi được hardcode, team marketing có thể cần một developer để bật/tắt chúng.

Feature flags (cờ tính năng), hay feature toggles, là cách tách rời các thay đổi khỏi việc triển khai. Bạn triển khai một thay đổi, nhưng ẩn nó sau một câu lệnh if; miễn là biến là false, phần mềm sẽ dùng phiên bản trước thay đổi của bạn; nếu biến là true, sẽ là phiên bản mới. Nếu giá trị biến đến từ database mà team marketing có thể truy cập, họ có thể bật/tắt các thay đổi này mà không cần thay đổi code.

Upstash Redis® chính là một database như vậy. Đây là key-value store đơn giản bạn có thể dùng để lưu feature flags. Vì nó cực nhanh, nó không thêm nhiều độ trễ khi kiểm tra nhiều flag khác nhau trong ứng dụng.

Hướng dẫn này sẽ dạy bạn cách xây dựng một cơ chế feature flag đơn giản cho app Next.js. Chúng ta sẽ deploy trên Vercel và dùng Upstash Redis® làm storage.

Yêu cầu trước

Bạn cần tài khoản GitHub, tài khoản Vercel, và tài khoản Upstash.

Vì dùng NPM, bạn cũng cần cài Node.js bản mới.

Khởi tạo dự án Next.js

Bước đầu là tạo dự án Next.js mới. Làm với lệnh sau:

$ npx create-next-app upstash-next-feature-flags

Tạo kết nối Upstash Redis®

Tiếp theo, kết nối app Next.js với database Upstash Redis®. Cần cài package @upstash/redis và tạo wrapper nhỏ.

$ npm i @upstash/redis

Tạo file tại upstash-next-feature-flags/lib/featureFlags.js với code sau:

import { Redis } from "@upstash/redis";
const { UPSTASH_TOKEN, UPSTASH_URL } = process.env;
const redis = new Redis({ token: UPSTASH_TOKEN, url: UPSTASH_URL, });
export async function flagIsActive(flagName) {
    const flag = await redis.get(flagName);
    return Boolean(flag);
}

Chúng ta lấy API credentials từ biến môi trường để setup sau. Hàm flagIsActive sẽ query Redis® và chuyển giá trị trả về thành boolean. Chuyển đổi này cần thiết vì chúng ta sẽ lưu flag dưới dạng số trong Redis.

Tạo API Route

Chúng ta phải tạo API route với hai triển khai khác nhau. Sẽ dùng feature flag để chuyển đổi giữa chúng.

Tạo file tại upstash-next-feature-flags/pages/api/sort-numbers.js.

Code như sau:

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, });
}
// Thuật toán sắp xếp cũ
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)], []);
};
// Thuật toán sắp xếp mới
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 route này là một number sorter đơn giản. Nó nhận mảng số chưa sắp xếp và dùng một trong hai thuật toán để sắp xếp.

Hai thuật toán này đại diện cho bất kỳ thay đổi nào bạn muốn "bật/tắt" trong ứng dụng. Đặt cả hai vào code và chuyển đổi qua hàm flagIsActive bằng cách thay giá trị trong Redis.

Chúng ta gọi flagIsActive với tên flag muốn kiểm tra. Nếu flag set thành 1 trong Redis, hàm trả về true; ngược lại trả về false.

Sau khi sắp xếp, API route phản hồi với mảng đã sắp xếp.

Push dự án lên GitHub

Sau khi triển khai xong, push dự án lên repository GitHub để Vercel deploy. GitHub docs hướng dẫn tạo repository.

Tạo repository rỗng sẽ tự động chỉ cách link với dự án vừa tạo.

Tạo database Upstash Redis®

Bạn có thể tạo database mới trong Upstash console. Hình 1 cho thấy config tốt cho hướng dẫn này.

Triển khai Feature Flags trong Next.js với Upstash Redis cho Release An toàn, Linh hoạt

Như Hình 1 nói, một database miễn phí, nên bạn không tốn chi phí cho hướng dẫn này.

Giữ tab browser Upstash console mở vì cần sau để lấy credentials database.

Link repository GitHub với Vercel

Nếu dùng tài khoản GitHub đăng nhập Vercel, thêm repository GitHub chỉ mất vài click. Hình 2 cho thấy góc trên trái Vercel dashboard; click "Add New…" và chọn "Project."

Triển khai Feature Flags trong Next.js với Upstash Redis cho Release An toàn, Linh hoạt

Chọn "Continue with GitHub" và một trong các nút "import" thuộc repository bạn tạo ở bước trước.

Triển khai Feature Flags trong Next.js với Upstash Redis cho Release An toàn, Linh hoạt

Cuối cùng, bước cấu hình project hiện ra, nơi bạn thêm biến môi trường. Phần còn lại giữ mặc định. Hình 4 cho thấy nơi nhập các biến.

Triển khai Feature Flags trong Next.js với Upstash Redis cho Release An toàn, Linh hoạt

Chúng gọi là UPSTASH_TOKEN và UPSTASH_URL, tìm thấy ở Upstash console nơi tạo database trước. Hình 5 cho thấy nút copy giá trị cho biến.

Triển khai Feature Flags trong Next.js với Upstash Redis cho Release An toàn, Linh hoạt

Khi bấm nút "Deploy" lớn, Vercel sẽ clone repository GitHub và deploy lên infrastructure của họ.

Chuyển đổi giữa triển khai với Redis

Bây giờ, chúng ta có thể gọi API endpoint, và chuyển đổi giữa các triển khai bằng cách set giá trị trong Redis. Redis CLI trong Upstash console là cách đơn giản nhất.

Hình 6 minh họa nơi tìm CLI và lệnh cần chạy để set giá trị.

set newSortingAlgorithm 1

Triển khai Feature Flags trong Next.js với Upstash Redis cho Release An toàn, Linh hoạt

Nếu xóa newSortingAlgorithm hoặc set thành 0, nó sẽ chuyển flag về false, và API route sẽ dùng thuật toán cũ.

Sử dụng API Route

Điều còn thiếu là dùng thực tế API route. Phải gửi JSON object qua POST request đến route. Cách dễ là dùng cURL.

Lệnh sau gửi object như vậy:

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

Bạn phải tìm API_ROUTE_URL đúng trong Vercel. Bạn nên thấy category "Domains" trong project trên Vercel dashboard, như Hình 7.

Triển khai Feature Flags trong Next.js với Upstash Redis cho Release An toàn, Linh hoạt

Response sẽ là JSON object chứa numbers đã sắp xếp và field newSortingAlgorithm chỉ thuật toán nào được dùng.

Tóm tắt

Feature flags là cách tuyệt vời để tách triển khai khỏi release tính năng. Chúng biến thay đổi hardcode thành việc set một giá trị đơn giản trong database, mang lại sự linh hoạt cho team và quyền lực cho người non-technical.

Với database nhanh như Upstash Redis, dễ dàng triển khai pattern feature flag cho ứng dụng mà không hy sinh nhiều hiệu năng. Upstash Redis có truy cập sub-second, và bạn có thể deploy gần FaaS nếu cần. Tất cả với giá theo nhu cầu, nên bạn không bao giờ trả tiền cho tài nguyên không dùng.