NextJS: Depoyment

배포

축하합니다! Next.js 애플리케이션을 프로덕션 환경에 배포할 준비가 되었습니다. 이 문서에서는 Next.js Build API를 사용하여 관리형 또는 자체 호스팅을 배포하는 방법을 보여줍니다.

Next.js Build API

next build는 프로덕션을 위해 최적화된 애플리케이션의 버전을 생성합니다. 이 표준 출력은 다음을 포함합니다:

• getStaticProps 또는 자동 정적 최적화를 사용하는 페이지에 대한 HTML 파일
• 전역 스타일 또는 개별적으로 범위가 지정된 스타일을 위한 CSS 파일
• Next.js 서버에서 동적 콘텐츠의 사전 렌더링을 위한 JavaScript
• React를 통한 클라이언트 측 상호 작용을 위한 JavaScript

이 출력은 .next 폴더 내에서 생성됩니다:

• .next/static/chunks/pages – 이 폴더 내의 각 JavaScript 파일은 해당 이름과 동일한 라우트와 관련이 있습니다. 예를 들어, .next/static/chunks/pages/about.js는 애플리케이션에서 /about 라우트를 볼 때 로드되는 JavaScript 파일입니다.
• .next/static/media – next/image에서 정적으로 가져온 이미지가 해시화되어 여기에 복사됩니다.
• .next/static/css – 애플리케이션의 모든 페이지를 위한 전역 CSS 파일
• .next/server/pages – 서버에서 사전 렌더링된 HTML 및 JavaScript 진입 지점입니다. .nft.json 파일은 출력 파일 추적이 활성화되면 생성되며, 주어진 페이지에 의존하는 모든 파일 경로를 포함합니다.
• .next/server/chunks – 애플리케이션 전체에서 사용되는 공유 JavaScript 청크
• .next/cache – 빌드 캐시 및 Next.js 서버에서 캐시된 이미지, 응답 및 페이지의 출력. 캐시를 사용하면 빌드 시간이 줄어들고 이미지 로드 성능이 향상됩니다.

.next 내의 모든 JavaScript 코드가 컴파일되고 브라우저 번들이 최소화되어 최상의 성능을 달성하고 모든 최신 브라우저를 지원합니다.

Vercel을 사용한 관리형 Next.js

Vercel은 구성 없이 Next.js 애플리케이션을 배포하는 가장 빠른 방법입니다.

Vercel에 배포할 때, 플랫폼은 Next.js를 자동으로 감지하고 next build를 실행하고 다음을 포함하여 빌드 출력을 최적화합니다.

• 변경되지 않은 캐시된 에셋을 유지합니다.
• 고유한 URL을 갖는 변경 불가능한 배포
• 가능한 경우 페이지는 자동으로 정적으로 최적화됩니다.
• 에셋(JavaScript, CSS, 이미지, 글꼴)은 압축되고 글로벌 엣지 네트워크에서 제공됩니다.
• API 라우트는 무한하게 확장 가능한 격리된 서버리스 함수로 자동으로 최적화됩니다.
• 미들웨어는 엣지 함수로 자동으로 최적화되며, 콜드 스타트가 없고 즉시 부팅됩니다.

또한, Vercel은 다음과 같은 기능을 제공합니다.

• Next.js Analytics를 통한 자동 성능 모니터링
• 자동 HTTPS 및 SSL 인증서
• GitHub, GitLab, Bitbucket 등을 통한 자동 CI/CD
• 환경 변수 지원
• 사용자 정의 도메인 지원
• next/image를 사용한 이미지 최적화 지원
• git push를 통한 즉시 글로벌 배포

Vercel에 무료로 Next.js 애플리케이션을 배포하여 시도해 보세요.

자체 호스팅

Node.js 또는 Docker를 사용하여 모든 기능을 지원하는 Next.js를 자체 호스팅할 수 있습니다. 또한 정적 HTML 내보내기를 수행할 수 있지만 일부 제한 사항이 있습니다.

Node.js 서버

Next.js는 Node.js를 지원하는 모든 호스팅 공급자(AWS EC2 또는 DigitalOcean Droplet 등)에 배포할 수 있습니다.

먼저, package.json에 "build" 및 "start" 스크립트가 있는지 확인하세요.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

그런 다음 next build를 실행하여 애플리케이션을 빌드합니다. 마지막으로 next start를 실행하여 Node.js 서버를 시작합니다. 이 서버는 Next.js의 모든 기능을 지원합니다.

