Firebase를 사용하여 React 애플리케이션을 호스팅하는 빠른 단계

네, 당신은 React 사이드 프로젝트를 끝마쳤고 그것이 실행되기를 기다릴 수 없습니다. 스트레스 받지 마세요. Firebase가 당신의 얼굴에 미소를 짓게 해줄 것입니다. 오 Firebase는 슈퍼맨이므로 자신을 알고 있습니다.

Firebase란?

한 번도 들어본 적이 없는 Firebase를 빠르게 소개하겠습니다.

Firebase is an app development platform that helps you build and grow apps and games users love. Backed by Google and trusted by millions of businesses around the world.

그러나 오늘 우리는 반응 애플리케이션을 배포하기 위한 단계별 가이드와 함께 Firebase 호스팅 서비스를 사용할 것입니다. 갑시다

Firebase 계정이 없는 경우 계정을 생성하거나 계정이 있는 경우 Firebase에 로그인합니다.
https://firebase.google.com/

홈 페이지의 오른쪽 상단 모서리에 있는 "콘솔로 이동"을 클릭합니다.

"프로젝트 추가"를 클릭하여 새 프로젝트를 추가하고 단계를 따릅니다

.

프로젝트 이름을 입력합니다.

프로젝트에 대해 Google Analytics를 켜고 활성화합니다.

Google Analytics 계정으로 "Default account for firebase"를 선택합니다.

"프로젝트 만들기"를 클릭합니다

.

명령을 사용하여 컴퓨터에 전역적으로 firebase 도구를 설치합니다.

npm install -g firebase-tools

참고: 시스템에 node.js가 설치되어 있어야 합니다.

이제 터미널에서 firebase에 로그인합니다. 이렇게 하려면 로그인 명령을 입력하기 전에 React 프로젝트의 루트 디렉토리 내에 있어야 합니다.

firebase login

로그인 명령 응답 "Firebase가 CLI 사용 및 오류 보고 정보를 수집하도록 허용"이 표시되면 YES를 입력합니다.

yes를 입력하면 Google 인증/로그인 페이지로 리디렉션된 다음 "허용"을 클릭하여 성공적으로 로그인합니다.

실행하지 않은 경우 응용 프로그램에서 react Build 명령을 실행하여 응용 프로그램의 빌드 버전을 호스팅하고 있는지 확인합니다.

npm run build 

이제 프로젝트에서 Firebase를 초기화하고 다음 질문에 답하십시오.

firebase init

계속할 준비가 되셨습니까? (예/아니오) 예

이 디렉토리에 어떤 Firebase 기능을 설정하시겠습니까?

옵션을 선택하려면

위쪽 및 아래쪽 화살표를 사용하여 탐색하십시오.

스페이스바를 눌러 기능 선택

그런 다음 Enter를 눌러 선택 사항을 확인합니다

.


선택한 옵션 > 호스팅: Firebase 호스팅용 파일을 구성하고 (선택 사항) GitHub 작업 배포를 설정합니다.

그런 다음 Firebase 콘솔에서 처음 생성된 프로젝트를 선택하기 위해 "기존 프로젝트 사용"을 선택합니다. 원하는 프로젝트 선택

다음 질문은 다음과 같습니다. 공개 디렉토리로 무엇을 사용하시겠습니까? (공개) 빌드

대답으로 "빌드"를 입력하십시오.

다음 질문은 단일 페이지 앱으로 구성하시겠습니까(모든 URL을/index.html로 다시 작성)? (예/아니요)
답변으로 "y"를 입력합니다

.

다음 질문은 GitHub를 사용하여 자동 빌드 및 배포를 설정하시겠습니까? (y/N)

대답으로 "N"을 입력하십시오.

다음 질문은 build/index.html 파일이 이미 존재한다는 것입니다. 덮어쓰시겠습니까?

대답으로 "N"을 입력하십시오.

배포 명령을 실행하여 firebase에서 애플리케이션을 호스팅합니다.

Firebase deploy 

와우 쉽고 빠릅니다.

읽어 주셔서 감사합니다. 이 문서를 개선하는 데 도움이 되는 의견을 남겨주세요.