Deployment Strategy

Feature Flag 설정

LaunchDarkly 설정

// src/lib/feature-flags.ts
import * as LaunchDarkly from 'launchdarkly-js-client-sdk';

const client = LaunchDarkly.initialize(
  process.env.LAUNCHDARKLY_CLIENT_ID!,
  {
    key: 'user-id',
    email: '[email protected]',
    custom: {
      plan: 'premium',
      beta: true,
    },
  }
);

export const isFeatureEnabled = async (flagKey: string): Promise<boolean> => {
  await client.waitForInitialization();
  return client.variation(flagKey, false);
};

// 사용 예시
if (await isFeatureEnabled('new-checkout-flow')) {
  // 새 체크아웃 플로우
} else {
  // 기존 체크아웃 플로우
}

자체 구현 Feature Flag

// src/lib/feature-flags.ts
interface FeatureFlag {
  key: string;
  enabled: boolean;
  percentage: number;
  allowedUsers: string[];
  allowedGroups: string[];
  killSwitch: boolean;
}

const flags: Record<string, FeatureFlag> = {
  'new-feature': {
    key: 'new-feature',
    enabled: true,
    percentage: 10,           // 10% 사용자에게 노출
    allowedUsers: ['admin'],  // 특정 사용자는 항상 활성화
    allowedGroups: ['beta'],  // 베타 그룹은 항상 활성화
    killSwitch: false,        // 긴급 비활성화 스위치
  },
};

export const isEnabled = (
  flagKey: string,
  userId: string,
  userGroups: string[] = []
): boolean => {
  const flag = flags[flagKey];

  if (!flag || !flag.enabled || flag.killSwitch) {
    return false;
  }

  // 특정 사용자 체크
  if (flag.allowedUsers.includes(userId)) {
    return true;
  }

  // 특정 그룹 체크
  if (userGroups.some(g => flag.allowedGroups.includes(g))) {
    return true;
  }

  // 퍼센티지 기반 롤아웃
  const hash = hashUserId(userId);
  return hash < flag.percentage;
};

const hashUserId = (userId: string): number => {
  let hash = 0;
  for (let i = 0; i < userId.length; i++) {
    hash = ((hash << 5) - hash) + userId.charCodeAt(i);
    hash |= 0;
  }
  return Math.abs(hash) % 100;
};

React Hook

// src/hooks/useFeatureFlag.ts
import { useEffect, useState } from 'react';
import { isEnabled } from '@/lib/feature-flags';
import { useUser } from '@/hooks/useUser';

export const useFeatureFlag = (flagKey: string): boolean => {
  const [enabled, setEnabled] = useState(false);
  const { user } = useUser();

  useEffect(() => {
    if (user) {
      setEnabled(isEnabled(flagKey, user.id, user.groups));
    }
  }, [flagKey, user]);

  return enabled;
};

// 사용 예시
const MyComponent = () => {
  const showNewFeature = useFeatureFlag('new-feature');

  return showNewFeature ? <NewFeature /> : <OldFeature />;
};

Canary 배포

Kubernetes Canary

# canary-deployment.yaml
apiVersion: apps/v1