Cloud 함수로 동적 콘텐츠 제공

Firebase 호스팅을 사용하면 Cloud 함수를 통해 서버측 처리를 수행할 수 있습니다. 즉, Firebase 호스팅 사이트의 콘텐츠를 동적으로 생성할 수 있게 됩니다. 이를 통해 다음과 같은 작업이 가능합니다.

  • 동적 콘텐츠를 제공합니다. 정적 콘텐츠만 제공하는 대신, 함수를 통해 서버측 로직을 수행하여 동적으로 생성된 응답을 반환할 수 있습니다. 예를 들어 /blog/<id-for-blog-post>와 같은 URL을 사용할 수 있습니다. 이 URL 패턴을 함수에 연결하고, 함수에서는 URL의 블로그 게시물 ID 매개변수를 사용하여 Firebase 실시간 데이터베이스의 콘텐츠를 동적으로 검색할 수 있습니다.
  • 단일 페이지 앱을 사전 렌더링하여 SEO를 개선합니다. 이를 통해 동적 meta 태그를 만들어 다양한 소셜 네트워크에서 공유할 수 있습니다.
  • 웹 앱을 가볍게 유지합니다. Cloud 함수를 통해 API를 만들면 Firebase 호스팅 사이트의 콘텐츠를 비동기적으로 검색할 수 있습니다. 이를 통해 클라이언트 코드를 가볍게 유지하고 함수를 통해 비동기적으로 콘텐츠를 로드하여 웹 앱의 초기 로드 시간을 줄일 수 있습니다.

Firebase 호스팅에는 60초의 요청 시간 제한이 적용됩니다. 생성하는 데 60초 이상 소요될 수 있는 동적 콘텐츠의 경우 App Engine 가변형 환경을 사용하는 것이 좋습니다.

Firebase 호스팅에 Cloud 함수 연결

Firebase 호스팅에 함수를 연결하려면 Cloud 함수를 설정하고 함수를 작성한 후 재작성 규칙을 만들어서 변경사항을 배포해야 합니다. 캐시 설정을 조정하여 동적 콘텐츠의 성능을 높일 수도 있습니다.

Firebase 호스팅용으로 Cloud 함수 설정

이미 Firebase용 Cloud 함수를 설정한 경우에는 이 단계를 건너뛰고 HTTP 함수 만들기로 진행할 수 있습니다.

프로젝트용 Cloud 함수를 설정하려면 최신 버전의 Firebase CLI가 필요하며, 이를 위해서는 Node.js v6.3.1 이상을 설치해야 합니다. https://nodejs.org/의 안내에 따라 Node.js를 설치할 수 있습니다. Node.js를 설치하면 npm도 설치됩니다.

설치한 Node.js의 버전을 확인하려면 터미널에서 다음 명령어를 실행합니다.

node --version

Firebase CLI의 최신 버전을 설치하려면 터미널에서 다음 명령어를 실행합니다.

npm install -g firebase-tools

Firebase 계정에 로컬 컴퓨터를 연결하고 Firebase 프로젝트에 대한 액세스 권한을 얻으려면 다음 명령어를 실행합니다.

firebase login

다음으로, Cloud 함수를 초기화해야 합니다.

호스팅이 포함된 Firebase 프로젝트를 아직 초기화하지 않았다면 프로젝트 디렉토리 내에서 다음 명령어를 실행합니다. 메시지가 표시되면 프로젝트 호스팅 및 Cloud 함수를 초기화하도록 선택합니다.

firebase init

호스팅이 포함된 기존 프로젝트가 있는 경우 프로젝트 디렉토리 내에서 다음 명령어를 실행하여 Cloud 함수만 초기화합니다.

firebase init functions

호스팅 사이트에 HTTP 함수 만들기

