5️배포 환경 변경하기

배포 환경까지 변경해줘야 온전히 서비스가 운영됩니다. 배포 환경은 Vercel을 기준으로 설명합니다. 저마다 다른 플랫폼을 이용하고 있기 때문에 조금씩 차이가 있을 수 있지만 대략적인 원리는 동일합니다.

Step 1: 환경 변수 마이그레이션하기

우선 VITE_로 시작하는 환경 변수를 NEXT_PUBLIC_으로 시작하도록 변경합니다. 'Settings > Environment Variables' 메뉴에서 환경 변수를 변경할 수 있습니다. 사용하는 환경(Production, Preview, Development)에 따라 적절한 값을 부여합니다.

Step 2: 빌드 설정 변경하기

'Settings > General > Build & Development Settings' 메뉴에서 Framework Preset을 Next.js로 변경합니다.

• Build Command: npm run build or next build

• Output Directory: Next.js default (.next)

• Install Command: npm install

• Development Command: next

Step 3: 마이그레이션 브랜치에서 작업 결과 확인하기

메인 브랜치에 바로 코드를 합치면 일이 번거로워질 수 있습니다. 별도의 브랜치에서 작업을 하고 그 결과 문제가 없을 때 메인 브랜치로 합치는 게 코드 관리에 유리합니다.

로컬에서 작업한 브랜치를 푸시한 뒤 Vercel의 프로젝트로 이동합니다. Deployments 메뉴를 확인하면 마이그레이션에 사용된 브랜치가 보입니다. 특별한 설정이 없어도 자동으로 Preview를 생성합니다.

Step 1, 2를 진행하기 전에 이미 빌드를 시도해 빌드가 실패한 상태라면 우측의 메뉴를 열어 Redeploy를 클릭합니다.

테스트 후 정상적으로 동작한다면 main 브랜치로 머지합니다.