안전하고 유연한 릴리스를 위해 Upstash Redis를 사용하여 Next.js에 기능 플래그 구현

업데이트는 모든 소프트웨어의 일부입니다. 버그를 수정하고, 새로운 기능을 추가하고, 일반적으로 반복하여 보다 안전하고 안정적이며 빠르게 작업을 수행해야 합니다.

그러나 새로운 기능이나 일반적인 변경 사항을 배포와 결합하는 것이 항상 좋은 생각은 아닙니다. 반복되는 배포 일정을 따르지만 마케팅 팀이 새 기능을 발표할 준비가 되어 있지 않은 경우가 있습니다. 변경 사항이 하드코딩된 경우 마케팅 팀에서는 이를 활성화하거나 비활성화하기 위해 개발자가 필요할 수 있습니다.

기능 플래그 또는 기능 토글은 배포에서 변경 사항을 분리하는 방법입니다. 변경 사항을 구현하지만 if 문 뒤에 숨깁니다. 변수가 false인 한 소프트웨어는 변경 전 버전을 사용합니다. 변수가 true인 경우 , 새 버전이 됩니다. 변수 값이 마케팅 팀이 액세스할 수 있는 데이터베이스에서 오는 경우 코드 변경 없이 이러한 변경 사항을 전환할 수 있습니다.

Upstash Redis®는 그러한 데이터베이스입니다. 기능 플래그를 저장하는 데 사용할 수 있는 간단한 키-값 저장소입니다. 엄청나게 빠르기 때문에 애플리케이션에서 다양한 플래그를 확인하는 데 지연 시간이 많이 추가되지 않습니다.

이 튜토리얼에서는 Next.js 앱을 위한 간단한 기능 플래그 메커니즘을 구축하는 방법을 알려드립니다. 우리는 Vercel에 배포하고 Upstash Redis®를 스토리지로 사용할 것입니다.

전제조건

GitHub 계정, Vercel 계정, Upstash 계정이 필요합니다.

우리는 NPM을 사용하기 때문에 현재 Node.js가 설치되어 있어야 합니다.

Next.js 프로젝트 초기화

첫 번째 단계는 새로운 Next.js 프로젝트를 만드는 것입니다. 다음 명령을 사용하면 됩니다:

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

Upstash Redis® 연결 생성

다음으로 Next.js 앱을 Upstash Redis® 데이터베이스와 연결해야 합니다. 이를 위해서는 @upstash/redis을 설치해야 합니다. 패키지를 만들고 그 주위에 작은 포장지를 만듭니다.

$ npm i @upstash/redis

upstash-next-feature-flags/lib/featureFlags.js에 파일을 생성하세요 다음 코드를 사용하세요:

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);
}

이 튜토리얼의 뒷부분에서 환경 변수를 설정하기 위해 API 자격 증명을 얻을 것입니다. flagIsActive 함수는 Redis®를 쿼리하고 반환된 값을 boolean로 변환합니다. . Redis에서 플래그를 숫자로 저장하기 때문에 이 변환이 필요합니다.

API 경로 생성

두 가지 서로 다른 구현을 사용하여 API 경로를 생성해야 합니다. 기능 플래그를 사용하여 이들 사이를 전환하겠습니다.

이를 위해 upstash-next-feature-flags/pages/api/sort-numbers.js에 파일을 만듭니다. .

다음 코드가 있어야 합니다:

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 경로는 간단한 숫자 분류기입니다. 정렬되지 않은 숫자의 배열을 사용하고 이를 정렬하기 위해 두 가지 정렬 알고리즘 중 하나를 사용합니다.

이러한 정렬 알고리즘은 애플리케이션에서 "토글"하려는 모든 변경 사항을 나타냅니다. 둘 다 코드에 넣고 flagIsActive을 통해 전환하세요. Redis에서 값을 변경하여 기능을 수행합니다.

우리는 flagIsActive라고 부릅니다. 함수에 확인하려는 플래그의 이름을 지정합니다. 플래그가 1로 설정된 경우 Redis에서 이 함수는 true을 반환합니다.; 그렇지 않으면 false을 반환합니다. .

정렬 후 API 경로는 정렬된 배열로 응답합니다.

프로젝트를 GitHub에 푸시

