Cloud Functions를 사용하여 동적 콘텐츠 제공 및 마이크로서비스 호스팅

Cloud Functions를 Firebase Hosting과 페어링하면 동적 콘텐츠를 생성하여 제공하거나 REST API를 마이크로서비스로 빌드할 수 있습니다.

Cloud Functions for Firebase를 사용하면 HTTPS 요청에 대한 응답으로 백엔드 코드를 자동으로 실행할 수 있습니다. 코드는 Google의 클라우드 서비스에 저장되고 관리형 환경에서 실행됩니다. 따라서 자체 서버를 관리하고 크기를 확장할 필요가 없습니다.

Firebase Hosting과 통합된 Cloud Functions의 사용 사례 및 샘플은 Google의 서버리스 개요를 참조하세요.

Firebase Hosting에 Cloud Functions 연결

이 섹션에서는 Firebase Hosting에 함수를 연결하는 예를 단계별로 설명합니다.

제공하는 동적 콘텐츠의 성능을 높이기 위해 필요에 따라 캐시 설정을 조정할 수 있습니다.

1단계: Cloud Functions 설정

  1. Firebase CLI가 최신 버전이고 Firebase Hosting이 초기화되었는지 확인합니다.

    CLI 설치 및 Hosting 초기화에 관한 자세한 내용은 Hosting 시작 가이드를 참조하세요.

  2. Cloud Functions를 설정했는지 확인합니다.

    • 이미 Cloud Functions를 설정했으면 2단계: HTTPS 함수 만들기 및 테스트를 진행할 수 있습니다.

    • Cloud Functions를 설정하지 않은 경우:

      1. 프로젝트 디렉터리의 루트에서 다음 명령어를 실행하여 Cloud Functions를 초기화합니다.

        firebase init functions

      2. 메시지가 나타나면 자바스크립트(이 단계별 예시에서는 JS)를 선택합니다.

      3. 로컬 프로젝트 디렉터리(바로 전 실행한 Firebase 명령어로 생성된)에 functions 디렉터리가 있는지 확인합니다. 이 functions 디렉터리에 Cloud Functions 코드가 있습니다.

2단계: Hosting 사이트에 대해 HTTPS 함수 만들기 및 테스트

  1. 원하는 편집기에서 /functions/index.js를 엽니다.

  2. 파일 콘텐츠를 다음 코드로 바꿉니다.

    이 코드는 시계처럼 매일 시간마다 BONG을 사용하여 HTTPS 요청에 응답하는 bigben이라는 HTTPS 함수를 만듭니다.

    const functions = require('firebase-functions/v1');

