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

호스팅 동작 구성

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

Firebase 호스팅을 사용하면 사이트에 대한 요청에 대한 맞춤형 호스팅 동작을 구성할 수 있습니다.

호스팅을 위해 무엇을 구성할 수 있습니까?

  • Firebase 호스팅에 배포하려는 로컬 프로젝트 디렉터리의 파일을 지정합니다. 어떻게하는지 배우다.

  • 맞춤형 404/찾을 수 없음 페이지를 제공합니다. 어떻게하는지 배우다.

  • 이동하거나 삭제한 페이지에 대한 redirects 을 설정합니다. 어떻게하는지 배우다.

  • 다음 목적 중 하나로 rewrites 를 설정합니다.

  • headers 를 추가하여 브라우저가 페이지 및 해당 콘텐츠(인증, 캐싱, 인코딩 등)를 처리하는 방법과 같은 요청 또는 응답에 대한 추가 정보를 전달합니다. 어떻게하는지 배우다.

  • 사용자의 언어 기본 설정 및/또는 국가에 따라 특정 콘텐츠를 제공하도록 국제화(i18n) 재작성을 설정합니다. 방법을 알아보세요 (다른 페이지).

호스팅 구성을 어디에서 정의합니까?

firebase.json 파일에서 firebase.json 호스팅 구성을 정의합니다. Firebase는 firebase init 명령을 실행할 때 프로젝트 디렉토리의 루트에 firebase.json 파일을 자동으로 생성합니다.

이 페이지 하단에서 전체 firebase.json 구성 예 (Firebase 호스팅만 포함)를 찾을 수 있습니다. firebase.json 파일에는 다른 Firebase 서비스에 대한 구성 도 포함될 수 있습니다.

Hosting REST API 를 사용하여 배포된 firebase.json 콘텐츠를 확인할 수 있습니다.

호스팅 응답의 우선 순위

이 페이지에 설명된 다양한 Firebase 호스팅 구성 옵션이 겹치는 경우가 있습니다. 충돌이 있는 경우 호스팅은 다음 우선 순위를 사용하여 응답을 결정합니다.

  1. /__/* 경로 세그먼트로 시작하는 예약된 네임스페이스
  2. 구성된 리디렉션
  3. 정확히 일치하는 정적 콘텐츠
  4. 구성된 재작성
  5. 맞춤 404 페이지
  6. 기본 404 페이지

i18n rewrites 를 사용하는 경우 정확한 일치 및 404 처리 우선순위 순서가 "i18n 콘텐츠"를 수용할 수 있도록 범위가 확장됩니다.

배포할 파일 지정

기본 firebase.json 파일에 포함된 기본 속성( publicignore )은 firebase.json 프로젝트에 배포해야 하는 프로젝트 디렉토리의 파일을 정의합니다.

firebase.json 파일의 기본 hosting 구성은 다음과 같습니다.

"hosting": {
  "public": "public",  // the only required attribute for Hosting
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}

공공의

필수의
public 속성은 Firebase 호스팅에 배포할 디렉터리를 지정합니다. 기본값은 public 이라는 디렉터리이지만 프로젝트 디렉터리에 있는 한 모든 디렉터리의 경로를 지정할 수 있습니다.

다음은 배포할 디렉터리의 기본 지정 이름입니다.

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

  // ...
}

기본값을 배포하려는 디렉터리로 변경할 수 있습니다.

"hosting": {
  "public": "dist/app"

  // ...
}

무시하다

선택 과목
ignore 특성은 배포 시 무시할 파일을 지정합니다. Git.gitignore 를 처리하는 것과 같은 방식으로 glob 을 사용할 수 있습니다.

무시할 파일의 기본값은 다음과 같습니다.

"hosting": {
  // ...

  "ignore": [
    "firebase.json",  // the Firebase configuration file (the file described on this page)
    "**/.*",  // files with a leading period should be hidden from the system
    "**/node_modules/**"  // contains dependencies used to create your site but not run it
  ]
}

404/찾을 수 없음 페이지 사용자 지정

선택 과목
사용자가 존재하지 않는 페이지에 액세스하려고 하면 사용자 지정 404 Not Found 수 없음 오류를 제공할 수 있습니다.

프로젝트의 public 디렉터리 에 새 파일을 만들고 이름을 404.html 로 지정한 다음 사용자 지정 404 Not Found 콘텐츠를 파일에 추가합니다.

