icon안동민 개발노트

커스텀 도메인 연결

 Next.js App Router 애플리케이션에 커스텀 도메인을 연결하는 과정은 프로젝트의 전문성과 신뢰성을 높이는 중요한 단계입니다.

 이 절에서는 도메인 구매부터 DNS 설정, HTTPS 구성까지의 전체 과정을 다루겠습니다.

도메인 구매 및 관리

  1. 신뢰할 수 있는 도메인 등록 업체(예 : Namecheap, GoDaddy, Google Domains)에서 도메인을 구매합니다.
  2. 도메인 구매 후, 등록 업체의 관리 패널에 접속하여 DNS 설정을 준비합니다.

Vercel에서의 도메인 설정

 Next.js App Router 프로젝트를 Vercel에 배포했다고 가정하고, 다음 단계를 따릅니다.

  1. Vercel 대시보드에서 프로젝트를 선택합니다.
  2. 'Settings' > 'Domains' 섹션으로 이동합니다.
  3. 구매한 도메인을 입력하고 'Add' 버튼을 클릭합니다.
  4. Vercel이 제공하는 DNS 설정 정보를 메모합니다.

DNS 레코드 구성

 도메인 등록 업체의 DNS 관리 페이지에서 다음 레코드를 설정합니다.

  1. A 레코드 :
  • 호스트: @ 또는 비워둠
  • 값: Vercel이 제공한 IP 주소
  1. CNAME 레코드 :
  • 호스트: www
  • 값: Vercel이 제공한 도메인 (예 : cname.vercel-dns.com)

 예시

A     @     76.76.21.21
CNAME www   cname.vercel-dns.com

SSL/TLS 인증서 설정

 Vercel은 자동으로 SSL/TLS 인증서를 제공하고 관리합니다.

  1. DNS 설정이 완료되면 Vercel이 자동으로 Let's Encrypt 인증서를 발급합니다.
  2. 인증서 갱신도 Vercel이 자동으로 처리합니다.

 수동으로 인증서를 관리해야 하는 경우

  1. Vercel 대시보드의 'Settings' > 'SSL Certificates'로 이동합니다.
  2. 'Upload Certificate' 버튼을 클릭하여 인증서 파일을 업로드합니다.

www와 non-www 도메인 리다이렉션

 SEO와 사용자 경험을 위해 www와 non-www 버전 중 하나로 통일하는 것이 좋습니다.

  1. Vercel 대시보드의 'Settings' > 'Domains'에서 리다이렉션 설정을 합니다.
  2. 원하는 버전(www 또는 non-www)을 선택합니다.
  3. Vercel이 자동으로 리다이렉션을 처리합니다.

 Next.js App Router에서 추가적인 리다이렉션이 필요한 경우, next.config.js 파일에서 설정할 수 있습니다.

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: 'https://www.yourdomain.com/:path*',
        destination: 'https://yourdomain.com/:path*',
        permanent: true,
      },
    ]
  },
}

13장 SEO 및 메타데이터와의 연결

 커스텀 도메인 설정은 13장에서 다룬 SEO 및 메타데이터와 밀접하게 연관됩니다. 올바른 도메인 설정은 다음과 같은 SEO 이점을 제공합니다.

  1. 브랜드 인지도 향상 : 커스텀 도메인은 프로페셔널한 이미지를 제공합니다.
  2. 검색 엔진 랭킹 : 일관된 URL 구조는 검색 엔진 최적화에 도움이 됩니다.
  3. SSL/TLS : HTTPS는 검색 엔진 랭킹에 긍정적인 영향을 미칩니다.

 App Router의 메타데이터 API를 사용할 때, 커스텀 도메인을 고려하여 설정해야 합니다.

// app/layout.js
export const metadata = {
  metadataBase: new URL('https://yourdomain.com'),
  title: 'Your App Title',
  description: 'Your app description',
}

도메인 확인 및 문제 해결

  1. DNS 전파 : DNS 변경사항이 전파되는 데 최대 48시간이 걸릴 수 있습니다.
  2. SSL 인증서 : https://yourdomain.com 으로 접속하여 인증서가 올바르게 설정되었는지 확인합니다.
  3. 리다이렉션 : www와 non-www 버전 모두 테스트하여 올바르게 리다이렉션되는지 확인합니다.

 문제가 발생한 경우

  • Vercel의 도메인 설정을 다시 확인합니다.
  • DNS 레코드가 올바르게 설정되었는지 확인합니다.
  • Vercel 지원팀에 문의하거나 커뮤니티 포럼을 활용합니다.

실습 : Vercel에 배포된 Next.js App Router 애플리케이션에 커스텀 도메인 연결하기

 목표 : 구매한 도메인을 Vercel에 배포된 Next.js App Router 애플리케이션에 연결하고 HTTPS를 설정합니다.

 단계

  1.  도메인 구매 : 원하는 도메인 등록 업체에서 도메인을 구매합니다.

  2.  Vercel 설정 :

  • Vercel 대시보드에서 프로젝트를 선택합니다.
  • 'Settings' > 'Domains'로 이동합니다.
  • 구매한 도메인을 추가합니다.
  1. DNS 설정 :
  • Vercel이 제공하는 DNS 설정 정보를 확인합니다.
  • 도메인 등록 업체의 DNS 관리 페이지에서 A 레코드와 CNAME 레코드를 설정합니다.
  1. HTTPS 확인 :
  • DNS 설정 후 몇 분에서 몇 시간 기다립니다.
  • https://yourdomain.com 으로 접속하여 SSL 인증서가 올바르게 적용되었는지 확인합니다.
  1. 리다이렉션 설정 :
  • Vercel 대시보드에서 www 또는 non-www로의 리다이렉션을 설정합니다.
  • next.config.js에서 필요한 추가 리다이렉션을 설정합니다.
  1. App Router 메타데이터 업데이트 :
  • app/layout.js 파일에서 metadataBase URL을 새 도메인으로 업데이트합니다.
  1. 테스트 :
  • 모든 페이지가 새 도메인에서 올바르게 작동하는지 확인합니다.
  • 리다이렉션이 예상대로 작동하는지 테스트합니다.
  1. 모니터링 :
  • Google Search Console에 새 도메인을 등록합니다.
  • 애널리틱스 도구를 설정하여 새 도메인의 트래픽을 모니터링합니다.

 이 실습을 통해 Next.js App Router 애플리케이션에 커스텀 도메인을 성공적으로 연결하고, HTTPS를 설정하며, SEO를 위한 기본적인 설정을 완료할 수 있습니다. 이는 프로덕션 레벨의 웹 애플리케이션 배포에 필수적인 과정입니다.

환경 변수 설정다른 호스팅 플랫폼에 배포하기