[Vercel] NextJS + Github 정적페이지 배포

Vercel이란

• FaaS 플랫폼
• Next.js 팀에서 만든 Hosting 사이트 -> Next.js 기능 사용가능
• 하루 당 빌드 개수는 100개까지 가능
• AWS 및 GCP 플랫폼을 기반으로 동작
• 무료버전 / 유료버전(사용자당 월 $20)
• 프론트엔드에 집중, 프리뷰, 엣지 기능 및프런트엔드 인프라
• Netlify에 비교한 Vercel의 장점 : CDN이 서울에 있음
• Github와 연동되어 수정사항을 push하면 자동으로 build -> deploy 해준다.

비교 플랫폼 Heroku

• PaaS 플랫폼 중 하나
• 오토 스케일링 가능
• 다양한 언어로 구동 가능
• AWS 기반
• 백엔드에 집중, 컨테이너 배포, 데이터베이스 및 확장

Vercel을 이용한 정적페이지 배포 방법

• Vercel 사이트 : https://vercel.com/
• 참고사이트
  • https://www.wsgvet.com/staticsite/12
  • https://www.wsgvet.com/staticsite/1
  • 배포 플랫폼 비교 [https://www.taeny.dev/javascript/nextjs-with-deployment-platform]
• Vercel 템플릿
  • https://vercel.com/new/templates

Vercel 가입

• https://vercel.com/signup

Node 설치

• https://nodejs.org/en/download
• yarn 설치
  • npm install --global yarn

프로젝트 생성

• nextjs 프로젝트 생성
  • npx create-next-app@latest
• Github Repository로 push
• Vercel에서 확인
  • vercel.com/new
  • git과 연동 후 import 버튼을 누르면 설정화면으로 이동한다.
• 설정 및 배포 
  • 특별한 설정 없이 deploy
  • https://vercel.com/dashboard 로 접속하면 deploy된 프로젝트를 볼 수 있다.

• 업데이트 후 확인
  • pages/index.tsx 수정

• 업데이트 후 psuh 하면 vercel에서 자동으로 build → deploy해준다.
• 프로젝트 재접속

자동 배포된 화면

쿠팡으로 연결 클릭

제주삼다수 그린 무라벨

파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음