Firebase에서 Express사용하기

Express는 Node.js를 위한 웹 프레임워크인데요.

HTTP라우팅이나, 세션관리를 할 수 있도록 도와주는 프레임으로

NodeJS와 때놓고는 애기하기 어려운 정도인데요.

오늘은 이 Express를 Firebase에서 어떻게 사용할 수 있는지 그 방법에 대해서 정리해 보도록 하겠습니다.

1. Firebase & Express 연결하기

구글에서 제공하는 Firebase에서는 

특정 라우팅에 함수를 연결해 놓으면 반응할 수 있도록 하는 서비스가 있는데요.

이러한 서비스를 Functions as a Service(Faas)라고 합니다.

Express를 사용하기 위해서는 이 서비스를 이용하면 되는데요.

사이트로 들어오는 URL을,

Express로 연결해주는 함수에 연결시켜 주면

Http라우팅에 express를 쓸 수 있게 됩니다.

우선은 사이트로 URL들이 들어오면,

함수를 호출하는 방법에 대해서 먼저 보도록 하겠습니다.

1-1. Firebase.json에서 rewrite재정의 하기

모든 URL을 Express로 연결해 주는 작업은 어디서 할까요?

이 작업은 환경설정을 하는 firebase.json에서 rewrite를 정의해서 하는데요.

(참고로 rewrite에 대해서는 아래글에 간단히 설명되어 있으니 참조해 주세요.)

>>Firebase에서 호스팅 환경설정하기<<

아래와 같이 firebase.json의 hosting의 rewrites값을 변경해 주면 됩니다.

그럼 '/' 이하의 모든 url이 들어오면 api함수를 호출하게 되는 것이지요.

마지막으로 삭제해야 할 파일이 있습니다.

바로 index.html인데요. 왜 그런지 아래의 공식문서를 잠시 참조해 보겠습니다.

화면 하단의 화살표가 가르키는 곳을 보면,

file이나 폴더가 존재하지 않을 때, rewrite룰이 적용된다고 나와있습니다.

index.html이 있다면 root에서는 항상 index.html이 보이게 되겠지요.

따라서 삭제해서, firebase가 없으니가 rewrite해야겠구나 하고 인식을 시켜주어야 합니다.

1-2. 함수 정의하기

위에서 url이 들어오면 api함수를 호출하도록 했으니,

이번에는 API함수를 정의하도록 하겠습니다.

이 일은 functions폴더에 위치한 index.js에서 해주면 되는데요.

이제 http://localhost:5000/test 를 확인해 보면

드디어 다음과 같은 화면을 볼 수 있게 됩니다.

1-3. router파일 따로 분리하기

한 파일안에 여러개의 URL을 하기에는 너무 지저분해 지는데요.

따라서 다음과 같이 require를 이용해서 분리를 할 수 있습니다.

routes폴더에 있는 home파일을 불러와서 아래와 같이 사용할 수 있습니다.

home.js는 아래와 같이 구성할 수 있구요.

1-4. 주의할 점

Firebase에서 Express를 쓰는데 있어서,

핵심적인 것이 Firebase Functions 입니다.

그런데, 이 Firebase Functions를 사용하는데 있어서 주의해야 할 부분이 있습니다.

이 Functions는 request의 body를 파싱하는데 있어서,

req.rawBody의 Buffer에 남겨두게 되는데요.

이러한 과정에서 파일등을 전송하는데 쓰는

multer나 formidable같은 모듈을 사용하지 못하게 될 수 있다는 점 입니다.

req.rawBody에 직접접근하는 방법도 있겠지만, 역시 nodejs의 npm에 있는 라이브러리를 사용하지 못한다는 것은 조금 아쉬운 부분이네요.

Express와 관련하여서 추가적으로 유용한 정보는 이 글에서 계속 업데이트 하도록 하겠습니다.