Firebase 사용 방법

Angelo·2020년 3월 3일

Backend Firebase server 백엔드 서버 파이어베이스

Server

목록 보기

1/2

이 포스트에서는 구글의 웹 애플리케이션 개발 플랫폼인 Firebase 를 사용하는 방법에 대해 설명합니다.
https://firebase.google.com/, https://firebase.google.com/docs/, https://firebase.google.com/docs/functions/

Firebase 사용 목적

Hosting: 빠르고 안전하게 웹 앱 애셋 전달
Cloud Functions: 서버를 관리하지 않고 모바일 백엔드 코드 실행

Firebase 사용시의 장점

서버를 직접 구축해야 하는 번거로움이 적습니다.
https 인증을 위한 절차가 생략됩니다.

1. firebase 프로젝트 생성

1-1. 로그인

※ 이 과정을 진행하기 위해서는 구글 계정이 있어야 합니다.

① Firebase 에 접속하여 우측 상단의 로그인 버튼을 클릭합니다.

② 자신의 구글 계정으로 접속하기 위해 아이디 및 패스워드를 입력합니다.

1-2. 프로젝트 생성

① 우측 상단의 콘솔로 이동 버튼을 클릭하여 콘솔 페이지로 이동합니다.

② 프로젝트를 만들기 위해 프로젝트 만들기 를 클릭합니다.

③ 프로젝트 이름을 정한 후 계속을 클릭합니다. 저는 example 로 정하였습니다.

④ 계속을 클릭합니다.

⑤ 프로젝트 만들기를 클릭합니다.

⑥ 계속를 클릭합니다.

⑦ 프로젝트에 대한 개요를 볼 수 있는 화면이 출력됩니다.

2. firebase 설치

① Firebase CLI 참조 에 자신의 운영체제에 맞는 CLI 어플리케이션을 다운 받은 후 실행시킵니다.

② CLI 가 실행되면 콘솔 화면이 나타나는데, Firebase 의 CLI 사용 및 에러 리포팅 정보에 관한 수집을 허용하겠냐는 질문으로 y 혹은 n 입력 후 엔터를 합니다.

③ Waiting for authentication... 이라는 문구와 함께 이후에 계정 선택을 요청하는 브라우저 창이 뜨게됩니다.

④ 계정 선택을 합니다. ※ 이전에 프로젝트를 만들기 위해 구글 로그인을 하였기 때문에 로그인 되어 있는 계정이 표시됩니다.

⑤ Firebase CLI 에서의 Google 계정 엑세스 문구가 나타납니다. 구글 계정에서 Firebase 사용을 위해 허용 을 클릭합니다.

⑤ 로그인이 완료되면 위 이미지와 같이 Firebase CLI 로그인에 성공하였다는 문구가 나타납니다.

⑥ 다시 CLI 에 와서 로그를 보면 메시지가 떠 있는것을 확인 가능합니다.

3. firebase tools 업데이트

npm install -g firebase-tools

명령어를 통하여 firebase tools 를 최신으로 업데이트 해 줍니다. 필수적인건 아니지만 firebase 권장사항입니다.

업데이트가 완료 되면 업데이트 된 패키지 갯수를 보여주면서 command 상태로 복귀합니다.

4. firebase init

firebase init 작업은 로컬 프로젝트를 Firebase 프로젝트에 연결하기 위한 명령어입니다.
※ CLI 를 이용하기 위해서는 운영체제의 command line 명령어를 알아야 합니다. (change directory, make directory 등등)

원하는 디렉토리로 이동 후

firebase init

명령어를 실행하면 Firebase Project 를 초기화 하기 위한 디렉토리가 보이며, 진행을 위한 준비가 되었냐고 물어보는데 y 입력 후 엔터를 입력합니다.

어떠한 CLI 기능을 이용할 것이냐는 물음에 이번 호스팅에서는 Functions (Node.js 기반의 express 서버) 및 Hosting (html, css, js) 를 사용 할 것이므로 Functions 및 Hosting 을 화살표 버튼으로 이동 후 스페이스바로 체크 한 다음 엔터를 합니다.

이전 1. firebase 프로젝트 생성 진행을 통해 생성하였던 example 프로젝트를 사용 할 것이기 때문에 Use an existing project 를 선택 한 후 엔터를 입력합니다.

