Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기

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단계: HTTP 함수 만들기 및 테스트를 진행할 수 있습니다.

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

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

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

      3. 로컬 프로젝트 디렉터리(바로 전 실행한 Firebase 명령어로 생성된)에 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 로컬 에뮬레이터 도구 모음을 사용하여 로컬로 함수를 테스트합니다.

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

      firebase emulators:start
    2. CLI에서 반환된 로컬 URL을 통해 함수에 액세스합니다(예: http://localhost:5001/PROJECT_ID/us-central1/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 에뮬레이터로 다시 테스트하여 리디렉션이 예상한 대로 작동하는지 확인합니다.

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

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

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

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

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

4단계: 함수 배포

에뮬레이터에서 함수가 예상한 대로 작동하면 실제 프로젝트 리소스에 대해 배포, 테스트, 실행을 진행할 수 있습니다.

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

    firebase deploy --only function,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 앱을 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 문서를 참조하세요.

다음 단계