무료로 Vercel 호스트에 React 앱을 배포하는 방법

Vercel은 최고의 개발자 경험과 최종 사용자 성능에 대한 강박적인 초점을 결합하여 프런트엔드 팀이 최상의 작업을 수행할 수 있도록 합니다.

이 게시물은 React App을 Vercel 호스트에 무료로 배포하는 방법을 설명합니다. 다른 무료 배포 옵션에 관심이 있을 수 있습니다.

# Vercel에 React 앱 배포

데모 사이트: https://xyz-vercel.vercel.app/

Github 저장소here

반응 앱 만들기

npx create-next-app project-name
cd project-name

yarn
yarn dev

Vercel 도구 CLI 설치

Vercel 명령줄 인터페이스는 즉각적인 클라우드 배포 및 로컬 개발을 가능하게 합니다.

npm i -g vercel

CLI를 사용하여 Vercel에 로그인

vercel login

이메일을 입력하라는 메시지가 표시되며 링크를 통해 확인 페이지로 리디렉션됩니다. 계속하려면 VERIFY 버튼을 클릭하십시오.



그런 다음 CLI에서 아래 결과를 볼 수 있습니다.

CLI에서 Vercel 프로젝트 설정

참고: Vercel 콘솔을 사용하여 프로젝트를 생성할 수도 있지만 CLI를 사용하는 것이 더 편리합니다.

아래 명령을 실행합니다.

cd project-name
vercel 

React App이 생성된 폴더로 cd가 필요합니다. 아래와 같이 지침을 따르십시오.

예를 확인합니다.

"y"를 입력하여 새 Vercel 프로젝트를 만듭니다.

프로젝트 ID를 입력합니다. "xyz-vercel", 코드가 있는 디렉토리를 선택합니다.

필요한 경우 기본 설정을 덮어씁니다.

필요한 경우 빌드 명령을 재정의할 수 있습니다

.

몇 초 후 앱이 Vercel에 배포되고 URL이 제공됩니다. https://xyz-vercel.vercel.app/


브라우저 창을 열고 다음 URL을 입력합니다. https://xyz-vercel.vercel.app/



이제 앱이 Vercel에 배포되었습니다! 행복한 코딩, 행복한 배포!