배포 구성

firebase.json 파일

firebase init 명령은 프로젝트 디렉토리의 루트에 firebase.json 설정 파일을 생성합니다. 이 필수 파일은 배포할 때 게시할 파일을 지정하는 데 사용됩니다. firebase.json의 Firebase 호스팅 구성은 다음 형식과 유사합니다.

{
  "hosting": {
    "public": "app",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

기본 속성

아래에서는 기본 속성인 publicignore에 대해 자세히 설명합니다.

공개

"public": "app"

필수public 설정은 Firebase 호스팅에 업로드할 디렉토리를 firebase 명령어에 지정합니다. 이 디렉토리는 프로젝트 디렉토리 안에 반드시 있어야 합니다. 기본값은 'public'이라는 디렉토리입니다.

ignore

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

선택사항ignore 설정은 배포 시에 무시할 파일을 지정하는 선택적 매개변수입니다. git에서 .gitignore를 처리하는 방법과 동일한 방식으로 glob 정의를 사용할 수 있습니다.

고급 속성

firebase.json 파일에는 호스팅 구성에 대한 선택적 기타 매개변수가 몇 가지 있습니다. 여기에서 호스팅 구성 firebase.json 파일 전체를 확인할 수 있습니다. 아래에서는 이러한 선택적 매개변수를 자세히 설명합니다.

redirects

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

선택사항 - redirects 설정은 리디렉션 규칙 배열을 포함하는 선택적 매개변수입니다. 각 규칙은 source, destination, type을 지정해야 합니다.

source 매개변수는 모든 요청을 시작하는 시점에 해당 경로에 파일이나 폴더가 존재하는지 확인하기 전에 모든 URL 경로와 대조하는 glob 패턴입니다. 일치가 발견되면 'Location' 헤더가 정적 destination 문자열로 지정된 HTTP 리디렉션 응답이 설정됩니다. 이 문자열은 상대 경로이거나 절대 URL일 수 있습니다.

마지막으로, type 매개변수는 특정 HTTP 응답 코드를 지정하며 '영구 이동'을 나타내는 301 또는 '발견됨'(임시 리디렉션)을 나타내는 302일 수 있습니다.

리디렉션 캡처

리디렉션의 소스 URL 중 일부를 캡처하여 목적지에서 재사용해야 하는 경우가 있습니다. 이렇게 하려면 : 프리픽스를 사용하여 세그먼트를 식별하고 이름 뒤에 선택적으로 *를 사용하여 URL의 나머지 부분을 캡처하도록 지정하세요.

"redirects": [ {
  "source": "/blog/:post*",
  "destination": "https://blog.myapp.com/:post*",
  "type": 301
},
{
  "source": "/users/:id/profile",
  "destination": "/users/:id/newProfile",
  "type": 301
} ]

rewrites

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
} ]

선택사항rewrites 설정은 URL 재작성 규칙 배열을 포함하는 선택적 매개변수입니다. 위의 리디렉션의 경우와 마찬가지로 각 재작성 규칙은 source glob 패턴 및 로컬 destination(파일 형태로 존재해야 함)을 가져야 합니다. 재작성 규칙은 지정된 소스에 파일이나 폴더가 없을 때만 적용되며, HTTP 리디렉션 대신 지정된 목적지의 실제 파일 내용을 반환합니다.

위 예에서는 일치하는 업로드 파일이 없는 경우 모든 URL을 /index.html의 콘텐츠로 재작성합니다. 이 방법은 HTML5pushState를 활용하는 앱에 유용합니다.

headers

"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"
  } ]
}, {
  // Sets the cache header for 404 pages to cache for 5 minutes
  "source" : "404.html",
  "headers" : [ {
    "key" : "Cache-Control",
    "value" : "max-age=300"
  } ]
} ]

선택사항headers 설정은 맞춤 헤더 정의 배열을 포함하는 선택적 매개변수입니다. 각 정의에는 glob 표기법을 사용한 재작성 규칙과 관계없이 원래 요청 경로와 대조되는 source 키가 있어야 합니다. 또한 각 정의에는 각각 keyvalue를 포함해, 적용할 headers의 배열이 있어야 합니다.

위 예에서는 모든 글꼴 파일의 CORS 헤더를 지정하고 이미지 파일에 대해 브라우저의 기본값인 1시간 캐시를 2시간 캐시로 재정의합니다.

다음 헤더는 headers 구성을 사용하여 설정할 수 없습니다.

  • Strict-Transport-Security
  • Public-Key-Pinning
  • Set-Cookie

cleanUrls

"cleanUrls": true

선택사항cleanUrls 설정은 선택적 매개변수로서 true로 설정하면 업로드된 파일 URL에서 .html 확장자가 자동으로 삭제됩니다. .html 확장자가 추가된 경우 .html 확장자가 없는 동일한 경로로 301 리디렉션이 수행됩니다.

trailingSlash

"trailingSlash": false

선택사항trailingSlash 설정은 URL 맨 뒤에 슬래시를 붙일지 여부를 제어할 수 있는 선택적 매개변수입니다. true로 설정하면 URL을 리디렉션하여 맨 뒤에 슬래시를 추가합니다. false로 설정하면 URL을 리디렉션하여 맨 뒤의 슬래시를 삭제합니다. 지정하지 않으면 맨 뒤의 슬래시가 디렉토리 색인 파일(예: about/index.html)에만 사용됩니다.

Glob 패턴 일치

위에서 설명한 firebase.json 정의에서는 extglob의 glob 패턴 일치 표기법을 광범위하게 사용하며, 이는 Git가 gitignore 규칙을 처리하는 방법 및 Bower가 규칙을 무시하는 방법과 비슷합니다. 이 위키 페이지에서 자세한 내용을 확인할 수 있으며 위 예의 설명은 다음과 같습니다.

  • firebase.json은 공개용 디렉토리 루트의 firebase.json 파일과만 일치합니다.
  • **는 임의 하위 디렉토리의 모든 파일 또는 폴더와 일치합니다. 반면 *는 루트 디렉토리의 파일 및 폴더와만 일치합니다.
  • **/.*는 임의 하위 디렉토리에서 '.'으로 시작하는 모든 파일(일반적으로 .git 폴더와 같은 숨김 파일)과 일치합니다.
  • **/node_modules/**는 'node_modules' 폴더의 임의 하위 디렉토리에 있는 모든 파일 또는 폴더와 일치합니다. 'node_modules' 폴더는 공개용 디렉토리의 임의 하위 디렉토리에 있을 수 있습니다.
  • **/*.@(jpg|jpeg|gif|png)는 임의 하위 디렉토리에서 '.'에 'jpg', 'jpeg', 'gif' 또는 'png' 중 하나를 더한 결과로 끝나는 모든 파일과 일치합니다.

전체 호스팅 구성 예

{
  "hosting": {
    "public": "app",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "redirects": [ {
      "source" : "/foo",
      "destination" : "/bar",
      "type" : 301
    }, {
      "source" : "/firebase/*",
      "destination" : "https://www.firebase.com",
      "type" : 302
    } ],
    "rewrites": [ {
      "source": "/app/**",
      "destination": "/app/index.html"
    } ],
    "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
  }
}

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

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