[Firebase] Firebase를 이용한 API 호출 - 3

1. 무료 요금제로 배포해보기

이전 포스트에서는 로컬환경에서 Functions를 활용해서 오픈 API를 호출했었고 잘 작동했죠. 그럼 이번에는 

 

외부 api를 호출하는 Funcitons를 Spark 요금제인 상태로 배포하면 어떻게 되는지 살펴보겠습니다.

 

firebase deploy --only functions

일단 위의 커맨드로 functions만 배포합니다. 그럼 Project console주소 URL이 출력됩니다. Cmd or Ctrl 클릭으로 접속 후에

 

개발 하위메뉴중 Funftions에 접속합니다. 

그럼 배포한 함수가 나타나고 트리거에보면 URL이있습니다. 이 URL을 복사해서 index.html에 fetch의 로컬주소를 

fetch('https://us-central1-api-call-da651.cloudfunctions.net/apicall').then((res) => {
	res.json().then((res) => {
		console.log(res)
	})
})  

위와같이 변경합니다. 그리고 Hosting 배포를 위해 

firebase deploy --only hosting

위의 커맨드로 배포를 실행해주시면 됩니다.

(둘다 한번에 배포하려면 firebase deploy하시면됩니다. 다만 functions는 배포에 시간이 좀걸리니, 호스팅만 배포할땐 only를 활용)

 

그러면 Hosting URL이 나오고 접속 후 console을 확인하면 

 

Uncaught (in promise) TypeError: Failed to fetch 라는 메세지가 뜹니다. Functions에서 제대로 API를 호출하지 못했기 때문이지요.

 

2. 요금제 업그레이드

그럼 요금제를 업그레이드 해봅시다.

 

준비물은 해외결제가 가능한 신용카드만 있으면 되며, Firebase console에서 요금제 업그레이드를 원하는 프로젝트로 들어가신 후

 

왼쪽하단에 이부분에서 '업그레이드'를 누르시고 Blaze를 선택해서 진행하시면됩니다. 

 

 

업그레이드를 완료하면 Blaze요금제로 표시되며, 배포한 Hosting URL로 다시 들어가보면 

정상적으로 동작합니다!

 

3. Functions 접근 제한하기

여기까지 진행했다면 Firebase Functions는 누구나 접근 가능한 상태가 되어, 아무나 요청을 하면 타사 API가 호출되고 잘못하면

 

과금 및 보안이슈로 이어질 수 있죠. 저는 사실 Node나 서버에 대한 지식이 많지 않기 때문에, 가장 간단한 '특정 도메인만 허용'하는

 

방식을 사용했습니다. 

 

functions 폴더에 index.js에서 아래와 같이 수정합니다.

const functions = require('firebase-functions');
const cors = require('cors')({origin: true});
const request = require('request');
exports.apicall = functions.https.onRequest((req, response) => {
  cors(req, response, () => {
    if(req.get('origin') === 'https://api-call-da651.firebaseapp.com' || req.get('origin') === 'http://localhost:5000'){
      request(`https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-name/hideonbush?api_key=RGAPI-8483906e-0d90-477c-b5fc-79c7d7060112`, function (error, res, body) {
        response.send(res);
      });
    }
  })
});

req.get('origin')으로 요청한 도메인을 확인하고 확인한 도메인이 맞다면 타사 API를 실행하도록 수정되었습니다.

 

https://codepen.io/pen/ 과 같은 코드 테스트 사이트에서 요청을 보내면 

 

Uncaught (in promise) TypeError: Failed to fetch 라는 콘솔에러가 나타납니다. 

 

4. ETC

functions에서 POST 방식을 사용을 위해서는 

https://stackoverflow.com/questions/42995433/how-firebase-cloud-functions-handle-http-post-method 여기를 참고!