원하는 편집기에서 /functions/index.js를 연 후 내용을 다음 코드로 바꿉니다. 그러면 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>`);
});

함수로 호스팅 요청 전달

재작성 규칙을 사용하면 특정 패턴과 일치하는 요청을 단일 대상으로 전달할 수 있습니다. 예를 들어 호스팅 사이트의 /bigben 페이지에서 보내는 모든 요청을 전달하여 bigben 함수를 실행하려면 firebase.json을 연 후 hosting 섹션에 다음 rewrite 구성을 추가합니다.

{
  "hosting": {
    "public": "public",

    // Add the following rewrites section *within* "hosting"
    "rewrites": [ {
      "source": "/bigben", "function": "bigben"
    } ]
  }
}

Firebase 호스팅에는 60초의 요청 시간 제한이 적용됩니다. 따라서 이보다 긴 요청 시간 제한으로 HTTP 함수를 구성할 경우 함수를 실행하는 데 60초 이상 소요되면 HTTP 상태 코드504(요청 시간 초과)가 계속 수신됩니다. 이러한 유형의 동적 콘텐츠를 지원하려면 App Engine 가변형 환경을 사용하는 것이 좋습니다.

다시 쓰기 규칙에 관한 자세한 내용은 맞춤설정된 호스팅 섹션을 참조하세요. 또한 다양한 호스팅 구성에 관한 응답 우선 순위에 대해서도 알아볼 수 있습니다.

로컬에서 동적 콘텐츠 실행

Firebase CLI를 사용하여 로컬에서 HTTP 함수를 제공하고 실행할 수 있습니다. 이렇게 하면 Firebase 프로젝트를 프로덕션 환경에 배포하기 전에 확인하고 테스트할 수 있습니다.

이 기능을 사용하려면 firebase-toolsfirebase-functions SDK가 모두 최신 버전이어야 합니다. 둘 다 업데이트하려면 프로젝트의 functions/ 디렉토리에서 다음 두 명령어를 실행합니다.

npm install --save firebase-functions@latest
npm install -g firebase-tools

Firebase 프로젝트를 로컬에서 제공하려면 프로젝트 디렉토리에서 다음 명령어를 실행합니다. 이 명령어는 로컬에서 호스팅되는 URL에서 호스팅 및 함수를 에뮬레이션합니다.

firebase serve
Cloud 함수를 사용하여 Firebase 호스팅용 동적 콘텐츠를 생성하는 경우 firebase serve는 기본적으로 로컬 HTTP 함수를 호스팅용 프록시로 사용합니다. Firebase 호스팅 및 Cloud 함수용 추가 구성 옵션은 Firebase CLI 참조를 확인하세요.

맞춤 함수 구성 변수를 사용하는 경우 firebase serve를 실행하기 전에 프로젝트의 functions 디렉토리에서 다음 명령어를 실행합니다.

firebase functions:config:get > .runtimeconfig.json

그러나 Windows PowerShell을 사용하는 경우에는 위의 명령어를 다음으로 대체하세요.

firebase functions:config:get | ac .runtimeconfig.json

배포

함수를 만들고 재작성 규칙을 설정한 후에는 터미널에서 다음 명령어를 실행하여 Firebase 프로젝트를 배포합니다.

firebase deploy

배포 후에는 다음과 같은 URL을 통해 함수에 정상적으로 액세스할 수 있습니다.

https://us-central1-your-project-id.cloudfunctions.net/bigben

재작성 규칙에 지정된 경로와 일치하는 Firebase 호스팅 사이트의 모든 트래픽이 프록시를 통해 적절한 함수로 전달됩니다.

샘플 시험

모두 배포된 후 Firebase 호스팅 사이트의 /bigben으로 이동하여 실제 동작을 확인할 수 있습니다.

https://your-project-id.firebaseapp.com/bigben

쿠키 사용

Cloud 함수와 함께 Firebase 호스팅을 사용하면 수신 요청에서 일반적으로 쿠키가 제거됩니다. 이는 효율적인 CDN 캐시 동작을 위한 조치입니다. 특별히 명명된 __session 쿠키만 함수 실행으로 전달될 수 있습니다.

__session 쿠키는 있으면 자동으로 캐시 키의 일부가 되므로, 서로 다른 쿠키를 갖는 두 사용자가 상대방의 캐시된 응답을 수신할 수 없습니다. 함수에서 사용자 권한에 따라 다른 콘텐츠를 제공하는 경우 __session 쿠키만 사용해야 합니다.

캐시 동작 관리

Firebase 호스팅은 강력한 CDN을 사용하여 사이트의 속도를 극대화합니다. Firebase 호스팅의 정적 콘텐츠는 새 버전의 콘텐츠가 배포될 때까지 캐싱됩니다. 함수는 동적으로 콘텐츠를 생성하므로 함수가 처리하는 요청은 기본적으로 CDN에 캐싱되지 않습니다. 캐싱 동작을 직접 구성하면 앱의 속도를 높이고 함수 실행 비용을 줄일 수 있습니다.

Cache-Control 설정

캐시를 관리할 때 주로 사용하는 도구는 Cache-Control 헤더입니다. 이 헤더를 설정하여 브라우저와 CDN에 콘텐츠를 캐싱할 기간을 전달할 수 있습니다. 함수에서는 다음과 같이 Cache-Control을 설정합니다.

res.set('Cache-Control', 'public, max-age=300, s-maxage=600');

위 헤더는 세 가지 작업을 수행합니다.

  • 캐시를 공개(public)로 표시합니다. 이는 중간 서버(이 경우에는 CDN)에서 캐싱해도 무방한 콘텐츠라는 의미입니다. 기본적으로 Cache-Controlprivate로 설정되므로 사용자의 브라우저에서만 캐싱할 수 있습니다.
  • max-age로 콘텐츠를 캐싱할 수 있는 시간을 초 단위로 브라우저에 전달합니다. 위 예에서는 브라우저에 5분 동안 캐싱하도록 지시합니다.
  • s-maxage로 콘텐츠를 캐싱할 수 있는 시간을 초 단위로 CDN에 전달합니다. 위 예에서는 CDN에 10분 동안 캐싱하도록 지시합니다.

max-age 값은 사용자가 최신 상태가 아닌 콘텐츠를 수신해도 무방한 최대 시간으로 설정합니다. 페이지가 몇 초마다 바뀌는 경우에는 max-age를 작은 숫자로 지정합니다. 그러나 콘텐츠에 따라서는 몇 시간, 며칠 또는 몇 달 동안 캐싱해도 무방할 수 있습니다.

Cache-Control 헤더에 관한 자세한 내용은 Mozilla Developer Network를 참조하세요.

캐시된 콘텐츠를 제공하는 시점

Cache-Control 헤더를 공개로 설정한 경우 콘텐츠는 다음을 기준으로 CDN에 캐시됩니다.

  • 호스트 이름
  • 경로
  • 쿼리 문자열
  • Vary에 지정된 헤더의 내용

Vary 헤더는 요청의 어느 부분이 응답을 결정하는 데 중요한지 알리는 수단입니다. 대부분의 경우에는 신경 쓸 필요가 없습니다. 일반적인 상황에서는 Firebase 호스팅이 자동으로 응답의 Vary 헤더를 적절히 설정합니다. 이 과정에서 사용 중인 세션 쿠키 또는 승인 헤더가 캐시 키에 포함되는지 확인하여 우발적인 정보 유출을 방지합니다.

일부 고급 사용 사례에서는 다른 헤더로 캐시를 관리해야 할 수 있습니다. 이러한 경우 응답에 Vary 헤더를 설정하기만 하면 됩니다.

res.set('Vary', 'Accept-Encoding, X-My-Custom-Header');

이러한 설정을 사용하면 X-My-Custom-Header 헤더만 다르고 나머지 부분은 동일한 두 요청이 서로 구분되어 캐싱됩니다.

다음에 대한 의견 보내기...

도움이 필요하시나요? 지원 페이지를 방문하세요.