Firebase 호스팅은 브라우저가 도메인 또는 하위 도메인 404 Not Found 수 없음 오류를 트리거하는 경우 이 맞춤 404.html 페이지의 콘텐츠를 표시합니다.

리디렉션 구성

선택 과목
URL 리디렉션을 사용하여 페이지를 이동한 경우 끊어진 링크를 방지하거나 URL을 단축합니다. 예를 들어 브라우저를 example.com/team 에서 example.com/about.html 로 리디렉션할 수 있습니다.

객체 배열("리디렉션 규칙"이라고 함)을 포함하는 redirects 속성을 생성하여 URL 리디렉션을 지정합니다. 각 규칙에서 요청 URL 경로와 일치하는 경우 지정된 대상 URL에 대한 리디렉션으로 응답하도록 Hosting을 트리거하는 URL 패턴을 지정합니다.

다음은 redirects 속성의 기본 구조입니다. 이 예제는 /bar 에 새 요청을 만들어 /foo 로 요청을 리디렉션합니다.

"hosting": {
  // ...

  // Returns a permanent redirect to "/bar" for requests to "/foo" (but not "/foo/**")
  "redirects": [ {
    "source": "/foo",
    "destination": "/bar",
    "type": 301
  } ]
}

redirects 속성에는 리디렉션 규칙 배열이 포함되어 있으며 각 규칙에는 아래 표의 필드가 포함되어야 합니다.

Firebase 호스팅은 모든 요청이 시작될 때 source 또는 regex 값을 모든 URL 경로와 비교합니다(브라우저가 해당 경로에 파일 또는 폴더가 있는지 확인하기 전에). 일치 항목이 발견되면 Firebase 호스팅 원본 서버는 destination URL에서 새 요청을 생성하도록 브라우저에 알리는 HTTPS 리디렉션 응답을 보냅니다.

필드 설명
redirects
source (권장)
또는 regex

초기 요청 URL과 일치하는 경우 호스팅을 트리거하여 리디렉션을 적용하는 URL 패턴

  • source 를 사용하여 glob 을 지정합니다 (권장) .
  • regex 를 사용하여 RE2 정규식을 지정합니다.
destination

브라우저가 새로운 요청을 해야 하는 정적 URL

이 URL은 상대 또는 절대 경로일 수 있습니다.

type

HTTPS 응답 코드

  • '영구 이동'에 301 유형 사용
  • 'Found'에 302 유형 사용(임시 리디렉션)

리디렉션을 위한 URL 세그먼트 캡처

선택 과목
경우에 따라 리디렉션 규칙의 URL 패턴( source 또는 regex 값)의 특정 세그먼트를 캡처한 다음 규칙의 destination 경로에서 이러한 세그먼트를 다시 사용해야 할 수 있습니다.

재작성 구성

선택 과목
재작성을 사용하여 여러 URL에 대해 동일한 콘텐츠를 표시합니다. 재작성은 패턴 일치에 특히 유용합니다. 패턴과 일치하는 모든 URL을 허용하고 클라이언트측 코드가 표시할 내용을 결정하도록 할 수 있기 때문입니다.

재작성을 사용하여 탐색에 HTML5 pushState 를 사용하는 앱을 지원할 수도 있습니다. 브라우저가 지정된 source 또는 regex URL 패턴과 일치하는 URL 경로를 열려고 시도하면 대신 destination URL의 파일 내용이 브라우저에 제공됩니다.

객체 배열("재작성 규칙"이라고 함)을 포함하는 rewrites 속성을 생성하여 URL 재작성을 지정합니다. 각 규칙에서 요청 URL 경로와 일치하는 경우 서비스에 지정된 대상 URL이 제공된 것처럼 응답하도록 Hosting을 트리거하는 URL 패턴을 지정합니다.

rewrites 속성의 기본 구조는 다음과 같습니다. 이 예제는 존재하지 않는 파일 또는 디렉토리에 대한 요청에 대해 index.html 을 제공합니다.

"hosting": {
  // ...

  // Serves index.html for requests to files or directories that do not exist
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]
}

rewrites 속성에는 재작성 규칙의 배열이 포함되어 있으며 각 규칙에는 아래 표의 필드가 포함되어야 합니다.

