[Next.js14 강의] 24강 - Next.js 애플리케이션을 Vercel에 배포하기

안녕하세요! 그레이해커 월횽입니다. 이번 강의에서는 Next.js 애플리케이션을 Vercel에 직접 배포하는 방법을 알아봅니다. GitHub와 연동하여 손쉽게 애플리케이션을 배포하고, 실시간으로 업데이트하는 과정을 다룹니다. 또한 Vercel에서 제공하는 기본 배포 기능들을 사용하여 애플리케이션을 관리하는 방법을 배웁니다.

 

 

1. Vercel 계정 생성 및 GitHub 연동

 

1-1. Vercel 계정 생성

· Vercel에 접속합니다.
· 상단의 Sign Up 버튼을 클릭하여 GitHub, GitLab 또는 이메일로 Vercel 계정을 생성합니다.
· 로그인 후 Vercel 대시보드로 이동합니다.

반응형

1-2. GitHub 계정 연동

· Vercel 대시보드에서 New Project 버튼을 클릭합니다.
· GitHub 계정 연동을 선택하여 GitHub 리포지토리에 접근할 수 있도록 권한을 부여합니다.
· 리포지토리에서 Next.js 프로젝트를 선택하여 배포를 시작합니다.

 

 

2. Next.js 프로젝트 배포하기

 

2-1. GitHub에 프로젝트 푸시

배포하려는 Next.js 프로젝트가 아직 GitHub에 푸시되지 않았다면, 먼저 프로젝트를 로컬에서 GitHub 리포지토리로 푸시해야 합니다.

· 로컬에서 GitHub 리포지토리를 초기화하고 푸시합니다.

git init
git add .
git commit -m "Initial commit"
git remote add origin <YOUR_GITHUB_REPO_URL>
git push -u origin main

 

· Vercel 대시보드에서 GitHub 리포지토리를 선택하고 배포를 시작합니다.

728x90

2-2. Vercel에서 자동 배포

· GitHub 리포지토리를 선택한 후, Vercel이 자동으로 Next.js 애플리케이션을 빌드하고 배포합니다.
· 배포가 완료되면 Vercel이 제공하는 기본 URL을 통해 애플리케이션에 접근할 수 있습니다.
예시: https://<your-project-name>.vercel.app

 

 

3. Vercel 배포 설정

 

3-1. 프로젝트 설정

· Vercel 대시보드에서 프로젝트를 선택하여 다양한 설정을 관리할 수 있습니다.
· 빌드 및 배포 설정, 환경 변수 관리, 도메인 연결 등의 작업을 설정할 수 있습니다.

 

3-2. 환경 변수 설정

SMALL

· 애플리케이션에서 필요한 API 키나 비밀 정보를 설정해야 하는 경우, Vercel 대시보드에서 환경 변수를 추가할 수 있습니다.
· PROJECT > Settings > Environment Variables 메뉴에서 환경 변수를 추가하고, 빌드 시 이를 사용할 수 있습니다.

 

3-3. 커스텀 도메인 연결

· 무료 기본 도메인 외에도 사용자 정의 도메인을 Vercel에 연결할 수 있습니다.
· Settings > Domains에서 도메인을 추가하고 DNS 설정을 업데이트하여 도메인을 연결합니다.

 

 

4. GitHub 연동을 통한 자동 배포

 

4-1. 자동 배포 설정

· GitHub와 연동된 프로젝트는 main 또는 master 브랜치에 푸시될 때마다 Vercel이 자동으로 빌드하고 배포합니다.
· 코드 푸시만으로도 Vercel이 자동으로 최신 상태의 애플리케이션을 업데이트해줍니다.

4-2. 브랜치별 배포 관리

· Vercel은 GitHub의 브랜치 별로 배포 환경을 설정할 수 있습니다.
· 예를 들어, main 브랜치는 프로덕션에 배포되고, development 브랜치는 프리뷰 환경에 배포되는 방식으로 설정할 수 있습니다.

 

 

5. 배포 상태 모니터링 및 관리

 

5-1. 배포 상태 확인

· Vercel 대시보드에서 배포 상태를 실시간으로 확인할 수 있습니다. 빌드가 완료된 후 성공 여부와 로그를 확인하여 문제를 파악할 수 있습니다.

 

5-2. 빌드 로그 확인

· 빌드 중 발생한 오류나 경고 메시지를 Vercel 대시보드의 Logs 탭에서 확인할 수 있습니다. 문제가 발생하면 로그를 통해 빠르게 원인을 파악하고 수정할 수 있습니다.

 

5-3. 롤백 기능

· 배포된 애플리케이션에 문제가 발생한 경우, Vercel은 이전 배포 버전으로 롤백(되돌리기) 기능을 제공합니다. 과거의 안정적인 버전으로 빠르게 되돌릴 수 있습니다.

 

6. Vercel 배포 후 성능 최적화

· 빌드 성능 최적화: Vercel은 빌드 시간을 줄이기 위한 다양한 최적화 기법을 제공합니다. 예를 들어, 정적 페이지 생성(SSG)을 통해 빌드 시간을 최적화할 수 있습니다.
· CDN(Content Delivery Network) 활용: Vercel은 전 세계적으로 분산된 CDN을 통해 애플리케이션을 배포하므로, 사용자들이 어디서든 빠르게 페이지를 로드할 수 있습니다.

 

이번 강의에서는 Next.js 애플리케이션을 Vercel에 배포하는 과정을 배웠습니다. Vercel은 Next.js와 긴밀하게 통합되어 있어 GitHub 연동을 통해 손쉽게 배포할 수 있으며, 자동 배포와 커스텀 도메인 관리, 환경 변수 설정 등 다양한 기능을 제공합니다. 이를 통해 빠르고 안정적인 배포 프로세스를 구축할 수 있습니다.

 

 

 

 

 

- 이전 수업 목록