exports.bigben = functions.https.onRequest((req, res) => {
  const hours = (new Date().getHours() % 12) + 1  // London is UTC + 1hr;
  res.status(200).send(`<!doctype html>
    <head>
      <title>Time</title>
    </head>
    <body>
      ${'BONG '.repeat(hours)}
    </body>
  </html>`);
});

  3. Firebase Local Emulator Suite을 사용하여 로컬에서 함수를 테스트합니다.

    1. 프로젝트 디렉터리의 루트에서 다음 명령어를 실행합니다.

      firebase emulators:start

    2. CLI에서 반환된 로컬 URL을 통해 함수에 액세스합니다(예: http://localhost:5001/PROJECT_ID/us-central1/bigben).

HTTPS 요청에 대한 자세한 내용은 Cloud Functions 문서를 참조하세요.

다음 단계에서는 Firebase Hosting URL에서 이 HTTPS 함수에 액세스하여 Firebase 호스팅 사이트에 대한 동적 콘텐츠를 생성하는 방법을 설명합니다.

3단계: 함수에 HTTPS 요청 전달

재작성 규칙을 사용하면 특정 패턴과 일치하는 요청을 단일 대상으로 전달할 수 있습니다. 다음 단계는 Hosting 사이트에서 ../bigben 경로의 모든 요청을 전달하여 bigben 함수를 실행하는 방법을 보여줍니다.

  1. firebase.json 파일을 엽니다.

  2. hosting 섹션 아래에 다음 rewrite 구성을 추가합니다.

    "hosting": {
  // ...

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    "source": "/bigben",
    "function": {
      "functionId": "bigben",
      "region": "us-central1"  // optional (see note below)
      "pinTag": true           // optional (see note below)
    }
  } ]
}

  3. Firebase 에뮬레이터로 다시 테스트하여 리디렉션이 예상한 대로 작동하는지 확인합니다.

    1. 프로젝트 디렉터리의 루트에서 다음 명령어를 실행합니다.

      firebase emulators:start

    2. CLI로 반환된 대로 사이트의 로컬로 호스팅된 URL(일반적으로 localhost:5000)을 방문하지만, URL에 bigben을 추가합니다(예: http://localhost:5000/bigben).

  4. 사이트에 대해 함수 및 해당 기능을 반복합니다. Firebase 에뮬레이터를 사용하여 반복을 테스트합니다.

최상의 성능을 얻으려면 다음 리전 중 하나를 선택하여 함수를 Hosting과 같은 위치에 배치합니다.

  • us-west1
  • us-central1
  • us-east1
  • europe-west1
  • asia-east1

재작성 규칙에 대한 자세한 내용은 Hosting 구성 페이지를 참조하세요. 또한 다양한 Hosting 구성에 관한 응답 우선순위에 대해서도 알아볼 수 있습니다.

제공하는 동적 콘텐츠의 성능을 높이기 위해 필요에 따라 캐시 설정을 조정할 수 있습니다.

4단계: 함수 배포

에뮬레이터에서 함수가 예상한 대로 작동하면 실제 프로젝트 리소스에 대해 배포, 테스트, 실행을 진행할 수 있습니다. 이 단계는 프로덕션에서 실행되는 함수의 확장 동작 제어를 위한 런타임 옵션 설정을 고려하기에 적절한 시기입니다.

  1. 로컬 프로젝트 디렉터리의 루트에서 다음 명령어를 실행하여 함수뿐만 아니라 Hosting 콘텐츠 및 구성을 배포합니다.

    firebase deploy --only functions,hosting

  2. 다음 URL에서 실시간 사이트 및 함수에 액세스합니다.

    • Firebase 하위 도메인:
      PROJECT_ID.web.app/bigben 및 PROJECT_ID.firebaseapp.com/bigben

    • 연결된 모든 커스텀 도메인:
      CUSTOM_DOMAIN/bigben

웹 프레임워크 사용

Cloud Functions에서 Express.js와 같은 웹 프레임워크를 사용하여 앱의 동적 콘텐츠를 제공하고 복잡한 웹 앱을 보다 쉽게 작성할 수 있습니다.

다음 섹션에서는 Firebase Hosting 및 Cloud Functions에 Express.js를 사용하는 예를 단계별로 설명합니다.

  1. functions 디렉터리에서 다음 명령어를 실행하여 로컬 프로젝트에 Express.js를 설치합니다.

    npm install express --save

  2. /functions/index.js 파일을 연 후 Express.js를 가져와 초기화합니다.

    const functions = require('firebase-functions/v1');
const express = require('express');
const app = express();

  3. 다음 두 엔드포인트를 추가합니다.

    1. /에서 웹사이트의 색인을 제공하는 첫 번째 엔드포인트를 추가합니다.

      app.get('/', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.send(`
    <!doctype html>
    <head>
      <title>Time</title>
      <link rel="stylesheet" href="/style.css">
      <script src="/script.js"></script>
    </head>
    <body>
      <p>In London, the clock strikes:
        <span id="bongs">${'BONG '.repeat(hours)}</span></p>
      <button onClick="refresh(this)">Refresh</button>
    </body>
  </html>`);
});

    2. API를 통해 JSON 형식으로 BONG 수를 반환하는 또 다른 엔드포인트를 /api 아래에 추가합니다.

      app.get('/api', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.json({bongs: 'BONG '.repeat(hours)});
});

  4. Express.js 앱을 HTTPS 함수로 내보냅니다.

    exports.app = functions.https.onRequest(app);

  5. firebase.json 파일에서 모든 요청을 app 함수로 전달합니다. 이 재작성으로 Express.js는 구성된 다른 하위 경로(이 예시에서는 / 및 /api)를 제공할 수 있습니다.

    {
 "hosting": {
   // ...

   // Add the "rewrites" attribute within "hosting"
   "rewrites": [ {
     "source": "**",
     "function": "app"
   } ]
 }
}

미들웨어 추가

이제 단계별 예시에서 Express.js를 사용하고 있으므로 Express.js 미들웨어를 일반적인 방법으로 추가할 수 있습니다. 예를 들어 엔드포인트에서 CORS 요청을 사용할 수 있습니다.

  1. 다음 명령어를 실행하여 cors 미들웨어를 설치합니다.

    npm install --save cors

  2. /functions/index.js 파일을 연 후 다음과 같이 cors를 Express.js 앱에 추가합니다.

    const cors = require('cors')({origin: true});
app.use(cors);

Firebase를 Express 앱 및 미들웨어 모듈과 함께 사용하는 방법에 대한 자세한 내용은 Cloud Functions 문서를 참조하세요.

다음 단계