Firebase 호스팅은 지정된 source 또는 regex URL 패턴과 일치하는 URL 경로에 파일이나 디렉토리가 존재하지 않는 경우에만 재작성 규칙을 적용합니다. 요청이 재작성 규칙을 트리거하면 브라우저는 HTTP 리디렉션 대신 지정된 destination 파일의 실제 콘텐츠를 반환합니다.

필드 설명
rewrites
source (권장)
또는 regex

초기 요청 URL과 일치하는 경우 호스팅을 트리거하여 재작성을 적용하는 URL 패턴

  • source 를 사용하여 glob 을 지정합니다 (권장) .
  • regex 를 사용하여 RE2 정규식을 지정합니다.
destination

존재해야 하는 로컬 파일

이 URL은 상대 또는 절대 경로일 수 있습니다.

함수에 직접 요청

rewrites 을 사용하여 Firebase 호스팅 URL에서 함수를 제공할 수 있습니다. 다음 예는 Cloud Functions를 사용하여 동적 콘텐츠를 제공하는 것에서 발췌한 것입니다.

예를 들어 호스팅 사이트의 /bigben 페이지에서 모든 요청을 bigben 기능을 실행하도록 지시하려면 다음을 수행하십시오.

"hosting": {
  // ...

  // Directs all requests from the page `/bigben` to execute the `bigben` function
  "rewrites": [ {
    "source": "/bigben",
    "function": "bigben",
    "region": "us-central1"  // optional (see note below)
  } ]
}

이 재작성 규칙을 추가하고 firebase deploy 사용)하면 다음 URL을 통해 함수에 연결할 수 있습니다.

  • Firebase 하위 도메인:
    PROJECT_ID .web.app/bigbenPROJECT_ID .firebaseapp.com/bigben

  • 연결된 사용자 지정 도메인 :
    CUSTOM_DOMAIN /bigben

호스팅을 사용하여 요청을 함수로 리디렉션할 때 지원되는 HTTP 요청 방법은 GET , POST , HEAD , PUT , DELETE , PATCHOPTIONS 입니다. REPORT 또는 PROFIND 와 같은 다른 방법은 지원되지 않습니다.

Cloud Run 컨테이너에 직접 요청

rewrites 을 사용하여 Firebase 호스팅 URL에서 Cloud Run 컨테이너에 액세스할 수 있습니다. 다음 예시는 Cloud Run을 사용한 동적 콘텐츠 제공 에서 발췌한 것입니다.

예를 들어 호스팅 사이트의 /helloworld 페이지에서 모든 요청을 전달하여 helloworld 컨테이너 인스턴스의 시작 및 실행을 트리거하려면 다음을 수행하십시오.

"hosting": {
 // ...

 // Directs all requests from the page `/helloworld` to trigger and run a `helloworld` container
 "rewrites": [ {
   "source": "/helloworld",
   "run": {
     "serviceId": "helloworld",  // "service name" (from when you deployed the container image)
     "region": "us-central1"  // optional (if omitted, default is us-central1)
   }
 } ]
}

이 재작성 규칙을 추가하고 firebase deploy 사용)하면 다음 URL을 통해 컨테이너 이미지에 연결할 수 있습니다.

  • Firebase 하위 도메인:
    PROJECT_ID .web.app/helloworldPROJECT_ID .firebaseapp.com/helloworld

  • 연결된 사용자 지정 도메인 :
    CUSTOM_DOMAIN /helloworld

호스팅을 사용하여 요청을 Cloud Run 컨테이너로 리디렉션할 때 지원되는 HTTP 요청 방법은 GET , POST , HEAD , PUT , DELETE , PATCH , OPTIONS 입니다. REPORT 또는 PROFIND 와 같은 다른 방법은 지원되지 않습니다.

현재 다음 리전에서 Cloud Run 재작성을 호스팅과 함께 사용할 수 있습니다.

  • asia-east1
  • asia-east2
  • asia-northeast1
  • asia-northeast2
  • asia-northeast3
  • asia-south1
  • asia-southeast1
  • asia-southeast2
  • australia-southeast1
  • europe-north1
  • europe-west1
  • europe-west2
  • europe-west3
  • europe-west4
  • europe-west6
  • northamerica-northeast1
  • southamerica-east1
  • us-central1
  • us-east1
  • us-east4
  • us-west1

