[Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (4) - Firebase로 프로젝트 배포하기

[Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (3) - Firestore를 사용하여 데이터 다루기

이전 글에 이어서 이번 글에서는 지금까지 만든 프로그램을 직접 배포하는 방법에 대해 다룬다.

 

우선, 콘솔에 들어가서 Hosting을 클릭한 후 시작하기를 누른다.

 

 

아래 명령어를 입력한다.

npm i -g firebase-tools
firebase login
firebase init

Are you ready to proceed? 에는 y를 입력한다. 그러면 아래와 같이 선택하는 창이 나온다.

 

 

우리는 배포를 진행할 것이므로 방향키를 이용해 Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys로 이동하여 스페이스바 - 엔터를 입력한다.

 

 

이미 만들어둔 프로젝트가 있으므로 Use an existing project를 선택한다. 이후에 나오는 질문들은 아래와 같이 입력한다.

 

 

이러면 생성이 끝나게 되고, 터미널에 아래 명령어를 입력한다.

npm run build

 

빌드가 완료되면 아래 명령어만 입력한다. 그럼 배포가 완료된다!

firebase deploy

 

 

배포 후에 새로고침 시 404 에러가 발생한다면?

배포하고 나서 새로고침을 할 때 아래 사진과 같은 에러가 발생하는 경우가 있다.

 

 

이 경우에는 firebase.json 파일에 아래 코드를 추가하면 된다.

"rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]

 

 

이러한 에러가 발생하는 이유가 궁금하다면 여기를 참고하면 된다! 

---

P.S. 배포 후에 수정할 사항이 생겨서 수정 후 재배포를 하고 싶다면?

수정 후에 다시 빌드하고 배포하면 된다!

// 수정 후
npm run build
firebase deploy

---

지금까지 4편의 글을 통해서 React와 Firebase를 사용하여 아주아주 간단한 프로젝트를 진행해봤다. 이 프로젝트에서 공부한 내용은 빙산의 일각이지만, 이를 통해서 Firebase와 조금이나마 친숙해지고 흥미를 갖게 되었다면 성공이라고 생각한다. 더 많은 내용들은 Firebase 공식 문서를 통해서 각자 습득하여 멋진 서비스를 만들어보길 바란다!