Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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가 최신 버전이고 Firebase 호스팅이 초기화되었는지 확인합니다.

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

  2. Cloud Functions가 설정되었는지 확인합니다.

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

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

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

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

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

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

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

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

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

    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 로컬 에뮬레이터 도구 모음을 사용하여 로컬로 함수를 테스트합니다.

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

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

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

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

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

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

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

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

    "hosting": {
      // ...
    
      // Add the "rewrites" attribute within "hosting"
      "rewrites": [ {
        "source": "/bigben",
        "function": "bigben"
      } ]
    }
    
  3. Firebase 에뮬레이터로 다시 테스트하여 리디렉션이 예상한 대로 작동하는지 확인합니다.

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

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

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

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

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

4단계: 함수 배포

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

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

    firebase deploy --only functions,hosting
  2. 다음 URL에서 실시간 사이트 및 함수에 액세스합니다.

    • Firebase 하위 도메인:
      PROJECT_ID.web.app/bigbenPROJECT_ID.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 앱을 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 문서를 참조하세요.

다음 단계