Firebase란?
파이어베이스(Firebase)는 2011년 파이어베이스(Firebase, Inc)사가 개발하고 2014년 구글에 인수된 모바일 및 웹 애플리케이션 개발 플랫폼이다. (출처 : wikipedia)
BaaS(Backend as a Service, 백엔드 서비스)로 모바일이나 웹앱을 만들 때 필요한 백엔드(서버) 기능들을 제공해주는 플랫폼이다.
인프라 관리에 대한 리소스 투입을 최소화하고 메인이 되는 서비스 개발에 매진할 수 있도록 도와준다는 얘기.
덕분에 나같은 (풀스택 개발자를 꿈꾸는) Front-end 개발자들에게 큰 도움이 된다. 물론 장단점이 있겠지만 그 얘기는 여기서는 하지 않는 것으로…
게다가 데이터베이스, 사용자 인증, 호스팅, 에러 리포팅과 모니터링, 분석 등등 서로 연동될 수 있는 다양한 기능들을 하나의 콘솔에서 접근할 수 있다는 것도 엄청난 장점이다.
그동안 다른 기능들은 많이 사용해 봤는데 이번에 처음 사용해보는 호스팅에 대해 2회에 걸쳐서 사용법을 작성해보고자 한다.
1. Firebase CLI를 통해 react app deploy
2. CI tool을 통한 배포 자동화
이번 포스팅에서는 1번에 대한 내용에 대해 작성한다. 사실 이 내용은 firebase document에서 상세히 설명되어있기 때문에 어렵지 않게 할 수 있는데, 2번의 내용을 가기 위한 발판 정도로 가볍게 작성할 예정이다.
- Firebase Hosting document 링크 : https://firebase.google.com/docs/hosting
먼저 호스팅 설정을 위한 firebase-tool 설치와 배포를 위한 두 단계로 간단히 나누어져 있다. (정말 간단하다)
설치
npm install -g firebase-tools
배포
1.Google Login
firebase login
: 위 명령어를 치면 웹브라우져가 열리고 로그인 및 권한 동의를 진행하면 된다.
2.프로젝트 설정
firebase init
: 초기화 명령어를 입력하면 아래와 같이 화려한 FIREBASE 메시지와 함께 프로젝트 설정이 진행된다.
: Firebase Console에 생성된 프로젝트 중 사용할 프로젝트를 선택하고 나면, 사용하고자 하는 기능들을 설정하고, 해당 기능에 대한 Setup이 진행되는데 메시지를 읽으며 설정들을 확인해주면 된다.
(내가 설정한 기능) Firestore, Hosting
::Firestore setup : 권한/인증에 대한 파일과 색인(index)에 관한 파일을 다운로드 받는다. Enter만 쳐도 문제없이 진행된다.
::Hosting : public directory로 설정할 디렉토리 명을 입력하고(default : public), SPA(Single-Page Application)인지 여부를 설정해주면 된다. (다시 진행하니 SPA 설정은 안나와서 뭐가 먼저 나왔는지는 기억이 나질 않는다.)
3.빌드&배포
npm run build
firebase deploy
: 다음으로 프로젝트를 빌드해주고, 대망의 firebase deploy 명령어를 입력해주면 설정한 기능에 따라 Rule check를 진행하고 file upload와 release를 거쳐 Deploy Complete!라는 경쾌한 메시지를 확인할 수 있다.
이제 console에 출력된 url(https://[project-name].firebaseapp.com)을 통해 더이상 localhost가 아닌 배포된 나의 웹앱을 확인할 수 있다!!!
Firebase Hosting Console
Firebase Console에 접속하여 Hosting 기능을 확인하면 위와 같은 console 화면을 확인할 수 있다.
Hosting Console에서는 출시 내역 및 사용량 확인과 간단하게 원클릭으로 가능한 롤백, 도메인 연결에 대한 기능들을 확인할 수 있다.
p.s. 일단 개발 중이던거 다 완료해서 메인 프로젝트 배포한 이후에 Git과 연동하여 배포 자동화 하는 방법에 대해 알아보고 다음 포스팅에 작성할 예정이다.