Firebase 호스팅을 통해 React 앱을 배포하는 방법

웹 응용 프로그램을 완료한 후 다음 작업은 응용 프로그램을 전역적으로 볼 수 있도록 서버를 통해 호스트합니다. 현재 우리는 응용 프로그램을 호스팅하는 데 사용할 수 있는 많은 솔루션을 보유하고 있습니다. 그리고 Firebase에서 제공하는 서비스 덕분에 이전보다 일이 쉬워졌습니다.

이 기사에서는 Firebase를 통해 React 앱을 배포하는 방법에 대해 모두 알아봅니다.

Firebase란 무엇인가요?

Firebase는 Google에서 모바일 및 웹 애플리케이션을 만들기 위해 개발한 플랫폼입니다. 원래는 2011년에 설립된 독립 회사였습니다. 2014년에 Google이 플랫폼을 인수했으며 이제 앱 개발을 위한 주력 제품이 되었습니다. 호스팅 기능 외에도 Firebase는 인증, 실시간 데이터베이스 및 클라우드 기능 등과 같은 다른 서비스를 제공합니다.

React 앱 단계별 배포

1. Firebase 프로젝트 생성

해당Firebase official website으로 이동하여 Firebase 프로젝트를 만듭니다.

2. 호스팅 활성화

이제 빌드 드롭다운 아래 왼쪽 사이드바의 호스팅 섹션으로 이동하여 Firebase 호스팅을 활성화합니다.

3. 반응 앱 만들기

여기에서 Firebase 호스팅을 통해 배포할 React 앱을 만들 것입니다. 아래와 같이 평소처럼 앱을 만들 것입니다.

npx create-react-app firebase-hosting-app

위의 명령이 완전히 실행되면 추가 작업을 수행하기 위해 프로젝트 폴더로 이동합니다.

4. Firebase 도구 설치

npm install firebase-tools -g

5. Firebase에 로그인

Firebase 관련 작업을 수행하려면 터미널/콘솔을 통해 로그인해야 합니다. 아래 명령을 동일하게 사용합니다.

firebase login

6. 위에서 만든 React App에서 Firebase 초기화

아래 명령을 사용하여 Firebase를 React 앱으로 초기화합니다.

firebase init

위의 질문 후 Enter 키를 누르면 구성과 관련된 몇 가지 질문이 표시됩니다. 처음에는 현재 프로젝트에 사용하려는 서비스에 대해 묻습니다. 여기에서 호스팅을 선택하고 Enter 키를 누릅니다.



위의 내용을 확인한 후 하나 더 질문합니다. 이미 Firebase 프로젝트를 만들었으므로 기존 프로젝트 사용 옵션을 선택한 다음 표시된 목록에서 최근에 만든 프로젝트를 선택합니다.

이제 공개 디렉토리를 선택하라는 메시지가 표시되며 기본적으로 공개되지만 반응은 빌드 폴더에 빌드를 생성합니다. 그래서 아래와 같이 할 것입니다:

? What do you want to use as your public directory? build 

index.html을 덮어쓰고 GitHub 작업을 설정할지 여부에 대한 두 가지 질문이 더 있을 것입니다. 둘 다 아니요라고 답하십시오.

7: 빌드 생성 및 배포

Firebase를 통한 프로젝트 구성 작업이 완료되었으므로 다음 작업은 빌드를 생성하고 Firebase를 통해 배포하는 것입니다. create-react-app을 사용하여 앱을 만들었으므로 아래 명령을 사용하여 빌드를 만듭니다.

npm run build

아래 명령을 사용하여 Firebase에 배포합니다.

firebase deploy

이제 Firebase를 사용하여 React 앱을 무료로 호스팅할 수 있습니다. 앱이 배포되면 화면에 호스팅 링크가 표시됩니다.

자세한 내용은 아래 링크를 참조하십시오.

Firebase — https://firebase.google.com

Firebase 호스팅 문서 — https://firebase.google.com/docs/hosting

이메일[email protected]을 통해 귀하의 생각을 알려주십시오. 나는 그들의 말을 듣고 싶습니다. 이 기사가 마음에 들면 친구들과 공유하십시오.

읽어 주셔서 감사합니다!

이 글은 원래 jsonworld에 게시되었습니다.
Click here Firebase에서 더 많은 기사를 찾을 수 있습니다.