Next.js와 i18next를 사용한 다국어 사이트 구축(7): 배포 및 관리

배포 및 관리

Vercel과 AWS(S3, CloudFront)를 사용한 Next.js 다국어 웹사이트의 배포 및 관리

7.1 Vercel을 이용한 배포

Vercel에 Next.js 프로젝트 배포하기

• Vercel은 Next.js를 만든 회사에서 제공하는 배포 플랫폼으로, Next.js 애플리케이션 배포에 매우 최적화되어 있습니다.
• 배포 과정:
  1. Vercel 계정 생성 및 로그인.
  2. GitHub, GitLab, 또는 Bitbucket에서 Next.js 프로젝트를 Vercel과 연동.
  3. Vercel 대시보드에서 프로젝트 선택 후 배포 설정.
  4. 배포 버튼을 클릭하면 Vercel이 자동으로 프로젝트를 빌드하고 배포.
  5. 배포 완료 후, 프로젝트 URL을 통해 웹사이트에 접근.

Vercel에서 다국어 페이지가 제대로 작동하는지 확인

• 배포 후, Vercel에서 다국어 사이트가 제대로 작동하는지 언어 전환 기능과 번역된 콘텐츠가 올바르게 표시되는지 테스트.
  • SSR과 SSG가 함께 적용된 페이지가 각각 올바르게 렌더링되는지 확인.
  • 각 언어별로 **SEO 설정(hreflang 태그, 메타 태그)**이 올바르게 반영되는지 확인.

---

7.2 AWS S3와 CloudFront를 이용한 정적 페이지 배포

Next.js의 정적 파일을 S3에 배포하고, CloudFront로 CDN을 구성하는 방법

• Next.js에서 SSG(정적 페이지 생성) 기능을 사용하면, 정적 HTML 파일을 빌드하여 AWS S3에 배포할 수 있습니다.
• AWS S3 + CloudFront를 활용하면, 전 세계 사용자에게 빠르고 안정적인 콘텐츠 배포가 가능합니다.

배포 과정:

1. Next.js 빌드
   • 프로젝트 루트에서 정적 파일 빌드:

     npm run build

2. AWS S3에 정적 파일 업로드
   • AWS S3 버킷을 생성하고, 정적 웹사이트 호스팅으로 구성.
   • Next.js 빌드 결과물(.next, out 폴더)을 S3 버킷에 업로드.
3. CloudFront CDN 구성
   • CloudFront를 설정하여 S3 버킷을 원본으로 사용하고, CDN을 통한 글로벌 콘텐츠 배포를 구성.
   • CloudFront의 배포 URL을 사용해 웹사이트에 접근 가능.

 

서버리스 아키텍처로 다국어 사이트 배포

• AWS Lambda와 같은 서버리스 기능을 함께 사용해 다국어 지원 및 SSR을 위한 서버리스 아키텍처로 전환 가능.
  • CloudFront와 Lambda@Edge를 결합해 실시간 SSR 기능을 제공하거나, S3를 통해 정적 콘텐츠를 효율적으로 배포 가능.

---

7.3 배포 후 성능 모니터링

Lighthouse 및 Web Vitals로 성능 모니터링

• Google Lighthouse와 Web Vitals 도구를 사용해 배포 후 웹사이트 성능을 평가하고, 최적화할 수 있습니다.
  • Lighthouse:
    • 페이지 속도, 접근성, SEO, 성능 평가.
    • 중요한 성능 지표: First Contentful Paint (FCP), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) 등을 확인.
  • Web Vitals:
    • Core Web Vitals를 통해 사용자 경험 중심의 성능 지표를 모니터링.

사용자 국가에 따른 로딩 속도 최적화

• 전 세계 사용자가 사용하는 경우, 각 지역에서의 로딩 속도를 최적화하는 것이 중요합니다.
  • CDN을 활용한 최적화:
    • CloudFront와 같은 CDN을 사용하여 각 사용자의 지리적 위치에 따른 최적화가 가능합니다. 콘텐츠가 사용자의 위치에 가까운 엣지 서버에서 제공되므로 로딩 속도가 크게 향상됩니다.
  • Lighthouse 지역별 테스트:
    • Lighthouse의 모바일/데스크탑 및 다양한 네트워크 상태에서의 성능 평가로 지역별 로딩 속도를 확인합니다.

---

이 단계에서는 Vercel과 AWS S3 + CloudFront를 사용한 배포 방식을 다루고, 배포 후 성능 모니터링을 통해 웹사이트가 최적의 성능을 유지할 수 있도록 관리하는 방법을 배웁니다.