Vercel로 React 배포하기

Vercel로 React 배포하기

1. Vercel

• Vercel로 React를 배포해 봅시다.
• 먼저 배포하기 전에, Vercel이 무엇일까요?
• Vercel이란? 웹 애플리케이션을 배포하고 호스팅하기 위한 클라우드 플랫폼입니다.
• 이 플랫폼은 개발자들이 프런트엔드 및 백엔드 애플리케이션을 쉽게 배포하고 관리할수 있도록 도와줍니다.
• Vercel은 정적 사이트, SPA(Single Page Application), 서버리스 함수, API 엔드포인트 등을 호스팅할 수 있는 기능을 제공합니다.

2. Vercel로 React 배포하기

• 그럼 이제 배포해 봅시다!
• #1.  vercel 사이트에 들어가서 회원가입 후, 오른쪽 상단의 Add new... → Project를 클릭해 줍니다.

 

• #2. GitHub가 연동되어 있다면, 내가 배포할 repository의 오른쪽에 있는 import 버튼을 클릭해 줍니다.

 

• 그러면 다음과 같은 화면이 나오게 됩니다.
  • ProjectName: 배포된 프로젝트의 이름을 지정합니다.
  • Framework Preset : 특정 프레임워크를 사용하는 프로젝트를 빠르게 설정하고 배포할 수 있도록 도와주는 기능을 합니다. 이 기능을 사용하면, 특정 프레임워크 or 템플릿에 최적화된 프로젝트 환경을 편하게 설정할 수 있습니다.
  • Root Directory : 파일 시스템에서 가장 상위에 위치하는 디렉토리 or 폴더를 가리킵니다.

 

• 밑으로 내리면, Build and Output Settings를 설정하는 란이 나옵니다.
  • 이 부분은 프로젝트를 빌드하고 배포할 때의 설정을 지정하는 부분입니다.
    • Build Command : 프로젝트를 빌드하기 위해 실행되는 커맨드를 지정합니다.
    • Output Directory : 빌드 결과물이 생성되는 위치를 지정합니다.
    • Development Command : 로컬 개발 환경에서 사용하는 명령어를 지정할 수 있습니다.

 

• Deploy 버튼을 누르면, 정상적으로 배포가 되었습니다!