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

호스팅 동작 구성

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

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

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

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

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

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

  • 다음 목적을 위해 rewrites 를 설정합니다.

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

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

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

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

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

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

호스팅 응답의 우선 순위

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

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

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

배포할 파일 지정

기본 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 를 처리하는 것과 같은 방식으로 globs 를 사용할 수 있습니다.

다음은 무시할 파일의 기본값입니다.

"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에 대한 리디렉션으로 응답하는 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 유형 사용
  • '찾음'에 302 유형 사용(임시 리디렉션)

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

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

재작성 구성

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

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

객체 배열을 포함하는 rewrites 속성을 생성하여 URL 재작성을 지정합니다("재작성 규칙"이라고 함). 각 규칙에서 요청 URL 경로와 일치하는 경우 호스팅이 서비스에 지정된 대상 URL이 제공된 것처럼 응답하도록 트리거하는 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에 배포하면( 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에 배포한 후( 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 로 설정하면 호스팅에서 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 배열

호스팅이 요청 경로에 적용하는 사용자 정의 헤더

각 하위 헤더에는 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 패턴 일치 표기법을 광범위하게 사용합니다. 이 wiki 페이지 는 더 자세한 참조이지만 다음은 이 페이지에서 사용된 예제에 대한 설명입니다.

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

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

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

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

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

  • **/*.@(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",

  }
}