모든 것을 구현한 후에는 Verce의 배포 서비스에서 액세스할 수 있도록 프로젝트를 GitHub의 저장소로 푸시해야 합니다. GitHub의 문서에서 저장소를 만드는 방법을 설명합니다.

빈 저장소를 만들면 이를 우리가 만든 프로젝트와 연결할 수 있는 방법이 자동으로 표시됩니다.

Upstash Redis® 데이터베이스 생성

Upstash 콘솔에서 새 데이터베이스를 생성할 수 있습니다. 그림 1은 이 튜토리얼에 적합한 구성을 보여줍니다.

그림 1에서 알 수 있듯이 하나의 데이터베이스는 무료이므로 이 튜토리얼에는 비용을 지불할 필요가 없습니다.

나중에 데이터베이스 자격 증명을 수집하는 데 필요하므로 Upstash 콘솔을 열어 둔 상태로 브라우저 탭을 유지하세요.

GitHub 저장소를 Vercel과 연결

GitHub 계정을 사용하여 Vercel에 로그인하는 경우 몇 번의 클릭만으로 GitHub 저장소를 추가할 수 있습니다. 그림 2에서는 Vercel 대시보드의 왼쪽 상단을 볼 수 있습니다. "새로 추가..."를 클릭하고 "프로젝트"를 선택하세요.

"GitHub으로 계속하기"를 선택하고 이전 단계에서 생성한 저장소에 속한 "가져오기" 버튼 중 하나를 선택하세요.

마지막으로 환경 변수를 추가해야 하는 프로젝트 구성 단계가 나타납니다. 나머지 구성에서는 기본값을 유지할 수 있습니다. 그림 4는 이러한 변수를 입력해야 하는 위치를 보여줍니다.

UPSTASH_TOKEN라고 합니다. 및 UPSTASH_URL , 이전에 데이터베이스를 생성했던 Upstash 콘솔에서 찾을 수 있습니다. 그림 5는 변수에 필요한 값을 복사하는 데 필요한 버튼을 보여줍니다.

큰 "배포" 버튼을 누르면 Vercel이 GitHub 저장소를 복제하여 인프라에 배포합니다.

Redis를 사용한 구현 간 전환

이제 API 엔드포인트를 호출할 수 있어야 하며 Redis에서 값을 설정하여 구현 간에 전환할 수 있습니다. Upstash 콘솔의 Redis CLI는 이를 달성하는 가장 간단한 방법입니다.

그림 6은 CLI를 찾을 수 있는 위치와 값을 설정하기 위해 실행해야 하는 명령을 보여줍니다.

newSortingAlgorithm 1 설정

newSortingAlgorithm을 삭제한다면 또는 0으로 설정하세요. , 플래그를 다시 false,으로 전환합니다. 우리의 API 경로는 이전 알고리즘을 사용하게 됩니다.

API 경로 사용

마지막으로 빠진 것은 API 경로의 실제 사용입니다. POST 요청을 통해 JSON 객체를 경로로 보내야 합니다. 이를 수행하는 쉬운 방법은 cURL을 사용하는 것입니다.

다음 명령은 그러한 개체를 보냅니다:

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

Vercel에서 올바른 API_ROUTE_URL을 찾아야 합니다. 그림 7과 같이 Vercel 대시보드의 프로젝트에 "Domains" 카테고리가 표시되어야 합니다.

응답은 정렬된 numbers을 포함하는 JSON 객체여야 합니다. 그리고 newSortingAlgorithm 이 정렬에 어떤 알고리즘이 사용되었는지 나타내는 필드입니다.

요약

기능 플래그는 기능 릴리스에서 배포를 분리하는 훌륭한 방법입니다. 하드 코딩된 변경 사항을 데이터베이스의 간단한 값 설정으로 전환하여 팀에 더 많은 유연성을 제공하고 기술 지식이 없는 사람들에게 더 많은 권한을 제공합니다.

Upstash Redis와 같은 빠른 데이터베이스를 사용하면 성능을 크게 희생하지 않고도 애플리케이션에 대한 기능 플래그 패턴을 쉽게 구현할 수 있습니다. Upstash Redis는 액세스 시간이 1초 미만이며 필요한 경우 FaaS 근처에 배포할 수 있습니다. 이 모든 것이 주문형 가격으로 제공되므로 사용하지 않는 리소스에 대해 비용을 지불할 필요가 없습니다.