Posts next.js - Deployment
Post
Cancel

next.js - Deployment

Next build API

next build를 실행하면, 작성한 소스코드가 최적화된 상태도 빌드된다. 빌드된 결과물 .next 아래에 위치하며 구조는 다음과 같다.

  • .next/static/chunks/pages : 라우트되는 이름 그대로 생성된 js 파일이 위치한다. (/about –> .next/static/chunks/pages/about.js)
  • .next/static/media : next/image를 사용하여 정적으로 삽입된 이미지가 해시되어 위치한다.
  • .next/static/css : 글로벌 CSS 파일이 위치한다.
  • .next/server/pages : 서버에서 프리렌더링되는 HTML과 JS의 엔트리 포인트. .nft.json 파일은 Output File Tracing이 활성화되면 생성된다.
  • .next/server/chunks : 어플리케이션 전반에서 사용되는 JS chunks
  • .next/cache : node.js server에서 캐시된 이미지, 응답, 페이지들이 존재. 빌드 시간을 줄여주고, 이미지 로딩이 빨라진다.

.next 폴더 하위에 존재하는 모든 JS 파일은 컴파일되고, 최소화 된다. 그리고 모든 모던 브라우저을 지원한다.

Static Only

만약 블로그와 같이 정적인 파일로 구성된 어플리케이션이라면, next export를 통해 정적인 파일만 빼서 배포할 수도 있다.

Manual Graceful shutdowns

프로세스로부터 SIGTERM이나 SIGINT 신호를 받으면 특정 코드가 실행되도록 설정할 수 있다. 주로 서버 종료시 클린업 코드를 실행하기 위해 사용된다.

  1. 환경변수에서 NEXT_MANUAL_SIG_HANDLEtrue로 설정한다. (시스템에서 설정해야하며, .env 파일에서 설정하면 안된다.)

    1
    2
    3
    4
    5
    6
    7
    8
    
    // package.json
    {
      "scripts": {
        "dev": "NEXT_MANUAL_SIG_HANDLE=true next dev",
        "build": "next build",
        "start": "NEXT_MANUAL_SIG_HANDLE=true next start"
      }
    }
    
  2. pages/_document.js에서 시그널 핸들러를 설정한다.ㄴ

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    // pages/_document.js
       
    if (process.env.NEXT_MANUAL_SIG_HANDLE) {
      process.on('SIGTERM', () => {
        console.log('Received SIGTERM: ', 'cleaning up')
        process.exit(0)
      })
       
      process.on('SIGINT', () => {
        console.log('Received SIGINT: ', 'cleaning up')
        process.exit(0)
      })
    }
    


출처

https://nextjs.org/docs/deployment

This post is licensed under CC BY 4.0 by the author.

next.js - production 배포 전 체크리스트

next.js - Output File Tracing

Comments powered by Disqus.