next/image를 사용하는 경우 프로덕션 환경에서 더 높은 성능의 이미지 최적화를 위해 프로젝트 디렉토리에서 npm install sharp을 실행하는 것이 좋습니다. Linux 플랫폼에서는 sharp가 과도한 메모리 사용을 방지하도록 추가 구성이 필요할 수 있습니다.

Docker 이미지

Next.js는 Docker 컨테이너를 지원하는 모든 호스팅 공급자에 배포할 수 있습니다. 이 방법은 Kubernetes 또는 HashiCorp Nomad와 같은 컨테이너 오케스트레이터 또는 클라우드 제공업체 내의 단일 노드에서 실행할 때 사용할 수 있습니다.

1. 로컬 컴퓨터에 Docker를 설치합니다.
2. with-docker 예제를 복제합니다.
3. 컨테이너를 빌드합니다: docker build -t nextjs-docker .
4. 컨테이너를 실행합니다: docker run -p 3000:3000 nextjs-docker
   여러 환경에서 다른 환경 변수를 사용해야하는 경우 with-docker-multi-env 예제를 확인하세요.

정적 HTML 내보내기

Next.js 앱의 정적 HTML 내보내기를 수행하려면 정적 HTML 내보내기 문서의 지침에 따르세요.

다른 서비스

다음 서비스는 Next.js v12+를 지원합니다. 각 서비스에서 Next.js를 배포하기 위한 예제 또는 가이드를 찾을 수 있습니다.

관리 서버

• AWS Copilot(https://aws.github.io/copilot-cli/)
• Digital Ocean App Platform(https://docs.digitalocean.com/tutorials/app-nextjs-deploy/)
• Google Cloud Run(https://github.com/vercel/next.js/tree/canary/examples/with-docker)
• Heroku(https://elements.heroku.com/buildpacks/mars/heroku-nextjs)
• Railway(https://docs.railway.app/getting-started)
• Render(https://render.com/docs/deploy-nextjs-app)

참고: 위의 예제와 같이 ₩을 사용할 수 있는 관리 플랫폼도 있습니다.

Static Only

다음 서비스는 next export를 사용하여 Next.js를 배포할 수 있습니다.

• GitHub Pages

또한 다음과 같은 CI/CD 파이프라인(예: GitHub Actions, Jenkins, AWS CodeBuild, Circle CI, Azure Pipelines 등)을 통해 수동으로 next export 출력을 모든 정적 호스팅 공급자에 배포할 수 있습니다.

서버리스

• AWS Amplify
• AWS Serverless
• Azure Static Web Apps
• Cloudflare Pages
• Firebase
• Netlify
• Terraform
  참고: 모든 서버리스 제공업체가 next start에서 Next.js Build API를 구현하는 것은 아닙니다. 공급업체에서 지원하는 기능을 확인하세요.

자동 업데이트

Next.js 애플리케이션을 배포할 때, 새로운 버전을 로드하지 않고 최신 버전을 보고 싶을 것입니다.

Next.js는 라우팅할 때 자동으로 애플리케이션의 최신 버전을 백그라운드에서 로드합니다. 클라이언트 측 탐색의 경우, next/link는 일시적으로 일반 <a> 태그처럼 작동합니다.

참고: next/link에 의해 사전 로드 된 새 페이지(구 버전)가 이미 있으면 Next.js는 기존 버전을 사용합니다. 사전 로드되지 않은 페이지(및 CDN 수준에서 캐시되지 않은 페이지)로 이동하면 최신 버전을 로드합니다.

수동 Graceful Shutdown

가끔 SIGTERM 또는 SIGINT와 같은 프로세스 신호에서 몇 가지 정리 코드를 실행하려고 할 수 있습니다.

이를 위해 env 변수 NEXT_MANUAL_SIG_HANDLE을 true로 설정한 다음 _document.js 파일 내에서 해당 신호의 핸들러를 등록할 수 있습니다. env 변수는 .env 파일이 아닌 시스템 env 변수에 직접 등록해야합니다.

// package.json
{
  "scripts": {
    "dev": "NEXT_MANUAL_SIG_HANDLE=true next dev",
    "build": "next build",
    "start": "NEXT_MANUAL_SIG_HANDLE=true next start"
  }
}

// pages/_document.js

if (process.env.NEXT_MANUAL_SIG_HANDLE) {
  // this should be added in your custom _document
  process.on('SIGTERM', () => {
    console.log('Received SIGTERM: ', 'cleaning up')
    process.exit(0)
  })

  process.on('SIGINT', () => {
    console.log('Received SIGINT: ', 'cleaning up')
    process.exit(0)
  })
}