Vercel에서 Next.js 서브도메인 실제 설정하는 법 — cyh-lab.com 구조 설계기 (2편)

Vercel에서 서브도메인 연결하기

Vercel 설정 자체는 어렵지 않다. 각 프로젝트마다 Custom Domain을 추가하면 된다.

1. Vercel 프로젝트 → Settings → Domains
2. chart.cyh-lab.com 입력 후 Add
3. 안내에 따라 DNS 레코드 추가

DNS 설정은 도메인 등록업체 관리 페이지에서 한다. CNAME 레코드를 추가하면 된다.

chart    CNAME    cname.vercel-dns.com
baby     CNAME    cname.vercel-dns.com

Vercel이 SSL 인증서까지 자동으로 발급해줘서 https 설정을 따로 할 필요는 없다.

삽질한 부분이 있다면 DNS 전파 시간이다. 빠르면 5분, 늦으면 몇 시간이 걸린다. Vercel 대시보드에서 "Invalid Configuration"이 뜨더라도 조금 기다리면 자동으로 해결되는 경우가 많다. 계속 확인하다가 뭔가 잘못됐나 싶어서 레코드 지웠다 다시 추가했는데, 그냥 기다렸어야 했다.

Next.js 코드에서 서브도메인 링크 처리

허브 사이트(www.cyh-lab.com)에서 서브도메인으로 이동할 때 Next.js의 <Link> 컴포넌트를 쓰면 안 된다.

// ❌ 이렇게 하면 안 됨
import Link from 'next/link'
<Link href="https://chart.cyh-lab.com">차트 사이트</Link>

// ✅ 그냥 a 태그를 써야 함
<a href="https://chart.cyh-lab.com" target="_blank" rel="noopener noreferrer">
  차트 사이트 바로가기
</a>

Next.js의 <Link>는 같은 앱 내부 경로 이동에 최적화되어 있다. 외부 URL에 쓰면 prefetch가 제대로 동작하지 않거나 예상과 다르게 동작할 수 있다. 서브도메인은 별도 앱이니까 <a> 태그가 맞다.

환경변수 관리

각 프로젝트가 분리되어 있으니 .env 파일도 따로 관리한다. Vercel 대시보드에서 프로젝트별로 Environment Variables를 설정할 수 있어서 그리 불편하진 않다.

로컬 개발 시에는 .env.local 파일을 쓴다.

# chart.cyh-lab.com의 .env.local 예시
NEXT_PUBLIC_SITE_URL=https://chart.cyh-lab.com
STOCK_API_KEY=your_api_key_here

여기서 중요한 건 NEXT_PUBLIC_ 접두사다. 이게 붙은 변수는 빌드 시점에 클라이언트 번들에 포함되어 브라우저에서도 접근 가능하다. API 키처럼 외부에 노출되면 안 되는 값은 절대 NEXT_PUBLIC_을 붙이면 안 된다.

외부 API를 호출해야 할 때는 Route Handler를 만들어서 서버에서만 호출하도록 처리한다.

// app/api/stock/route.ts
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const ticker = searchParams.get('ticker')

  const res = await fetch(`https://external-api.com/stock/${ticker}`, {
    headers: {
      Authorization: `Bearer ${process.env.STOCK_API_KEY}`, // 서버에서만 접근
    },
  })

  const data = await res.json()
  return Response.json(data)
}

이렇게 하면 API 키는 서버에만 남고 클라이언트에는 노출되지 않는다.

현재 구조의 한계와 앞으로

지금 구조에서 가장 불편한 건 공통 코드 싱크다. 두 서브도메인 사이트에서 동일하게 쓰는 컴포넌트나 유틸 함수가 있는데, 하나를 수정하면 나머지에도 수동으로 반영해줘야 한다.

사이트가 더 늘어나거나 공통 코드가 많아지면 Turborepo 같은 모노레포 도구로 전환하는 걸 고려할 것 같다. 지금은 레포가 세 개라 오버헤드가 더 크다고 판단해서 유지 중이다.

서브도메인을 추가할 때마다 이 설정을 반복하는 게 약간 귀찮긴 한데, Vercel + 커스텀 도메인 조합 자체는 꽤 만족스럽다. 무중단 배포, SSL 자동 갱신, 빌드 로그 확인까지 한 곳에서 다 되니까.