rewrites 을 사용하여 맞춤 도메인 동적 링크를 만들 수 있습니다. 동적 링크용 맞춤 도메인 설정 에 대한 자세한 내용은 동적 링크 설명서를 참조하세요.

  • 동적 링크 에만 맞춤 도메인 사용

    "hosting": {
      // ...
    
      "appAssociation": "AUTO",  // required for Dynamic Links (default is AUTO if not specified)
    
      // Add the "rewrites" attribute within "hosting"
      "rewrites": [ {
        "source": "/**",  // the Dynamic Links start with "https://CUSTOM_DOMAIN/"
        "dynamicLinks": true
      } ]
    }
    
  • 동적 링크에 사용할 사용자 지정 도메인 경로 접두사 지정

    "hosting": {
      // ...
    
      "appAssociation": "AUTO",  // required for Dynamic Links (default is AUTO if not specified)
    
      // Add the "rewrites" attribute within "hosting"
      "rewrites": [ {
        "source": "/promos/**",  // the Dynamic Links start with "https://CUSTOM_DOMAIN/promos/"
        "dynamicLinks": true
      }, {
        "source": "/links/share/**",  // the Dynamic Links start with "https://CUSTOM_DOMAIN/links/share/"
        "dynamicLinks": true
      } ]
    }
    

firebase.json 파일에서 동적 링크를 구성하려면 다음이 필요합니다.

필드 설명
appAssociation

AUTO 으로 설정해야 합니다.

  • 구성에 이 속성을 포함하지 않으면 appAssociation 의 기본값은 AUTO 입니다.
  • 이 속성을 AUTO 로 설정하면 Hosting은 요청 시 assetlinks.jsonapple-app-site-association 파일을 동적으로 생성할 수 있습니다.
rewrites
source

동적 링크에 사용하려는 경로

경로를 URL로 재작성하는 규칙과 달리 동적 링크에 대한 재작성 규칙은 정규 표현식을 포함할 수 없습니다.

dynamicLinks true 로 설정해야 합니다.

헤더 구성

선택 과목
헤더를 통해 클라이언트와 서버는 요청 또는 응답과 함께 추가 정보를 전달할 수 있습니다. 일부 헤더 집합은 액세스 제어, 인증, 캐싱 및 인코딩을 포함하여 브라우저가 페이지와 콘텐츠를 처리하는 방식에 영향을 줄 수 있습니다.

헤더 개체의 배열을 포함하는 headers 특성을 만들어 사용자 지정 파일별 응답 헤더를 지정합니다. 각 개체에서 요청 URL 경로와 일치하는 경우 지정된 사용자 지정 응답 헤더를 적용하도록 호스팅을 트리거하는 URL 패턴을 지정합니다.

headers 속성의 기본 구조는 다음과 같습니다. 이 예제는 모든 글꼴 파일에 대해 CORS 헤더를 적용합니다.

"hosting": {
  // ...

  // Applies a CORS header for all font files
  "headers": [ {
    "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
    "headers": [ {
      "key": "Access-Control-Allow-Origin",
      "value": "*"
    } ]
  } ]
}

headers 속성에는 정의 배열이 포함되어 있으며 각 정의에는 아래 표의 필드가 포함되어야 합니다.

필드 설명
headers
source (권장)
또는 regex

초기 요청 URL과 일치하는 경우 호스팅을 트리거하여 사용자 정의 헤더를 적용하는 URL 패턴

  • source 를 사용하여 glob 을 지정합니다 (권장) .
  • regex 를 사용하여 RE2 정규식을 지정합니다.

맞춤 404 페이지 와 일치시킬 헤더를 만들려면 404.htmlsource 또는 regex 값으로 사용하세요.

(하위) headers 배열

Hosting이 요청 경로에 적용하는 사용자 지정 헤더

각 하위 헤더에는 keyvalue 쌍이 포함되어야 합니다(다음 두 행 참조).

