클라우드 컴퓨팅의 부상으로 Heroku, AWS, Azure 등과 같은 서비스에서 웹 앱을 호스팅하는 것이 증가하고 있습니다. 이러한 모든 옵션 중에서 Firebase는 서버리스 웹 앱을 호스팅하는 훌륭한 솔루션으로 부상했습니다. 쉽고, 빠르고, 무료입니다!

시작하기

이 튜토리얼에서는 Firebase에 React 앱을 배포하는 것과 관련된 모든 단계를 안내합니다.

전제 조건:

Firebase 프로젝트가 설정되었습니다. 없는 경우 Firebase 콘솔을 사용하여 만드세요.

배포하려는 React 앱 설정.
Firebase 구성 Firebase CLI 설치 Firebase 호스팅으로 사이트를 호스팅하려면 Firebase 명령줄이 필요합니다.
도구(CLI). 다음 npm 명령을 실행하여 전역적으로 시스템에 CLI를 설치합니다.

$ npm install -g firebase-tools

Firebase에 로그인

React 앱의 루트 디렉터리에 있는지 확인하고 다음 명령어를 실행하여 터미널에서 Firebase에 로그인합니다.

$ firebase login

로그인하지 않은 경우 Google 계정의 자격 증명을 입력하라는 메시지가 표시됩니다. 프로젝트 시작 이제 Firebase CLI를 구성했으므로 반응 앱에서 Firebase를 초기화할 차례입니다. 다음 명령을 실행합니다.

$ firebase init

이제 Firebase 도구 셸에 들어가면 일련의 질문과 다양한 구성 옵션이 표시됩니다. 원하는 구성을 달성하기 위해 이러한 질문을 단계별로 함께 살펴보겠습니다.

선택 - 호스팅: Firebase 호스팅 사이트를 구성하고 배포합니다.

선택 - 기존 프로젝트 사용

생성한 Firebase 프로젝트를 선택합니다(예: mycase의 demo-tutorial-project).

프로젝트의 공개 디렉토리로 사용할 이전 섹션에서 생성한 빌드를 지정합니다.

Firebase 앱을 단일 페이지 앱으로 구성해야 하는지 여부를 선택합니다. 제 경우에는 YES를 선택하겠습니다.

이전 섹션에서 빌드 디렉토리를 이미 만들었으므로 build/index.html이 이미 존재합니다. 그대로 두고 이 질문에 No를 입력합니다.

이것으로 구성 프로세스가 끝났고 이제 앱을 배포할 준비가 되었습니다!

초기화 프로세스가 성공적으로 완료되었는지 확인하려면 .firebaserc 및 firebase.json 파일이 있는지 확인하기만 하면 됩니다. 초기화 프로세스 중에 firebase에 의해 자동으로 생성됩니다.

다음 명령어를 실행하여 앱의 프로덕션 빌드로 빌드 디렉터리를 만듭니다.

$ npm run build

build/static 디렉토리 안에는 JavaScript 및 CSS 파일이 있습니다. React 프로덕션 빌드에 대한 자세한 내용은 create-react-app 문서의 프로덕션 빌드 섹션을 참조하세요.

Firebase에 배포

다음 명령을 실행하여 앱을 배포하십시오.

$ firebase deploy

이제 Firebase가 배포 프로세스를 실행하고 앱이 배포되는 고유한 URL을 제공합니다. 예를 들어 제 경우에는 - https://yourapp.web.app/ 이었습니다.
그래! 이제 ReactApp이 Firebase 호스팅과 함께 배포되었습니다.