[NextJS] 프로젝트 초기화 및 Vercel 배포

Vercel: Build and deploy the best web experiences with the AI Cloud – Vercel

 

개인 포트폴리오 페이지를 만들 필요성을 느껴서 웹 사이트 배포 서비스를 찾아보다가 Vercel이라는 서비스를 알게 되었다. 그 유명한 Next.js를 개발한 회사라고 한다! 컴퓨터 인스턴스를 제공하는 AWS와는 다르게 static 사이트와 서버리스 Function을 제공하며, 심지어 Deploy만 하면 CI/CD부터 운영까지 Vercel에서 알아서 다 해주고, 무엇보다 비상업적 용도로는 무료라고 한다! 🤑

 

기존에 사용하던 React + Vite 조합도 Vercel을 통해 배포가 가능하지만, 아무래도 자사 프레임워크인 Next.js와의 호환성이 제일 좋기 때문에 Next.js를 사용해 포트폴리오 사이트를 개발하기로 했다.

프로젝트 초기화

npx create-next-app@latest

해야 할 것은 간단하다: 프로젝트 이름 잘 정하기, 엔터키 누르기. 나머지는 알아서 자동으로 설치된다! 실행하는 방법은 React와 똑같다.

npm run dev

 

기본 Next.js 웹사이트 화면

Vercel에 Deploy하기

• Github 레포지토리에 생성한 프로젝트 폴더를 업로드한다.
• Vercel에 회원가입을 하고, Import Project를 클릭한다.

• Import Git Repository → Add Github Account → Install Vercel 팝업창 열림 → Only select repositories → 위에서 생성한 레포지토리 선택 → Install
• 팝업창을 닫고 아까 선택한 레포지토리의 Import 버튼 클릭 → Deploy (아마 설정을 바꿀 필요는 없다) → 30초 가량 대기 후 배포가 완료된다.

• 대시보드에서 도메인을 확인할 수 있다. 기본적으로 3개가 주어지고 커스텀 도메인을 가지고 있다면 연결할 수 있는 것으로 보인다.

크래프톤 정글 입학시험을 준비할 때 AWS EC2 인스턴스 생성하고 Filezilla로 업로드하고 ssh 로그인해서 ubuntu에서 또 서버를 열어야 했던거와 비교하면 너무나 편하고 쉽다! 그러고 보니까 8기 수료 후기도 작성해야 하는데...😴