Налаштування Remote Config для динамічного управління параметрами сайту

Налаштування Remote Config та динамічних параметрів

Remote Config дозволяє змінювати поведінку додатку без розгортання: регулювати межі, тексти, пороги значень, включати/вимикати функції — через веб-інтерфейс, в реальному часі.

Firebase Remote Config

npm install firebase

// lib/remoteConfig.ts
import { initializeApp } from 'firebase/app';
import { getRemoteConfig, fetchAndActivate, getValue } from 'firebase/remote-config';

const app = initializeApp({
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
});

const remoteConfig = getRemoteConfig(app);
remoteConfig.settings.minimumFetchIntervalMillis = 300_000; // 5 хвилин

// Дефолтні значення — працюють до першого fetch
remoteConfig.defaultConfig = {
  maintenance_mode: false,
  max_upload_size_mb: 10,
  welcome_banner_text: 'Welcome!',
  new_dashboard_enabled: false,
  max_api_calls_per_minute: 60,
};

export async function initRemoteConfig() {
  await fetchAndActivate(remoteConfig);
}

export function getConfig<T>(key: string): T {
  const value = getValue(remoteConfig, key);
  // Автоматично визначаємо тип
  if (typeof remoteConfig.defaultConfig[key] === 'boolean') {
    return value.asBoolean() as T;
  }
  if (typeof remoteConfig.defaultConfig[key] === 'number') {
    return value.asNumber() as T;
  }
  return value.asString() as T;
}

// Використання в компонентах
'use client';
import { useEffect, useState } from 'react';
import { getConfig, initRemoteConfig } from '@/lib/remoteConfig';

export function UploadButton() {
  const [maxSize, setMaxSize] = useState(10);
  const [newDashboard, setNewDashboard] = useState(false);

  useEffect(() => {
    initRemoteConfig().then(() => {
      setMaxSize(getConfig<number>('max_upload_size_mb'));
      setNewDashboard(getConfig<boolean>('new_dashboard_enabled'));
    });
  }, []);

  return (
    <>
      <input type="file" accept={`*/*`} />
      <span>Максимум {maxSize} MB</span>
      {newDashboard && <NewDashboardBanner />}
    </>
  );
}

Self-hosted: Альтернатива LaunchDarkly через Flagsmith

# Docker Compose
services:
  flagsmith:
    image: flagsmith/flagsmith:latest
    environment:
      DATABASE_URL: postgresql://flagsmith:secret@db/flagsmith
    ports:
      - "8000:8000"

// Flagsmith SDK
import Flagsmith from 'flagsmith-nodejs';

const flagsmith = new Flagsmith({
  environmentKey: process.env.FLAGSMITH_ENV_KEY!,
  enableLocalEvaluation: true, // кеш на сервері
  environmentRefreshIntervalSeconds: 60,
});

// Серверна сторона — з урахуванням користувача
async function getConfig(userId: string, userPlan: string) {
  const flags = await flagsmith.getIdentityFlags(userId, {
    plan: userPlan,
    country: 'UA',
  });

  return {
    maxUploadSizeMb: flags.getFeatureValue('max_upload_size_mb', 10),
    betaFeatures: flags.isFeatureEnabled('beta_features'),
    apiRateLimit: flags.getFeatureValue('api_rate_limit', 100),
  };
}

Custom Remote Config через API

Для простих випадків — власна реалізація з кешем:

// Зберігання конфіга в БД
// config table: key (varchar), value (jsonb), updated_at

// API endpoint
// GET /api/config → повертає поточні параметри

// Server-side caching
import { unstable_cache } from 'next/cache';

const getRemoteConfig = unstable_cache(
  async () => {
    const configs = await db.config.findMany();
    return Object.fromEntries(configs.map(c => [c.key, c.value]));
  },
  ['remote-config'],
  { revalidate: 300 } // 5 хвилин
);

// Інвалідація кешу при оновленні
async function updateConfig(key: string, value: unknown) {
  await db.config.upsert({
    where: { key },
    create: { key, value },
    update: { value, updatedAt: new Date() },
  });

  // Інвалідуємо кеш
  revalidateTag('remote-config');
}

Типові параметри для Remote Config

interface AppConfig {
  // Feature flags
  newCheckoutEnabled: boolean;
  maintenanceMode: boolean;
  betaBannersEnabled: boolean;

  // Межі
  maxUploadSizeMb: number;
  apiRateLimitPerMinute: number;
  maxProjectsPerAccount: number;

  // Тексти та UI
  announcementBannerText: string;
  announcementBannerEnabled: boolean;
  supportEmail: string;

  // Бізнес-параметри
  trialDurationDays: number;
  freeStorageGb: number;
  minPasswordLength: number;
}

Conditional targeting — різні значення для різних користувачів:

• Бета-користувачі отримують newCheckoutEnabled: true
• Pro-облікові записи — maxUploadSizeMb: 100 замість 10
• Адміністратори — maintenanceMode не застосовується

Налаштування Firebase Remote Config або Flagsmith з інтеграцією в додаток — 1–2 робочих дні.