Vercel on CDN에서 Next.js 호스팅 비용을 절감하는 방법

Next.js 프레임워크는 고성능 React 애플리케이션 구축에 최고의 선택입니다. Next.js의 모회사인 Vercel은 Vercel에서 Next.js를 배포하는 데 권장되는 플랫폼으로 만드는 훌륭한 배포 환경을 제공합니다.

하지만 이 편리함에는 상당한 숨겨진 비용이 따를 수 있습니다.

Vercel 빠른 데이터 전송 및 대역폭 비용

Vercel을 사용하여 Next.js 프로젝트를 배포할 때 엣지 네트워크를 통해 전송되는 모든 데이터(페이지, API 라우트, 정적 자산 등)는 "빠른 데이터 전송"으로 집계됩니다. 이는 본질적으로 Vercel의 콘텐츠 전송 네트워크(CDN) 서비스입니다.

Vercel의 무료 Hobby 요금제에는 월 100GB의 빠른 데이터 전송이 포함되어 있어 개인 프로젝트나 소규모 애플리케이션에 충분할 수 있습니다. 그러나 트래픽이 약간 더 많거나 갑작스러운 트래픽 급증의 경우 무료 할당량을 초과하면 GB당 약 $0.15의 추가 요금이 부과됩니다.

다른 주요 클라우드 서비스 제공업체와 비교할 때 이 가격은 상당히 높습니다:

• 대역폭 가격이 GB당 $0.085인 Amazon CloudFront는 Vercel 가격의 절반 정도입니다.
• CDN이 포함되지 않아 일반적으로 데이터 전송이 더 비싼 AWS S3조차 GB당 $0.09에 불과하며 Vercel보다 저렴합니다.
• Cloudflare는 무료 CDN 대역폭을 제공합니다.

이는 의도치 않게 운영 비용에 상당한 부담을 줄 수 있습니다.

Vercel 빠른 데이터 전송 우회 방법

다행히 Next.js 프레임워크의 유연성을 통해 Vercel의 빠른 데이터 전송을 우회하고 더 저렴한 타사 CDN 서비스를 통해 정적 자산에 대한 트래픽을 처리할 수 있습니다.

이 솔루션의 핵심은 Next.js 구성 파일인 next.config.js를 수정하고 프로젝트의 빌드 및 배포 프로세스를 조정하는 것입니다.

1단계: assetPrefix 구성

assetPrefix는 next.config.js의 주요 매개변수로, Next.js 애플리케이션의 모든 정적 자산(JavaScript, CSS, 이미지 등)에 대한 URL 접두사를 지정할 수 있습니다. CDN 주소로 설정하면 Next.js가 HTML 페이지를 생성할 때 정적 자산에 대한 참조를 자동으로 CDN으로 가리킵니다.

다음은 CDN에 정적 자산을 업로드하고 사용자 지정 도메인 https://cdn.yourdomain.com를 통해 액세스한다고 가정할 때의 구성 예입니다.

const nextConfig = {
  // assetPrefix는 프로덕션 환경에서만 활성화
  assetPrefix: process.env.NODE_ENV === 'production' ? 'https://cdn.yourdomain.com' : undefined,
};

export default nextConfig;

주요 사항:

• assetPrefix의 값은 CDN 서비스의 액세스 URL이어야 합니다.
• 로컬 개발에 영향을 미치지 않도록 이 구성을 프로덕션 환경(process.env.NODE_ENV === 'production')에서만 활성화하는 것이 좋습니다.

2단계: 이미지 최적화 처리

기본적으로 Next.js <Image> 구성 요소는 Vercel 서버를 통해 이미지를 실시간으로 최적화합니다. 이는 assetPrefix를 설정하더라도 이미지 요청은 여전히 Vercel 서비스로 전송되어 대역폭 비용이 발생함을 의미합니다.

이미지도 자체 CDN을 통해 완전히 제공되도록 하려면 next.config.js에서 Next.js의 기본 이미지 최적화 기능을 비활성화해야 합니다.

const nextConfig = {
  // assetPrefix는 프로덕션 환경에서만 활성화
  assetPrefix: process.env.NODE_ENV === 'production' ? 'https://cdn.yourdomain.com' : undefined,
  images: {
    unoptimized: true,
  },
};

export default nextConfig;

images.unoptimized = true를 설정한 후 <Image> 구성 요소의 src는 assetPrefix에 정의된 경로를 직접 사용하므로 이미지 트래픽은 타사 CDN에서 전적으로 처리됩니다.

3단계: 빌드 및 업로드

구성 후에는 배포 프로세스에 몇 가지 조정이 필요합니다.

1. 프로젝트 빌드: npm run build를 실행합니다. 빌드가 완료되면 CDN에 업로드해야 하는 모든 정적 자산이 .next/static 디렉토리에 생성됩니다.
2. CDN에 업로드: .next/static 디렉토리의 모든 파일을 타사 CDN 서비스에 업로드해야 합니다. 업로드 후 파일 경로가 assetPrefix에 설정된 경로와 일치하는지 확인하는 것이 중요합니다. 예를 들어, 로컬 파일 .next/static/css/main.css는 CDN에서 https://cdn.yourdomain.com/_next/static/css/main.css에서 액세스할 수 있어야 합니다. 이는 static 디렉토리를 CDN 버킷의 _next/static 디렉토리로 업로드해야 함을 의미합니다.
3. 애플리케이션 배포: 마지막으로 .next/static를 제외한 나머지 빌드 결과물을 Vercel과 같은 플랫폼에 배포합니다.

이러한 단계를 따르면 Next.js 프로젝트의 정적 자산 트래픽을 더 비용 효율적인 CDN으로 성공적으로 이전하여 Vercel의 잠재적으로 높은 대역폭 요금을 효과적으로 피할 수 있습니다.

더 간단한 해결책이 있습니까?

Vercel에 대한 대안으로 CDN을 수동으로 구성하고 관리하는 것이 번거롭지만 Vercel보다 더 비용 효율적인 배포 솔루션을 찾고 있다면 Leapcell을 고려해 볼 만합니다.

Leapcell은 Next.js 프로젝트에 대한 원클릭 배포를 제공하며 내장된 글로벌 CDN 가속 기능을 포함하므로 수동 구성이 필요하지 않습니다.

Vercel과 달리 Leapcell의 CDN 가속 서비스는 완전히 무료이며 초과 대역폭 요금에 대한 걱정이 없습니다.

저희는 Vercel보다 개발자에게 친숙하고 양심적인 대안이 되기 위해 최선을 다하고 있습니다.

지금 Leapcell을 방문하여 직접 경험해 보세요.