[번역] Next.js - 배포

여름노래불러줘·2022년 11월 28일

Next.js 빌드 API

next build 는 제품을 위해 최적화된 버전의 앱을 생성한다. 표준 출력은 다음을 포함한다:

getStaticProps 나 자동 정적 최적화를 사용하는 페이지를 위한 HTML 파일.
글로벌 혹은 개별적인 스코프 스타일을 위한 CSS 파일
Next.js 서버로부터 동적인 컨텐츠를 사전렌더링 하기 위한 자바스크립트
React 를 통해 클라이언트 측에서 상호작용을 위한 자바스크립트

이런 출력물들은 .next 폴더 안에 생성되어 있다:

.next/static/chunks/pages - 이 폴더 안의 각 자바스크립트 파일들은 같은 이름을 가진 라우터와 연관이 있다.예를 들면, .next/static/chnks/pages/about.js 는 앱에서 /about 라우트를 보고 있을 때 불러와진다.
.next/static/media - next/image로부터 정적으로 import 된 이미지들이 해시 및 복사되어 있다.
.next/static/css - 앱 내 모든 페이지를 위한 글로벌 CSS 파일
.next/server/pages - 서버로부터 사전렌더링된 HTML 과 자바스크립트 진입점. .nft.json 파일 출력파일 추적이 활성화 될 때 생성되고, 주어진 페이지에 의존하는 모든 파일 경로를 포함한다.
.next/server/chunks - 앱 전체 여러 곳에서 사용되는 공유된 자바스크립트 덩어리들.
.next/cache - Next.js 서버로부터 빌드된 캐시, 캐시된 이미지, 응답, 페이지들을 위한 결과물. 캐시를 사용해 빌드 시간 단축 및 이미지 로딩 성능 향상에 도움을 줌.

.next 안에 있는 모든 자바스크립트 코드들은 컴파일 되었고, 브라우저 번들은 모든 최신 브라우저들을 지원하고 최고 성능에 도달하기 위해 축소 되었다.

Vercel 로 관리되는 Next.js

Vercel 은 별도 구성 없이 Next.js 앱을 배포하는 가장 빠른 방법이다.
Vercel 로 배포하면 플랫폼이 자동으로 Next.js 를 감지하고 next build 를 실행한다. 그리고 다음을 포함해 빌드 결과물을 최적화한다.

변경되지 않았다면 배포 간에 캐시된 에셋을 유지
매 커밋마다 고유한 URL을 사용하는 변경되지 않는 배포
가능하면 페이지들이 자동으로 정적으로 최적화 됨.
에셋 (자바스크립트, CSS, 이미지, 폰트)들은 글로벌 엣지 네트워크로부터 압축 및 제공됨
API 라우트들은 무한확장되는 격리된 서버리스 함수로 자동으로 최적화됨
미들웨어는 제로 콜드 스타드와 즉시 부팅되는 엣지 함수로 자동으로 최적화 됨.

추가로 Vercel은 이런 기능도 제공:

Next.js 분석으로 자동 성능 모니터링
자동 HTTPS 및 SSL 인증
자동 CI/CD (Github, GitLab, Bitbucket 등을 통해)
환경 변수 지원
커스텀 도메인 지원
next/image 이미지 최적화 지원
git push 를 통해 즉시 글로벌 배포

셀프 호스팅

Node.js 나 Docker 를 이용해 Next.js 의 모든 기능을 지원하며 셀프 호스팅할 수 있다. 몇 가지 제한이 있는 정적 HTML export 도 가능하다.

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를 실행해 sharp 를 추가하는 것을 고려하자. 리눅스 플랫폼에서 sharp는 추가적 메모리 사용을 방지하기 위해 추가적인 구성이 요구될 수 있음

도커 이미지

Next.js 는 Docker 컨테이너를 지원하는 모든 호스팅 제공자에 배포 가능하다. 쿠버네티스나 HashiCorp Nomad 같은 컨테이너 오케스트레이터에 배포할 때나 모든 클라우드 제공자 내 단일 노드 내에서 가동하는 경우 이런 접근방법을 사용할 수 있다.

당신의 컴퓨터에 Docker 설치
with-docker 예제를 클론
컨테이너 빌드: `docker build -t nextjs-docker .
컨테이너 실행: docker run -p 3000:300 nextjs-docker

여러 환경에서 다른 환경변수를 사용해야할 필요가 있다면, with-docker-multi-env 예제를 참고.

다른 서비스들

아래 서비스들은 Next.js v12 이상을 지원한다. 각 서비스마다 예제나 Next.js 배포 가이드를 찾을 수 있다.

관리되는 서버

AWS Copilot
Digital Ocean App Platform
Google Cloud Run
Heroku
Railway
Render

노트: 위의 예처럼 Dockerfile 을 사용할 수 있는 관리형 플랫폼도 있다.

정적만

아래 서비스들은 next export 를 사용한 Next.js 배포를 지원한다.

Cloudflare Pages
Firebase
GitHub Pages

GitHub Actions, Jenkins, AWS CodeBuild, Circle CI, Azure Pipelines 등 CI/CD 파이프라인을 통해 정적 호스팅 제공자에게 next export 출력물을 직접 배포할 수도 있다.

서버리스

AWS Serverless
Azure Static Web Apps
Terraform
Netlify

노트: 모든 서버리스 제공자가 next start 로부터 Next.js 빌드 API 를 구현하는 건 아니다. 제공자가 어떤 기능을 지원하는지 확인해야 한다.

자동 업데이트

Next.js 앱을 배포할 때, 최신 버전을 리로드 없이 보고 싶다.

Next.js 는 라우팅 시 백그라운드에서 앱의 최신 버전을 자동으로 불러올 것이다. 클라이언트 사이드 탐색에선 next/link 가 임시로 <a> 태그의 기능을 한다.

노트: 새로운 페이지 (이전 버전)가 next/link 에 의해 이미 Prefetch 되었다면 Next.js 는 이전 버전을 사용할 것이다.
Preefetch 되지 않은 (그리고 CDN 레벨에서 캐시되지 않은) 페이지로 이동하면 최신 버전이 로드 된다.

수동 정상 종료

가끔 SIGTERM 이나 SIGINT 같은 프로세스 신호에서 클린업 코드를 실행하고 싶을 수 있다.

환경변수 NEXT_MANUAL_SIG_HANDLE 를 true 로 설정하고 _document.js 파일 내에 이 신호에 대한 핸들러를 등록하면 된다.

// 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)
  })
}

여름노래불러줘

이전 포스트

리눅스 쉘 스크립트

다음 포스트