key 헤더의 이름(예: Cache-Control )
value 헤더 값(예: max-age=7200

동적 콘텐츠 제공 및 마이크로 서비스 호스팅을 설명하는 호스팅 섹션에서 Cache-Control 에 대해 자세히 알아볼 수 있습니다. CORS 헤더에 대해 자세히 알아볼 수도 있습니다.

.html 확장자 제어

선택 과목
cleanUrls 속성을 사용하면 URL에 .html 확장자를 포함해야 하는지 여부를 제어할 수 있습니다.

true 인 경우 호스팅은 업로드된 파일 URL에서 .html 확장자를 자동으로 삭제합니다. 요청에 .html 확장자가 추가되면 호스팅은 동일한 경로로 301 리디렉션을 수행하지만 .html 확장자는 제거합니다.

cleanUrls 속성을 포함하여 URL에 .html 포함을 제어하는 ​​방법은 다음과 같습니다.

"hosting": {
  // ...

  // Drops `.html` from uploaded URLs
  "cleanUrls": true
}

후행 슬래시 제어

선택 과목
trailingSlash 속성을 사용하면 정적 콘텐츠 URL에 후행 슬래시를 포함해야 하는지 여부를 제어할 수 있습니다.

  • true 인 경우 호스팅은 URL을 리디렉션하여 후행 슬래시를 추가합니다.
  • false 인 경우 호스팅은 URL을 리디렉션하여 후행 슬래시를 제거합니다.
  • 지정하지 않으면 호스팅은 디렉토리 인덱스 파일(예: about/index.html )에 대해 후행 슬래시만 사용합니다.

다음은 trailingSlash 특성을 추가하여 후행 슬래시를 제어하는 ​​방법입니다.

"hosting": {
  // ...

  // Removes trailing slashes from URLs
  "trailingSlash": false
}

trailingSlash 속성은 Cloud Functions 또는 Cloud Run에서 제공하는 동적 콘텐츠 재작성에는 영향을 미치지 않습니다.

글로브 패턴 매칭

Firebase 호스팅 구성 옵션은 Git이 gitignore 규칙을 처리하고 Bowerignore 규칙을 처리하는 방식과 유사하게 extglob과 함께 glob 패턴 일치 표기법을 광범위하게 사용합니다. 이 위키 페이지 는 더 자세한 참조이지만 다음은 이 페이지에서 사용된 예제에 대한 설명입니다.

  • firebase.jsonpublic 디렉토리의 루트에 있는 firebase.json 파일과만 일치합니다.

  • ** — 임의의 하위 디렉토리에 있는 모든 파일 또는 폴더와 일치

  • *public 디렉터리의 루트에 있는 파일 및 폴더만 일치합니다.

  • **/.* — 로 시작하는 모든 파일과 일치합니다 . (일반적으로 .git 폴더와 같은 숨겨진 파일) 임의의 하위 디렉토리

  • **/node_modules/**public 디렉터리의 임의 하위 디렉터리에 있을 수 있는 node_modules 폴더의 임의 하위 디렉터리에 있는 모든 파일 또는 폴더와 일치합니다.

  • **/*.@(jpg|jpeg|gif|png).jpg , .jpeg , .gif 또는 .png 중 정확히 하나로 끝나는 임의의 하위 디렉토리에 있는 모든 파일과 일치합니다.

전체 호스팅 구성 예

다음은 Firebase 호스팅을 위한 전체 firebase.json 구성 예시입니다. firebase.json 파일에는 다른 Firebase 서비스에 대한 구성 도 포함될 수 있습니다.

{
  "hosting": {

    "public": "dist/app",  // "public" is the only required attribute for Hosting

    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],

    "redirects": [ {
      "source": "/foo",
      "destination": "/bar",
      "type": 301
    }, {
      "source": "/firebase/**",
      "destination": "https://www.firebase.com",
      "type": 302
    } ],

    "rewrites": [ {
      // Shows the same content for multiple URLs
      "source": "/app/**",
      "destination": "/app/index.html"
    }, {
      // Configures a custom domain for Dynamic Links
      "source": "/promos/**",
      "dynamicLinks": true
    }, {
      // Directs a request to Cloud Functions
      "source": "/bigben",
      "function": "bigben"
    }, {
      // Directs a request to a Cloud Run containerized app
      "source": "/helloworld",
      "run": {
        "serviceId": "helloworld",
        "region": "us-central1"
      }
    } ],

    "headers": [ {
      "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
      "headers": [ {
        "key": "Access-Control-Allow-Origin",
        "value": "*"
      } ]
    }, {
      "source": "**/*.@(jpg|jpeg|gif|png)",
      "headers": [ {
        "key": "Cache-Control",
        "value": "max-age=7200"
      } ]
    }, {
      "source": "404.html",
      "headers": [ {
        "key": "Cache-Control",
        "value": "max-age=300"
      } ]
    } ],

    "cleanUrls": true,

    "trailingSlash": false,

    // Required to configure custom domains for Dynamic Links
    "appAssociation": "AUTO",

  }
}