Vercel Domains 커스텀 도메인 연결

Introduction

Vercel 프로젝트에 커스텀 도메인을 연결하면 프로페셔널한 이미지를 만들 수 있고, SEO에도 도움이 됩니다. 이 글에서는 Vercel에서 커스텀 도메인을 설정하고, DNS를 최적화하며, SSL 인증서를 관리하는 방법을 살펴보겠습니다.

Environment

Vercel 프로젝트
커스텀 도메인 (예: example.com)
DNS 공급자 (Cloudflare, Route53 등)
Vercel CLI

Problem

도메인 연결 시 발생하는 일반적인 문제들:

# 도메인 연결 상태 확인
vercel domains ls

# DNS 확인
dig example.com

# SSL 인증서 상태 확인
vercel certs ls

도메인 연결 실패 원인:

DNS 설정 오류
SSL 인증서 발급 실패
도메인 소유권 확인 미흡
DNS 전파 지연

Analysis

Vercel 도메인 연결 프로세스:

Vercel 대시보드에서 도메인 추가
DNS 레코드 설정 (A 레코드 또는 CNAME)
도메인 소유권 확인
SSL 인증서 자동 발급
배포 및 테스트

DNS 레코드 유형:

A 레코드: 도메인을 IP 주소로 연결
CNAME: 서브도메인을 다른 도메인으로 연결
TXT 레코드: 도메인 소유권 확인

Solution

1. Vercel CLI로 도메인 추가

# 프로젝트에 도메인 추가
vercel domains add example.com

# 서브도메인 추가
vercel domains add app.example.com

# 도메인 상태 확인
vercel domains ls

2. DNS 설정 (Cloudflare 예시)

# A 레코드 설정 (메인 도메인)
Type: A
Name: @
Content: 76.76.21.21
Proxy: DNS only (회색 구름)
TTL: Auto

# CNAME 레코드 설정 (서브도메인)
Type: CNAME
Name: app
Content: cname.vercel-dns.com
Proxy: DNS only (회색 구름)
TTL: Auto

3. DNS 설정 (AWS Route53 예시)

// dns-config.js
const route53 = new AWS.Route53();

const params = {
  HostedZoneId: 'YOUR_HOSTED_ZONE_ID',
  ChangeBatch: {
    Changes: [
      {
        Action: 'UPSERT',
        ResourceRecordSet: {
          Name: 'example.com',
          Type: 'A',
          TTL: 300,
          ResourceRecords: [
            { Value: '76.76.21.21' }
          ]
        }
      },
      {
        Action: 'UPSERT',
        ResourceRecordSet: {
          Name: 'app.example.com',
          Type: 'CNAME',
          TTL: 300,
          ResourceRecords: [
            { Value: 'cname.vercel-dns.com' }
          ]
        }
      }
    ]
  }
};

await route53.changeResourceRecordSets(params).promise();

4. SSL 인증서 관리

# SSL 인증서 상태 확인
vercel certs ls

# 인증서 수동 발급
vercel certs issue example.com

# 인증서 갱신
vercel certs renew example.com

// SSL 인증서 모니터링
async function checkSSLCertificate(domain) {
  const response = await fetch(`https://${domain}`);
  const certificate = response.headers.get('x-certificate-expiry');
  
  if (certificate) {
    const expiryDate = new Date(certificate);
    const daysUntilExpiry = Math.floor(
      (expiryDate - Date.now()) / (1000 * 60 * 60 * 24)
    );
    
    if (daysUntilExpiry < 30) {
      console.warn(`SSL certificate expires in ${daysUntilExpiry} days`);
    }
  }
}

5. 도메인 검증 스크립트

// scripts/verify-domain.js
const dns = require('dns');
const https = require('https');

async function verifyDomain(domain) {
  console.log(`Verifying domain: ${domain}`);
  
  // DNS 레코드 확인
  try {
    const addresses = await dns.promises.resolve(domain);
    console.log('DNS records:', addresses);
  } catch (error) {
    console.error('DNS resolution failed:', error.message);
    return false;
  }
  
  // SSL 인증서 확인
  return new Promise((resolve) => {
    https.get(`https://${domain}`, (res) => {
      console.log('SSL certificate valid');
      console.log('Status:', res.statusCode);
      resolve(true);
    }).on('error', (error) => {
      console.error('SSL check failed:', error.message);
      resolve(false);
    });
  });
}

verifyDomain('example.com');

6. 환경 변수 설정

// vercel.json
{
  "domains": [
    "example.com",
    "www.example.com",
    "app.example.com"
  ],
  "redirects": [
    {
      "source": "/:path*",
      "has": [{ "type": "host", "value": "www.example.com" }],
      "destination": "https://example.com/:path*",
      "permanent": true
    }
  ]
}

7. 프로덕션 배포 시 도메인 설정

# .github/workflows/deploy.yml
name: Deploy to Vercel
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'
          
      - name: Verify domain
        run: |
          sleep 30
          curl -f https://example.com || exit 1

Lessons Learned

DNS 전파 시간: DNS 변경은 최대 48시간까지 전파될 수 있으므로 미리 설정해야 합니다.
SSL 자동 갱신: Vercel은 SSL 인증서를 자동으로 갱신하지만, 주기적으로 확인하는 것이 좋습니다.
도메인 소유권: 도메인 소유권 확인을 위해 TXT 레코드가 필요할 수 있습니다.
레드IRECTION 설정: www 서브도메인에서 메인 도메인으로의 리다이렉트를 설정해야 합니다.
DNS 보안: DNS 보안 설정(DNSSEC)을 고려하는 것이 좋습니다.

This blog does not accept any external sponsorships, affiliate marketing, or ad revenue.