Next.js 13-1 Deploying

  여기에서는 Next.js Build API를 사용하여 관리형 또는 자체 호스팅 배포 방법을 보여준다.

 

• Next.js Build API

  다음 빌드는 프로덕션을 위해 애플리케이션의 최적화된 버전을 생성한다. 이 표준 출력에는 다음이 포함된다.

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

  이 출력은 .next 폴더 내에서 생성된다.

1. .next/static/chunks/pages - 이 폴더 내의 각 JavaScript 파일은 동일한 이름을 가진 경로와 관련된다. 예를 들어 .next.static/chunks/pages/about.js는 애플리케이션에서 /about 경로를 볼 때 로드되는 JavaScript 파일이다.
2. .next/static/media - next/image에서 정적으로 가져온 이미지가 여기에 해시되고 복사된다.
3. .next/static/css - 애플리케이션의 모든 페이지에 대한 전역 CSS 파일
4. .next/server/pages - 서버에서 사전 렌더링된 HTML 및 JavaScript 진입점, .nft.json 파일은 출력 파일 추적이 활성화될 때 생성되며 지정된 페이지에 의존하는 모든 파일 경로를 포함한다.
5. .next/server/chunks - 애플리케이션 전체의 여러 위치에서 사용되는 공유 JavaScript 청크
6. .next/cache - Next.js 서버의 빌드 캐시 및 캐시 된 이미지, 응답 및 페이지에 대한 출력이다. 캐시를 사용하면 빌드 시간이 단축되고 이미지 로드 성능이 향상된다.

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

 

• Managed Next.js with Vercel

  Vercel은 구성 없이 Next.js 애플리케이션을 배포하는 가장 빠른 방법이다. Vercel에 배포할 때 플랫폼은 자동으로 Next.js를 감지하고 next build를 실행하며 다음을 포함하여 빌드 출력을 최적화한다.

1. 변경되지 않은 경우 배포 간에 캐시 된 자산 유지
2. 모든 커밋에 대해 고유한 URL을 사용하는 변경 불가능한 배포
3. 가능한 경우 페이지가 자동으로 정적으로 최적화된다.
4. Assets (JavaScript, CSS, 이미지, 글꼴)은 압축되어 글로벌 Edge 네트워크에서 제공된다.
5. API 경로는 무한 확장이 가능한 격리된 서버리스 기능으로 자동으로 최적화된다.
6. 미들웨어는 콜드 스타트가 없고 즉시 부팅되는 Edge 기능으로 자동으로 최적화된다.

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

1. Next.js Speed Insights로 자동 성능 모니터링
2. 자동 HTTPS 및 SSL 인증서
3. 자동 CI/CD(GitHub, GitLab, Bitbucket 등을 통해)
4. 환경 변수 지원
5. 사용자 지정 도메인 지원
6. next/image를 사용한 이미지 최적화 지원
7. git push를 통한 즉각적인 글로벌 배포

 

• Self-Hosting

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

Node.js Server

  Next.js는 Node.js를 지원하는 모든 호스팅 제공업체에 배포할 수 있다. 예를 들어 AWS EC2 또는 DigitalOcean Droplet이다. 먼저 package.json에 'build' 및 'start' 스크립트가 있는지 확인한다.

// package.json

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

  그런 다음 npm run build를 실행하여 애플리케이션을 빌드한다. 마지막으로 npm run start를 실행하여 Node.js 서버를 시작한다. 이 서버는 Next.js의 모든 기능을 지원한다. next/image를 사용하는 경우 프로젝트 디렉토리에서 npm install sharp를 실행하여 프로덕션 환경에서 보다 성능이 뛰어난 이미지 최적화를 위해 sharp를 추가하는 것이 좋다. Linux 플랫폼에서 sharp는 과도한 메모리 사용을 방지하기 위해 추가 구성이 필요할 수 있다.

Doker Image

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

1. 머신에 Docker 설치
2. With-docker 샘플 clone
3. 컨테이너 빌드: docker build -t nextjs-docker
4. 컨테이너 실행: docker run -p 3000:3000 nextjs-docker

 

• Automatic Updates

  Next.js는 애플리케이션을 배포할 때 다시 로드할 필요 없이 최신 버전을 보고 싶을 것이다. Next.js는 라우팅 할 때 백그라운드에서 애플리케이션의 최신 버전을 자동으로 로드한다. 클라이언트 측 탐색의 경우 next/link는 일시적으로 일반 <a> 태그로 작동한다.

  새 페이지(이전 버전 포함)가 이미 next/link에 의해 사전 패치된 경우 Next.js는 이전 버전을 사용한다. 프리패치되지 않은 (그리고 CDN 수준에서 캐시 되지 않은) 페이지로 이동하면 최신 버전이 로드된다.

 

• Manual Graceful shutdowns

  자체 호스팅 시 서버가 SIGTERM 또는 SIGINT 신호로 종료될 때 코드를 실행하고 싶을 수 있다. env 변수 NEXT_MANUAL_SIG_HANDLE을 true로 설정한 다음 _document.js 파일 내에서 해당 신호에 대한 처리기를 등록할 수 있다. .env 파일이 아닌 package.json 스크립트에서 직접 env 변수를 등록해야 한다.

// package.json
{
  "scripts": {
    "dev": "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')
  })
}