ETC. Firebase와 Firebase Hosting하기

Firebase

• Firebae는 모바일 앱, Web 앱을 개발하기 위한 통합 Backend 플랫폼
• Push, Analytics, Storage, Auth, Hosting 등의 가양한 기능 제공
• SDK 및 API 사용에 관한 전반적인 문서화가 잘되어 있고 한글 번역 품질 우수
• HTTPS로 호스팅을 제공

Firebase SDK 설치 및 프로젝트 구성

1. Firebase Console 접속 후 Gmail 로그인
2. Firebase 프로젝트 생성
3. 웹 앱에 Firebase 추가
4. 생성된 script 코드를 HTML 하단에 복사 붙여넣기
5. 페이지 로딩 후 Firebae Log 출력 및 로딩여부 확인

Firebase Features

• Realtime DB: 데이터 조작에 관한 직관적인 API 제공, Firebase Storage와 연동 가능
• Storage: 이미지, 동영상 등 대용량 파일을 저장할 수 있는 공간
• Firebase Cloud Messaging: 기존 GCM 서비스에 Web 까지 커버하는 통합 푸시 메시지 서비스
• Authentication: Auth, SNS 연동 등의 인증 서비스 제공
• Hosting: Firebase에서 제공하는 무료 호스팅

Firebase Hosting

1. Firebase CLI 설치

$ npm install -g firebase-tools

2. Firebase Console 에서 프로젝트 생성

생성하고 나면 아래 웹 앱에서 Firebase 추가

3. Firebase 프로젝트 초기화

위 프로젝트 생성 과정에서 웹 앱 추가 하고 나온 script를 프로젝트 index.html 하단에 복사 붙여넣기

<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-<PackageName>.js"></script>

배포하려면 위 script 구문에 -<PackageName>을 추가적으로 넣어줘야 한다.

# google Login
$ firebase login

# project directory
$ firebase init

init명령어 실행하게 되면 아래 파일들이 생성되며 아래 정보가 정확히 들어가 있는지 확인해야 한다.

# firebase.json
{
  "hosting": {
    "public": "[IndexRoot]",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

# .firebaserc
{
  "projects": {
    "default": "[ProjectName]"
  }
}

Vue CLI와 firebase를 연동

4. Firebase deploy

$ firebase deploy

위 명령어를 입력하고 나면 해당 프로젝트가 hosting 되며, hosting url을 뱉는다.