[Firebase] 배포 / deploy 실패, 빌드하는 방법 해결, 빈 화면, 흰 화면

2021.04.23 - [BackEnd/Firebase] - [Firebase 공식문서 참고] Firebase 시작하기, firebase init 분석

웹 제작을 하며 서버 연결, 회원가입, 인증 보안 등의 문제로

겉핥기식으로 하던 Firebase를 상세하게 파헤쳐 보려 한다.

 

나와 같이 프로젝트 형식으로 Firebase를 이용하는 사람이나,

Firebase를 깊은 곳까지 궁금해하는 사람들에게 도움이 되었으면 좋겠다.

 

---

Visual Studio Code, React, Node.js, window os를 기본으로 작성되었습니다. 
리액트 패키지를 설치하고 난 후 정리 글입니다.

2021.04.23 - [BackEnd/Firebase] - [Firebase 공식문서 참고] Firebase 시작하기, firebase init 분석

[Firebase 공식문서 참고] Firebase시작하기, firebase init 분석

 

앞서 설명한 글을 참고하여 배포를 하려고 하는 중 오류에 마주하였다.

오늘의 포스팅은 firebase deploy 실패 해결 방법에 대해 작성해 보겠다.

 

 

firebase init까지 했다고 가정하에 글을 작성한다.

 

---

 

 

1. 파이어 베이스 배포하는 방법

 

터미널에 firebase deploy를 입력하면 된다.

-> vsc(Visual Studio Code)에서 터미널을 연다.

-> firebase명령어인 firebase deploy 입력

-> 콘솔 확인

 

이렇게 나오면 성공

-> Hosting URL로 접속하면 된다.

---

 

배포 후 오류

 

배포 후 URL에 접속하였는데 아무것도 로딩되지 않은 빈 화면만 볼 수 있었다.

그래서 아래는 나의 오류 찾는 방법과 해결법에 대한 글이다.

 

 

index.html에 아무것도 보이지 않는다.

- <div id="root"></div> 를 읽어야 하는데 읽고 불러오질 못해서 빈 화면만 출력한다(추측)

 

 

index.html에 아무 글이나 넣어본다.

- index.html에 넣는 글들이 출력됨을 확인

 

  -> 출력된다는 것은  js를 못 읽고 html만 읽으므로

 <div id="root"></div> 가 있는 index.html <-> index.js가 서로 연결 x  (추측)

 

 

 

검색 결과: firebase build를 해야 함 ->  yarn build,    npm run build

-> firebase deploy 전에 firebase build가 되어야 하는데 build가 되지 않아서 생긴 문제였음

-> 명령어 입력 

-> 폴더 내 생성된 build 파일 확인

-> 압축된 build 파일 

 

 

 

 

 

끝!

여기까지 따라오느라 수고 많았다. 

처음에 파이어 베이스를 쓰려고 문서를 보면서 작업했는데 

한 번 정리를 해보았다. 

부족한 내용이 있다면 댓글로 알려주길 바란다. 

 

다음 포스팅도 파이어 베이스에 관한 글이니 많은 참고 바랍니다ㅇㅅㅇ~