Typescript + Firebase 환경 설정

Firebase는 Google에서 개발한 클라우드 기반 애플리케이션 개발 플랫폼이다. 애플리케이션 기능 개발에만 집중할 수 있도록 백엔드의 부가적인 부분을 처리해준다.

 

AWS와 같은 클라우드 서비스는 유연하지만, 사용량이 적어도 과금이 발생할 수 있는 위험이 있다. Firebase는 초기 단계의 프로젝트나 유저풀이 적은 경우에 적합하다.  Firebase는 무료로 시작할 수 있고, 유료 전환도 사용량에 따라 유연하게 조정할 수 있어 초기 리스크를 최소화할 수 있다. 이러한 이유로 Firebase를 사용하게 되었다. 현재 제공하고 있는 Firebase의 기능들은 다음과 같다.

 

이 중에서 Cloud Functions, Cloud Firestore, Hosting 세 가지를 사용한다.

 

1. Cloud Functions

서버리스 환경에서 백엔드 코드를 작성하고 실행할 수 있게 해주는 서비스이다. 이벤트가 발생할 때마다 자동으로 실행되며 사용량에 따라 확장된다.

 

2. Hosting

웹 애플리케이션과 정적 콘텐츠(HTML, CSS, JavaScript) 등을 빠르게 배포할 수 있는 서비스이다. 자동으로 SSL 인증서를 제공하여 HTTPS 연결을 해주며, 사용자 정의 도메인 설정을 지원한다.

 

3. Cloud Firestore

클라우드 기반 NoSQL 데이터베이스로, 문서(Document)와 컬렉션(Collection) 구조를 가지고 있다. 각 문서는 JSON 형태로 저장된다.

 

---

 

1. 프로젝트 생성

Firebase 콘솔에서 프로젝트를 생성한 후, Blaze 요금제 이상의 요금제로 변경해야 한다.

 

2. Cloud Firestore 등록

 

프로덕션 모드로 설정한 후, DB를 쓰고 읽을 수 있게 규칙을 수정해준다.

 

3. Firebase 앱 등록

 

앱 등록을 마친 후 2가지를 설치해줘야 Firebase 사용이 가능하다.

 

4. Firebase SDK, CLI 설치

 

5. Firebase 로그인

? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? Yes

 

6. Firebase 설정

firebase init

 

현재 프로젝트에 설정할 Firebase 기능을 고른다. 앞서 말했던 Cloud Functions, Cloud Storage, Hosting를 선택해주었다.

 

** Firestore vs Storage

Cloud Firestore는 Firebase의 NoSQL 데이터베이스를 가리키고, Cloud Storage는 대용량 파일을 저장하고 관리하는 데 사용된다. 즉, AWS에 비교하면 다음과 같다.

• Cloud Firestore ↔ Amazon DynamoDB
• Cloud Storage ↔ Amazon S3

++ 데이터베이스 생성할 때 default를 만들어두지 않으면 Firestore 설정에서 Error가 발생한다.

 

** Firebase Emulator

로컬 환경에서 Firebase 서비스들을 실행할 수 있게 해주는 도구이다. Firebase를 배포하는데는 오랜 시간이 걸리기 때문에 클라우드 배포 전 테스트 용도로 사용한다.

 

작업을 진행할 프로젝트를 선택하는 과정으로, 앞서 생성해둔 프로젝트를 선택한다.

 

언어 설정과 ESLint 설정을 진행한다.

 

Firebase Hosting 설정을 진행한다. 두 번째 질문의 경우, 웹 애플리케이션이 싱글 페이지 애플리케이션(SPA)인지 여부를 묻는다. 리액트와 같은 일반적인 경우에는 'Y'를 선택하면 되고, next.js 와 같은 경우만 'N'를 선택해주면 된다.

 

Firebase 설정이 완료되었다.