Next.js 배포 정리

최종 수정일 :  2024.07.22

Next.js 배포 정리

배포 준비

배포하기 전에 next build 명령을 실행해야 한다. 이를 통해 최적화된 프로덕션 빌드를 생성한다.

---

Next.js 애플리케이션은 여러 방법으로 배포할 수 있다.

1. Node.js를 지원하는 호스팅 서비스를 사용
2. Vercel
3. 서버리스 배포 플랫폼 - ex) Netlify

서버리스 플랫폼은 Next.js 애플리케이션에 특히 적합하다. Next.js의 하이브리드 렌더링 기능을 최대한 활용하여 CDN에서 정적 생성된 페이지를 제공하면서 서버리스 함수를 통해 서버사이드 렌더링 및 API 라우트를 처리할 수 있다.

 

플랫폼	특징	설명
Vercel	서버리스 플랫폼	Next.js를 만든 회사 Next.js에 대한 일급 지원을 제공한다.
Netlify	서버리스 플랫폼	Next.js를 빌드 플러그인을 통해 지원한다.
Firebase	서버리스 플랫폼	호스팅 및 함수 서비를 통해 Next.js를 지원한다.
AWS	호스팅 서비스	Elastic Beanstalk 서비스를 통해 Next.js를 지원한다.
Google Cloud	호스팅 서비스	App Engine 서비스를 통해 Next.js를 지원한다.
Heroku	PaaS (Platform as a Service)	Node.js 빌드 팩을 통해 Next.js를 지원한다.

---

서버 설정 & 배포

Next.js는 기본적으로 Node.js 서버 위에서 동작한다. 따라서 추가 설정이 필요한데, 대표적으로 다음과 같다.

설정

SSL 인증서 설정

• HTTPS를 사용하기 위해 SSL 인증서를 서버에 설정하는 작업이 필요

프록시 설정

• 서버가 프록시를 거쳐 다른 서버와 통신해야 할 경우, 프록시 설정을 추가

환경 변수 설정

• 보안이나 환경에 따라 설정이 필요한 경우, 배포된 애플리케이션에서 사용할 환경 변수를 설정

서버 배포

Vercel : 빌드, 배포, 도메인 관리 등을 자동으로 처리해 준다.

AWS Elasic Beanstalk : AWS에서 제공하는 Paas 서비스로, Node.js 애플리케이션을 배포할 수 있다.

Netilify : 정적 사이트를 배포하는 데 강점이 있다. Next.js의 정적 파일 처리에 유리하다.

Heroku : 간단한 배포와 확장이 가능한 PaaS로, Node.js 애플리케이션을 

---

Git을 사용한 지속적인 배포

수동 배포 외에도 지속적인 배포를 설정할 수도 있다. Git 리포지토리로 변경 사항을 푸시(push)할 때마다 애플리케이션이 자동으로 빌드되고 배포되는 것을 의미한다.

1. 배포 플랫폼을 Git 리포지토리에 연결
2. 배포 플랫폼을 구성하여 next build 및 npm run start 명령을 실행하도록 설정
3. 변경 사항을 Git 리포지토리에 푸시

---

Vercel을 통한 배포

1. 회원가입

2. 프로젝트 준비

3. Vercel CLI : 로컬에서 쉽게 프로젝트를 배포할 수 있다.

npm install -g vercel

 

4. Vercel로 로그인

vercel login

명령을 실행하면 브라우저가 열린다.

 

5. 프로젝트 배포

프로젝트의 루트 디렉토리에서 다음 명령을 실행

vercel

이 명령은 프로젝트를 배포하며, 배포가 완료되면 배포된 프로젝트의 URL을 제공한다.

 

6. 프로젝트 설정

최초 배포 시 몇 가지 설정을 선택한다.

• 프로젝트 이름
• 링크할 Git 저장소 선택
• 프레임워크 프리셋 선택 : Next.js를 자동으로 감지한다.
• 빌드 및 출력 설정 : 기본 설정을 사용할 수 있다.

7. GitHub 연동

저장소에 푸시할 때마다 자동으로 배포된다. 이를 위해 Vercel 프로젝트 대시보드에서 "Git Intergration"을 설정해야 한다.

---

참고 자료

https://wikidocs.net/197690

10) Next.js 애플리케이션 배포