firebase node.js 개발시 연동 설정법

firebase와 node.js를 만지다 보면 정말 편리한 라이브러리 및 호스팅 서비스라고 생각되지만 어떤 한편에서는 한계점을 느낄때도 있다. 그래도 웹개발을 하는데 가장 많이 사용하는 서비스이다. 역시 구축한 업체가 구글이다보니.. 대기업은 무시할 수 없나보다. 이번 포스팅에서는 node.js와 firebase를 연동하는데 기본적인 설정법에 대해서 정리해보았다.

<라이브러리 설치>

npm install express --save

express는 node.js를 사용하는데 가장 대표적인 통신 모듈이다. 요즘에는 express보다 더 좋은 라이브러리가 출시되었다고 하는데 나중에 천천히 살펴볼 계획이다. 프로젝트 파일을 만드면 가장 먼저 설치하는 라이브러리는 express이다

npm install body-parser --save

npm install ejs --save

npm install express-session

npm install serve-static

그 다음 기본적으로 설치하는 모듈 4개이다. 먼저 body-parser은 post 통신시 데이터를 읽어드리는 라이브러리이다. ejs는 view 모듈로 view engine에는 많은 종류가 있지만 필자는 ejs만 사용해보았다.

express-session은 세션 기능을 활성화 시키는 라이브러리다. 처음에는 이해가 안됬지만 웹개발 로그인 부분에서 필수적이라고 할 수 있다. serve-static은 폴더 파일과 개발한 소스들이 유연하게 연동되게 해준다.

<firebase 설정>

firebase는 기본적으로 serverless방식(서버 없이 오직 프론트개발로만 완성할 수 있는 개발)을 선호한다. 따라서 기본 hosting 방식으로 프로젝트 개발을 시작하면 제대로 실행된다. 필자가 doc 문서를 살펴본바 서버는 주로 자바나 파이썬 중심으로 설명하였으며 node.js에 관해서는 그렇게 큰 집중을 안했다는 생각이들었다. (기능적 제한이나 기타 등등)

일단 node.js와 프론트엔드 개발을 연동시키려면 프로젝트 개발에 "hosting"과 "functions" 모두 설치한 뒤에 설정값을 바꿔줘야한다. 먼저 서버를 만든다는 것은 좀 더 유연하고 동적인 웹개발을 하겠다는 것이다. 정적 파일은 hosting으로 생성된 폴더에 동적 파일은 모두 functions 내에 있는 폴더들에 넣어주면 된다.

//firebase.json
 
{
  "hosting": {
    "public": "public",
    "rewrites":[{
      "source":"**",
      "function":"app"
    }],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

기본값에서 rewrites부분을 추가하였다 source는 경로를 뜻하는데 "**"는 모든 경로에 대해서 접근 허용을 하겠다는 것이다.

functions의 "app"는 통신 모듈로서 exports 되어있는 함수들 중 "app" 이름을 가진 함수를 사용하겠다는 것이다.

// index.js
const functions = require('firebase-functions');
const express = require('express');
 
const app = express();
 
....................생략....................
 
exports.app = functions.https.onRequest(app);

마지막 부분만 유심히 보면된다. 원래 node.js는 app의 메소드를 통해 통신을 시작하지만 여기서는 app를 매개변수로 넘겨주기만 하면 된다. 

여기까지가 가장 기본적인 설정이다. 잘 실행되는지 확인하려면 node.js 프롬프트를 열어 "firebase serve" 명령어를 입력하고 웹페이지가 잘 열리는지 확인해보자.