[구글 파이어베이스 호스팅(Firebase Hosting)] 프론트엔드 리액트 프로젝트 배포하기

백엔드 스프링 부트 프로젝트 배포에 성공한 나는 프론트엔드 리액트 파일 또한 배포하기로 했다.

내 프로젝트에서 대부분의 기능이 Axios를 활용한 클라이언트 -> 서버 / 요청-응답 구조였기 때문에 리액트 배포 역시 필연적이었고, 이번에는 NCP가 아닌 다른 호스팅 서비스를 이용해보기로 했다.

 

정적 웹사이트를 무료로 배포할 수 있는 서비스는 꽤 많이 있다.

Netlify , Heroku , Vercel , Github Pages 등의 사이트들이 Javasript , React.js 프로젝트를 무료로 배포할 수 있게 서비스하고 있다. (Heroku는 무료 지원이 거의 사라졌다고 한다.)

 

다만 나는 어떤 이유에서인지 배포과정에서 갖가지 오류가 발생하여 애를 먹었는데, 

구글 파이어베이스의 호스팅 서비스로 배포하니 오류 없이 정상적인 배포가 가능했고, Ubuntu로 배포한 백엔드 프로젝트와도 axios 연결이 원활했다. 이제 구글 파이어베이스 호스팅 배포 과정을 기록해보려 한다.

 

 

---

1. 구글 파이어베이스 프로젝트 생성

링크를 통해 사이트에 접속한 후 프로젝트를 하나 만들어주자.

 

적절한 프로젝트 이름을 정한 후 기본 설정 그대로 프로젝트를 생성해주면 된다.

 

 

2. 리액트 코드 Build 후 Firebase 연동

프로젝트를 생성했다면, 배포하고싶은 리액트 코드를 build 해줘야 한다.

프로젝트의 환경에 맞춰 build를 진행해야 하는데 나는 yarn으로 개발을 진행했으므로 yarn run build를 입력해주었다. 

$ yarn run build
* 오류 시 yarn build

만약 build 과정 중 오류가 발생했다면 yarn update / yarn upgrade를 먼저 실행한 후 다시 build를 시도해보자.

조금 기다려주면 build가 완료되고 디렉토리에 폴더가 하나 생겼을 것이다.

 

 

이 폴더안에 프로젝트를 build한 소스 파일들이 들어있고, Firebase에서 이 파일들로 배포를 진행하게 된다.

 

이제 디렉토리에서 터미널을 실행해 firebase init으로 Firebase와 연동해준다.

$ firebase init

Y를 입력해 연동을 진행해주자.

 

원하는 서비스를 선택하라고 하는데, Hosting 서비스로 배포할 예정이니 Hosting 설정을 Space Bar로 선택 후 Enter 해준다.

 

배포할 Firebase Project를 선택해야 하는데 처음에 생성했던 프로젝트를 사용하면 되므로

Use an existing project 선택 후 진행

 

1. 배포할 디렉토리 폴더명을 입력해줘야 한다. 아까 build한 소스 파일이 저장된 build 폴더를 입력.

2. React.js는 SPA 특징을 갖고있으므로 y를 입력한다. 사실 이건 프로젝트의 구조에 맞춰 유동적으로 선택하면 된다.

 

 

$ firebase serve

이제 firebase serve 명령어를 입력하면 로컬 서버에서 테스트할 수 있게 url이 나오는데, 이걸 접속해서 내 리액트 프로젝트 페이지가 호출되면 배포 준비가 끝난 것이다. 정상적으로 확인이 되었다면 이제 배포 명령어를 입력하면 된다.

 

 

3. Firebase 배포 확인

 

$ firebase deploy

명령어 입력 후 위와 같이 Deploy complete! 라고 나오면 배포가 완료된 것이다.

Hosting URL을 주소 창에 입력해 접속하면 내 리액트 프로젝트 페이지가 보여질 것이다.

 

 

*만약 내 웹사이트가 나오지 않는다면 프로젝트의 package.json에 아래와 같이 homepage 항목에 Hosting URL을 추가한 후 다시 확인해보자. (다시 build 후 재배포하는 것도 방법이다.)

 

 

프로젝트 코드를 수정해야 하는 상황이라면 수정 후 다시 firebase deploy 명령어로 재배포해주면 변경 사항이 반영된다.

여러모로 간단하고 쉽게 배포할 수 있고, 역시 무료라는게 큰 메리트가 아닐까 싶다.

 

---

 

이제 이 URL을 활용하여 따로 도메인을 구매할 필요없이 웹사이트를 구축할 수 있고, 나는 이전 포스트에서 배포한 스프링부트와 연동하여 풀스택 서비스를 구현할 수 있었다.

 

물론 이를 위해서는 CORS 문제를 해결해야 하므로 프론트엔드 - 백엔드 양 쪽 설정을 모두 조정해 줄 필요가 있고,

중요한 점은 Firebase에서 Hosting 하는 URL은 HTTPS 프로토콜을 사용한다. 만약 백엔드 url의 프로토콜이 HTTP 라면 

CORS 정책 위반에 의해 무수한 오류가 발생할 수 있으니 프로젝트 구조에 맞게 설정을 수정해 줄 필요가 있다.

 

이렇게 구글 파이어베이스 호스팅 서비스로 프론트엔드 리액트 프로젝트를 배포해보았다.