사용자 계정 생성과 서브도메인 자동화 구현

사용자 계정 생성과 서브도메인 자동화 구현

데모 사이트에서 가장 중요한 구조 중 하나는 사용자별 분석 실습 환경을 분리하는 것입니다. Analytics Playground는 각 사용자가 자신의 서브도메인에 접속하여 GA4, Amplitude 등의 분석 스크립트를 실습할 수 있도록 설계되었습니다.

이번 글에서는 사용자 계정 생성, 로그인, 그리고 서브도메인 자동 생성 과정을 어떻게 구현할 수 있는지 다룹니다.

---

1. 사용자 인증 시스템 구현 (Supabase 기준)

1-1. Supabase 설치 및 설정

npx create-next-app analytics-playground
cd analytics-playground
npm install @supabase/supabase-js

1-2. Supabase 프로젝트 생성 후 환경 설정

.env.local에 다음과 같이 입력합니다:

NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

1-3. 회원가입 및 로그인 로직 구현

반응형

// lib/supabase.ts
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

export default supabase;

// pages/signin.tsx
const signIn = async () => {
  const { data, error } = await supabase.auth.signInWithPassword({
    email, password
  });
};

---

2. 사용자별 서브도메인 설계

2-1. 사용자 식별자로 도메인 분기 처리

• 로그인 후 사용자 이메일의 @ 앞 부분을 서브도메인으로 사용합니다.
• 예: user123@gmail.com → user123.analytics-playground.com

2-2. Next.js Middleware를 활용한 동적 서브도메인 처리

// middleware.ts
import { NextResponse } from 'next/server';

export function middleware(req) {
  const hostname = req.headers.get('host') || '';
  const subdomain = hostname.split('.')[0];

  // 정적 경로 제외
  if (["www", "app"].includes(subdomain)) return NextResponse.next();

  // 사용자 전용 환경으로 라우팅
  const url = req.nextUrl.clone();
  url.pathname = `/subsites/${subdomain}${url.pathname}`;
  return NextResponse.rewrite(url);
}

2-3. Vercel 설정

• Vercel의 rewrites 설정 또는 DNS 설정을 통해 *.analytics-playground.com을 허용합니다.
• Vercel Dashboard → Project Settings → Domains → Wildcard Subdomain 추가

---

3. 사용자별 환경 구성

3-1. 사용자 로그인 시 자동 라우팅

• 로그인 후 사용자의 subdomain으로 redirect

router.push(`https://${username}.analytics-playground.com`);

3-2. subdomain에 따른 사용자 정보 불러오기

// subsites/[subdomain]/index.tsx
const subdomain = context.params.subdomain;
const user = await getUserBySubdomain(subdomain);

3-3. 사용자 격리된 데이터 처리 방식

• Supabase 또는 Firestore에서 subdomain 필드를 기준으로 데이터를 분리 저장
• 스크립트, 이벤트, 페이지 설정 등 모두 사용자별로 나눔

---

4. 보안 고려 사항

• 인증되지 않은 사용자가 다른 subdomain에 접근하지 못하도록 서버사이드 체크
• script 삽입은 반드시 로그인 후 대시보드에서만 가능
• 모든 사용자 데이터는 권한 기반으로 접근 제한

---

다음 글에서는 사용자 대시보드에서 분석 스크립트를 삽입하고 제어하는 방식을 상세히 설명합니다.
→ 4편. 사용자 정의 분석 스크립트 삽입 기능 구현