콘솔로 이동

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

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

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

Firebase 호스팅과 통합된 Cloud Functions 사용 사례 및 샘플 예를 보려면 서버리스 개요를 참조하세요.

Firebase 호스팅에 Cloud Functions 연결

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

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

1단계: Cloud Functions 설정

  1. 다음 사항을 확인하세요.

    • 최신 버전의 Firebase CLI 보유 여부(npm install -g firebase-tools 실행)

    • Firebase 호스팅 초기화 여부

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

  2. Cloud Functions를 이미 설정했다면 2단계: HTTP 함수 만들기를 진행할 수 있습니다.

  3. Cloud Functions를 아직 설정하지 않은 경우 다음과 같이 진행하세요.

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

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

    3. 로컬 프로젝트 디렉토리에 functions 디렉토리가 있는지 확인합니다. 이 functions 디렉토리에 Cloud Functions 코드가 있습니다.

2단계: 호스팅 사이트에 HTTP 함수 만들기

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

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

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

    const functions = require('firebase-functions');
    
    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 deploy

    이제 다음 URL을 통해 이 함수에 연결할 수 있습니다.
    https://us-central1-projectID.cloudfunctions.net/bigben

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

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

3단계: 함수에 호스팅 요청 전달

재작성 규칙을 사용하면 특정 패턴과 일치하는 요청을 단일 대상으로 전달할 수 있습니다. 예를 들어 bigben 함수를 실행하기 위해 호스팅 사이트에서 /bigben 페이지의 모든 요청을 전달할 수 있습니다.

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

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

    "hosting": {
     // ...
    
     // Add the "rewrites" attribute within "hosting"
     "rewrites": [ {
       "source": "/bigben",
       "function": "bigben"
     } ]
    }
    
  3. firebase deploy 명령어를 다시 실행합니다.

    이제 다음 URL을 통해 함수에 연결할 수 있습니다.

    • Firebase 하위 도메인: projectID.web.app/bigben, projectID.firebaseapp.com/bigben

    • 연결된 모든 맞춤 도메인: custom-domain/bigben

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

웹 프레임워크 사용

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

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

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

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

    const functions = require('firebase-functions');
    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 앱을 HTTP 함수로 내보냅니다.

    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 문서를 참조하세요.

로컬에서 테스트

Firebase CLI를 사용하여 로컬에서 HTTP 함수를 제공하고 실행할 수 있습니다. 이렇게 하면 Firebase 프로젝트를 프로덕션 환경에 배포하기 전에 확인하고 테스트할 수 있습니다.

  1. Firebase CLI 및 firebase-functions SDK가 모두 최신 버전이어야 합니다. 둘 다 업데이트하려면 로컬 프로젝트의 functions 디렉토리에서 다음 두 명령어를 실행합니다.

    npm install -g firebase-tools
    npm install --save firebase-functions@latest
  2. 프로젝트 디렉토리의 루트에서 다음 명령어를 실행하여 Firebase 프로젝트를 로컬에서 제공합니다.

    이 명령어는 로컬에서 호스팅되는 URL에서 호스팅 및 함수를 에뮬레이션합니다.

    firebase serve
Cloud Functions를 사용하여 Firebase 호스팅용 동적 콘텐츠를 생성하는 경우 firebase serve는 기본적으로 로컬 HTTP 함수를 호스팅용 프록시로 사용합니다. Firebase 호스팅 및 Cloud Functions의 구성 옵션에 자세한 내용은 Firebase CLI 참조를 확인하세요.

다음 단계