Cloud Functions를 Firebase Hosting와 페어링하여 마이크로서비스로 REST API를 빌드할 수 있습니다
Cloud Functions for Firebase를 사용하면 백엔드를 자동으로 실행할 수 있습니다. HTTP(S) 요청을 전송합니다. 코드는 Google의 클라우드 서비스에 저장되고 관리형 환경에서 실행됩니다. 따라서 자체 서버를 관리하고 크기를 확장할 필요가 없습니다.
예: 통합된 Cloud Functions의 사용 사례 및 샘플 Firebase Hosting님, 서버리스 개요
Cloud Functions을(를) Firebase Hosting에 연결
이 섹션에서는 함수를 Firebase Hosting
제공하는 동적 콘텐츠의 성능을 높이기 위해 필요에 따라 캐시 설정을 조정할 수 있습니다.
1단계: Cloud Functions 설정
Firebase CLI가 최신 버전인지 확인하고 Firebase Hosting를 초기화했습니다.
CLI 설치 및 초기화에 대한 자세한 안내 Hosting, Hosting 시작 가이드
Cloud Functions를 설정했는지 확인합니다.
이미 Cloud Functions을(를) 설정한 경우 다음 단계로 진행할 수 있습니다. 2단계: HTTPS 함수 만들기 및 테스트.
Cloud Functions를 설정하지 않은 경우:
다음 명령어를 실행하여 Cloud Functions를 초기화합니다. 프로젝트 디렉터리의 루트에 다음 명령어를 입력합니다.
firebase init functions
메시지가 나타나면 자바스크립트(이 단계별 예시에서는 JS)를 선택합니다.
로컬 프로젝트 디렉터리(바로 전 실행한 Firebase 명령어로 생성된)에
functions
디렉터리가 있는지 확인합니다. 이functions
디렉터리는 Cloud Functions 코드가 있는 위치입니다.
2단계: Hosting 사이트에 HTTPS 함수 만들기 및 테스트
원하는 편집기에서
/functions/index.js
를 엽니다.파일 콘텐츠를 다음 코드로 바꿉니다.
이 코드는 시계처럼 매일 시간마다
BONG
을 사용하여 HTTPS 요청에 응답하는bigben
이라는 HTTPS 함수를 만듭니다.const functions = require('firebase-functions/v1'); 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>`); });
다음 명령어로 함수를 로컬에서 테스트합니다. Firebase Local Emulator Suite
프로젝트 디렉터리의 루트에서 다음 명령어를 실행합니다.
firebase emulators:start
CLI에서 반환된 로컬 URL을 통해 함수에 액세스합니다(예:
).http://localhost:5001/PROJECT_ID/us-central1/bigben
Cloud Functions 문서 보기 참조하세요.
다음 단계에서는 웹 서버에서 이 HTTPS 함수에 액세스하는 방법을 Firebase Hosting URL을 사용하므로 Firebase 호스팅 사이트
3단계: 함수에 HTTPS 요청 전달
재작성 규칙을 사용하면 특정 패턴과 일치하는 요청을 단일 대상으로 전달할 수 있습니다. 다음 단계는
Hosting의 ../bigben
경로에서 모든 요청을 전달하는 방법
사이트의 bigben
함수를 실행합니다.
firebase.json
파일을 엽니다.hosting
섹션 아래에 다음rewrite
구성을 추가합니다."hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "/bigben", "function": { "functionId": "bigben", "region": "us-central1" // optional (see note below) "pinTag": true // optional (see note below) } } ] }
Firebase 에뮬레이터로 다시 테스트하여 리디렉션이 예상한 대로 작동하는지 확인합니다.
프로젝트 디렉터리의 루트에서 다음 명령어를 실행합니다.
firebase emulators:start
CLI로 반환된 대로 사이트의 로컬로 호스팅된 URL(일반적으로
localhost:5000
)을 방문하지만, URL에bigben
을 추가합니다(예:
).http://localhost:5000/bigben
사이트에 대해 함수 및 해당 기능을 반복합니다. Firebase 에뮬레이터를 사용하여 반복을 테스트합니다.
최상의 성능을 얻으려면 함수를 Hosting와 같은 위치에 배치하세요. 다음 리전 중 하나를 선택합니다.
us-west1
us-central1
us-east1
europe-west1
asia-east1
Hosting 구성 페이지 방문 재작성 규칙 자세히 알아보기 다음을 수행할 수 있습니다. 자세한 내용은 응답 우선 순위 다양한 Hosting 구성에 사용할 수 있습니다.
제공하는 동적 콘텐츠의 성능을 높이기 위해 필요에 따라 캐시 설정을 조정할 수 있습니다.
4단계: 함수 배포
에뮬레이터에서 함수가 예상한 대로 작동하면 실제 프로젝트 리소스에 대해 배포, 테스트, 실행을 진행할 수 있습니다. 이 단계는 프로덕션에서 실행되는 함수의 확장 동작 제어를 위한 런타임 옵션 설정을 고려하기에 적절한 시기입니다.
함수와 Hosting 콘텐츠 및 구성을 사이트를 설치합니다. 디렉터리:
firebase deploy --only functions,hosting
다음 URL에서 실시간 사이트 및 함수에 액세스합니다.
Firebase 하위 도메인:
PROJECT_ID.web.app/bigben
및PROJECT_ID.firebaseapp.com/bigben
연결된 모든 커스텀 도메인:
CUSTOM_DOMAIN/bigben
웹 프레임워크 사용
다음과 같은 웹 프레임워크를 사용할 수 있습니다. Cloud Functions의 Express.js 보다 쉽게 앱의 동적 콘텐츠를 제공하고 복잡한 웹 앱을 작성할 수 있습니다.
다음 섹션에서는 Express.js를 다음과 함께 사용하는 예시를 단계별로 설명합니다. Firebase Hosting 및 Cloud Functions.
functions
디렉터리에서 다음 명령어를 실행하여 로컬 프로젝트에 Express.js를 설치합니다.npm install express --save
/functions/index.js
파일을 연 후 Express.js를 가져와 초기화합니다.const functions = require('firebase-functions/v1'); const express = require('express'); const app = express();
다음 두 엔드포인트를 추가합니다.
/
에서 웹사이트의 색인을 제공하는 첫 번째 엔드포인트를 추가합니다.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>`); });
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)}); });
Express.js 앱을 HTTPS 함수로 내보냅니다.
exports.app = functions.https.onRequest(app);
firebase.json
파일에서 모든 요청을app
함수로 전달합니다. 이 재작성으로 Express.js는 구성된 다른 하위 경로(이 예시에서는/
및/api
)를 제공할 수 있습니다.{ "hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "**", "function": "app" } ] } }
미들웨어 추가
이제 단계별 예시에서 Express.js를 사용하고 있으므로 Express.js 미들웨어를 일반적인 방법으로 추가할 수 있습니다. 예를 들어 엔드포인트에서 CORS 요청을 사용할 수 있습니다.
다음 명령어를 실행하여
cors
미들웨어를 설치합니다.npm install --save cors
/functions/index.js
파일을 연 후 다음과 같이cors
를 Express.js 앱에 추가합니다.const cors = require('cors')({origin: true}); app.use(cors);
Cloud Functions 문서 보기 Firebase를 Express 앱 및 미들웨어 모듈과 함께 사용하는 방법에 대해 자세히 알아보세요.
다음 단계
글로벌 CDN에서 동적 콘텐츠에 대한 캐싱 설정
Firebase Admin SDK를 사용하여 다른 Firebase 서비스와 상호작용