example 프로젝트를 선택한 후 엔터를 입력합니다.

Functions 기능을 위해 어떠한 언어를 사용 할 것이냐고 질문에 저는 JavaScript 를 선택하였습니다.

ESLint 를 사용 할 것이냐고 물어봅니다.
여기서의 ESLint 는 firebase 에서 강제되는 코딩 스타일이나 기타 문제를 캐치하는 용도로 사용됩니다.
ESLint 사용 유무를 떠나서 firebase 의 가이드를 따라가지 않으면 deploy 되지 않는것은 마찬가지이니 쉽게 디버깅을 하기 위해 y 입력 후 엔터를 입력합니다.

npm module 들을 설치 할 것이냐는 질문에 저는 y 를 선택하였습니다.
※ 지금 설치하지 않아도 추후에 직접 라이브러리를 설치 하여도 괜찮습니다.

위에서 y 를 선택하였으면 CLI 는 프로그레스 바와 함께 설치 진행 상태를 나타냅니다.

public directory 의 이름을 무엇으로 할지 정해야 하는데, 저는 public 진행하였습니다.
(public directory 는 html, css, js 파일들이 위치하게 될 디렉토리입니다.)

rewrite all urls to /index.html 은 n 으로 입력 후 엔터를 입력합니다.

설치 완료가 되면 완료 되었다는 문구와 함께 CLI 의 command line 으로 복귀합니다.

5. firebase directory 설명

GUI 환경에서 firebase init 을 진행 한 폴더를 열어보면 functions 및 public 디렉토리가 생성되어 있는것을 확인 할 수 있습니다.

5-1. function 폴더

function 디렉토리 안의 index.js 파일을 작성해서 api 서버 구동 및 firebase 에서 제공되는 url 로 ajax 가 가능하게 됩니다.

5-2. public 폴더

public 안에는 html, css, js 파일을 위치시키면 firebase 에서 제공되는 url 로 index.html 에 접근 할 수 있게 됩니다.

6. firebase deploy

firebase deploy

명령어를 통해 Firebase 프로젝트의 기본 호스팅 사이트 (projectID.web.app 및 projectID.firebaseapp.com) 에 배포 할 수 있습니다.
Firebase 프로젝트의 데이터를 로컬의 데이터와 동기화 하는 작업이라고 보면 됩니다.

사실 로컬에서 수정 한 내용이 없으므로 deploy 를 할 필요는 없었지만, Hosting URL 을 확인해볼겸 진행 해봤습니다.
Hosting URL 에 접속 해볼까요?

Hosting URL 에 접속해보니 Welcome 문구가 나타납니다.
어디선가 작성이 되었으니 나타나는 것일텐데, 아까 html, css, js 파일이 담기게 될 public 디렉토리가 만들어졌던것이 기억납니다.

6-1. public 폴더 안의 내용 확인

public 폴더에 들어가보니 firebase init 을 진행 할 때 생성되었던 index.html 파일이 보입니다.

파일 내용을 보면 Hosting URL 로 접속 했을 때 나왔던 내용과 같은것을 확인 가능합니다.

6-2. function 폴더 안의 내용 확인

functions 폴더에 들어가보니 index.js 파일이 위치 해 있습니다.

firebase init 시 생성되는 index.js 파일을 보면 현재는 아무 기능도 하지 않는다는것을 확인 가능합니다.
이 파일을 수정하면 ajax 가 가능한 API 서버를 만들 수 있는데, 이 부분은 뒤의 7. API 서버 예제 작성 에서 다루도록 하겠습니다.

7. API 서버 예제 작성

index.js 파일 수정

기존의 코드를 주석처리 하고 아래와 같이 바꿔보겠습니다.

const functions = require('firebase-functions');
const express = require("express")

const app1 = express();

app1.get("/hello", (request, response) => {
  response.send("Hello from Express on Firebase!")
})

const api1 = functions.https.onRequest(app1)

module.exports = {
  api1
}

firebase.json 파일 수정

firebase init 시 생성되는 firebase.json 이미지 경로.

위 이미지는 기본적으로 생성되어 있는 firebase.json 파일인데 이것을 아래와 같이 수정합니다.

{
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ]
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source":"/**",
        "function": "api1"
      }
    ]
  }
}