[React] 리액트(React)로 파이어베이스(Firebase) 배포(Deploy)하는 방법!!!

리액트 앱을 firebase를 통해 웹 호스팅으로 Deploy하려고 한다.

1. 첫 번째 단계. Firebase CLI 설치

가장 먼저해야 할 일은 모든 디렉토리에서 Firebase에 액세스 할 수 있도록 

Firebase CLI를 전체적으로 설치하는 것. 

아... 그 전에, node.js와 npm이 정상적으로 설치되어 있는지를 확인을 먼저한다.

확인했다면, 터미널 또는 명령 프롬프트를 열고 다음 명령을 실행하자.

npm install -g firebase-tools

이러면 global로 firebase-tools이 설치될 것이다.

2. 두 번째 단계. Firebase 초기화

프로젝트의 루트 폴더에 있는지 확인한 뒤에 아래 명령을 실행하자

firebase init

이렇게하면 초기화가 된다.




그런데, 에러가 발생할 경우도 있다.







firebase 로그인은 어떻게 하는걸까? 아! firebase는 구글것이다.

해결책은 다음과 같다.

 

firebase login --interactive

쉽게 말하면 구글에 로그인 후 파이어베이스 연동 여부를 허용해주어야 한다는 것이다.

이렇게하면 자동으로 구글 계정 로그인 브라우저가 뜬다.

이 때 구글 계정으로 로그인을 해주고 연동 체크를 해주면 

성공!!

다시 한번 firebase init 명령어를 입력하면, 다음과 같은 멋진 화면이 나온다.

키보드 방향키를 밑으로 내리면

> 도 따라 움직인다.

 Hosting으로 이동 후 Space를 눌러 호스팅을 선택한다.

그러면 이것 저것 물어보는데, directory를 build로,

나머지는 알아서...No Yes를 했다.

성공하면. . .

✔  Firebase initialization complete!

이 나오면 성공! 

3. 세 번째 단계. yarn build

다시 터미널로 돌아와서,

yarn build를 입력하면(만약 설치가 안 되었다면, npm install yarn 먼저 진행한다.)

프로젝트에 build 폴더가 생성된다. 이 폴더를 앱 배포하는데 사용한다. 

4. 네 번째 단계. Firebase 배포

$ firebase deploy

를 입력해서 파이어베이스와의 연결을 완료한다.

---

배포 후 업데이트 하는 방법

이후에 리액트 작업한 후 수정된 코드를 다시 배포 즉, 업데이트를 하고 싶다면 순서는 다음과 같다.

0. 먼저, firebase init는 할 필요없다.

1. yarn build

2. firebase deploy 

두 단계 순서로 진행해야 한다.

yarn build를 안 하면, build 폴더가 업데이트가 되지 않기 때문에 배포를 해도 변경되지 않는다.

자세한 영상자료는 아래 링크에 있으니 따라해보자.

https://www.youtube.com/watch?v=jFtdF_ECA10&t=286s

또 한가지. 추가하자면,

한번 구글 로그인으로 성공이 되서 배포를 했다면, 추후에는 무조건 그 메일만 사용이 가능하다.

다른 이메일로 로그인하면 에러가 발생한다. 무조건 최초 등록한 이메일로 접근이 가능하다.

firebase login --reauth

이 명령어를 통해 구글에서 첫 이메일을 로그인해주어야 배포가 진행된다.

✔  Success! Logged in as xxxx@gmail.com

lui-iMac:stock$ firebase deploy

=== Deploying to 'test-8bttd4'...

i  deploying hosting

i  hosting: preparing build directory for upload...

✔  hosting: 9 files uploaded successfully

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/xxxxxx.xxx

Hosting URL: https://xxxxxxxxx.firebaseapp.com

성공.

Hosting URL을 브라우저에 입력 후, 접속하면