EP7. NextJS + Vercel 개발환경 설치
1. Vercel 회원가입
Github 계정을 통해 Vercel에 회원가입합니다.
2. create-next-app 설치
3. NextJS 프로젝트 생성
npx create-next-app
TypeScript
복사
위 명령어로 nextJS 프로젝트를 생성합니다. 여러 선택지들이 출력되는데 취향이나 목적에 따라 선택하시면 되고 강의에서는 모두 기본값으로 사용합니다.
프로젝트가 생성되면 프로젝트의 루트 디렉토리에서 아래 명령어로 로컬 배포합니다.
npx dex dev
TypeScript
복사
터미널에 표시된 http://localhost:3000에 접근하면 NextJS의 로컬 배포를 볼 수 있습니다.
4. Github 프로젝트 생성 및 연결
NextJS 프로젝트 코드관리 및 Vercel 배포를 위해 Github 레포지토리를 생성 후 NextJS 프로젝트를 Commit, Push 합니다.
5. Vercel 배포
Vercel의 `Add Project`에 들어가면 Github 프로젝트를 연동할 수 있습니다.
Github과 연동되어 Github의 레포지토리 목록이 표시되며 목록 중 NextJS 프로젝트를 선택합니다.
필요에 따라 환경변수, Build Output를 설정할 수 있습니다. 현재까지 강의 내용으로는 별도로 설정할 내용은 없으므로 바로 Deploy 버튼을 클릭합니다.
6. Public 접근 확인
배포가 완료되면 Vercel의 대시보드에서 프로젝트를 확인할 수 있습니다.
Vercel에서 제공하는 Domain을 통해 Public 환경에서 웹페이지에 접근 가능합니다.
앞으로는 Github Repository의 default branch 에 새로운 Commit이 Push 되면 Vercel 에서 자동 배포를 진행합니다.
끝.