Firebase Summit에서 발표된 모든 내용을 살펴보고 Firebase로 앱을 빠르게 개발하고 안심하고 앱을 실행하는 방법을 알아보세요. 자세히 알아보기

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. 메시지가 표시되면 JavaScript를 선택합니다(이 연습 예제에서는 JS를 사용함).

      3. 로컬 프로젝트 디렉토리(방금 실행한 Firebase 명령으로 생성됨)에 functions 디렉토리가 있는지 확인하십시오. 이 functions 디렉토리는 Cloud Functions용 ​​코드가 있는 곳입니다.

2단계: 호스팅 사이트에 대한 HTTPS 기능 생성 및 테스트

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

  2. 파일의 내용을 다음 코드로 바꿉니다.

    이 코드는 시계처럼 하루 중 매시간 BONG 으로 HTTPS 요청에 응답하는 HTTPS 함수( bigben )를 생성합니다.

    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",
        "region": "us-central1"  // optional (see note below)
      } ]
    }
    
  3. Firebase 에뮬레이터로 다시 테스트하여 리디렉션이 예상대로 작동하는지 확인합니다.

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

      firebase emulators:start
    2. CLI에서 반환한 사이트의 로컬 호스팅 URL(일반적으로 localhost:5000 )을 방문하되 http://localhost:5000/bigben 과 같이 bigben 을 사용하여 URL을 추가합니다.

  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 형식의 API로 BONG 수를 반환하는 또 다른 끝점:

      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 파일을 열고 다음과 같이 Express.js 앱에 cors 를 추가하세요.

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

Express 앱 및 미들웨어 모듈과 함께 Firebase를 사용하는 방법에 대해 자세히 알아보려면 Cloud Functions 문서 를 방문하세요.

다음 단계