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

Cloud Functions로 동적 콘텐츠 제공 및 마이크로서비스 호스팅

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

Cloud Functions를 Firebase 호스팅과 페어링하여 동적 콘텐츠를 생성 및 제공하거나 REST API를 마이크로서비스로 구축하세요.

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

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

Cloud Functions를 Firebase 호스팅에 연결

이 섹션에서는 함수를 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 과 같이 URL에 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 형식의 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 문서 를 참조하세요.

다음 단계

,

Cloud Functions를 Firebase 호스팅과 페어링하여 동적 콘텐츠를 생성 및 제공하거나 REST API를 마이크로서비스로 구축하세요.

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

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

Cloud Functions를 Firebase 호스팅에 연결

이 섹션에서는 함수를 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 과 같이 URL에 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 형식의 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 문서 를 참조하세요.

다음 단계

,

Cloud Functions를 Firebase 호스팅과 페어링하여 동적 콘텐츠를 생성 및 제공하거나 REST API를 마이크로서비스로 구축하세요.

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

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

Cloud Functions를 Firebase 호스팅에 연결

이 섹션에서는 함수를 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 과 같이 URL에 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 형식의 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 문서 를 참조하세요.

다음 단계