[Next.js] Vercel로 프론트 배포하기

문지은·2023년 12월 1일
0

Next.js - App Router

목록 보기
16/20
post-thumbnail

Vercel

  • Next.js 애플리케이션은 다양한 플랫폼에 배포할 수 있으며, 가장 간단한 방법은 Next.js 개발사인 Vercel을 사용하는 것이다.
  • Vercel의 가장 큰 장점은 기본적으로 HTTPS와 CDN이 적용된 상태로 배포된다는 점이며, git repository에 연결하면 변경된 코드를 메인 브랜치에 병합 시 코드를 빌드 후 배포해주기 때문에 CI/CD 자동화에 대한 환경을 고려하지 않아도 된다.
  • 플랫폼을 비상업적 용도로 사용할 경우, 무료로 사용할 수 있기 때문에 웹 포트폴리오를 Next.js로 만들어서 배포해보기로 하였다.
  • 물론, 무료 요금제에는 몇가지 제약사항이 존재한다. (자세한 내용은 홈페이지 참고)
    • 하루 최대 100회 배포
    • 월간 사용가능한 대역폭(Bandwidth) 최대 100GB
    • 프로젝트 당 도매인 50개 제한

Vercel로 Next.js 배포하기

  • 먼저 Vercel에 회원가입하고 로그인 한다. 나는 프로젝트 파일을 Github로 관리하고 있기 때문에, Github 계정으로 회원가입을 하였다.

  • 프로젝트 package.json 파일에 deploy script 추가
"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "vercel-deploy": "next build && next export" // 추가
  },
  • GitHub 에 새로운 Repository를 만들고 commit & push
  • Vercel에 새로운 프로젝트 생성

  • 배포하고자 하는 프로젝트 Import

  • 필요한 정보 입력후 Deploy
    • 환경변수를 사용할 경우 반드시 입력이 필요함.

  • 배포 확인

도메인 변경하기

  • 프로젝트 세부 페이지에서 Settings 클릭

  • 좌측 메뉴 중 Domains 클릭 → Domains Edit

  • Domain 변경 후 저장

References

[Next JS] 배포 방법 3가지 소개
[Next.js] Vercel로 프론트 배포하기 (도메인 변경)

profile
코드로 꿈을 펼치는 개발자의 이야기, 노력과 열정이 가득한 곳 🌈

0개의 댓글