Coding Log


Firebase Hosting 포스팅에 앞서

본 카테고리는 작년부터 구글이 밀고 있는 Serverless인 Firebase의 Hosting에 관하여 다룬다.

일반적인 호스팅 서비스와는 다르게 정적 페이지만을 호스팅해주는 서비스로 각각 장단이 존재한다.

Firebase의 많은 서비스 중 Hosting에 대해 정리해본다.

참고 Firebase 공식 사이트

참고 Firebase Korea Facebook Group

참고 Firebase Korea Github

Firebase Hosting Full-Configuration

지난 포스팅에서 Firebase의 Hosting의 구성 파일인 firebase.json에 대해 간략하게 살펴보았다.

Firebase는 자동으로 생성되는 public과 ignore뿐만 아니라 많은 속성값들을 지원하다.

이번 포스팅에선 구성 파일의 속성들에 대해서 다뤄보겠다.

먼저 Hosting 구성 파일의 전체 예시 코드를 보자.

{
  "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
  }
}

보다시피, public과 ignore 말고도 굉장히 많은 속성들이 존재한다.

복습을 겸해 하나씩 하나씩 다시 알아보자.

public(필수)

"public": "app"

Firebase Hosting에 배포할 디렉토리명을 지정한다.
기본적으로 생성된 디렉토리명은 public이며, 이 디렉토리는 프로젝트 폴더 안에 있어야 한다.

ignore(옵션)

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

프로젝트 폴더 내에 있지만 배포하지 않을 파일 및 경로를 지정한다.
git의 .gitignore와 동일한 방법으로 사용한다.

redirects(옵션)

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

페이지를 리디렉션 하려면 sourcedestinationtype 3가지를 지정해야 한다.
이는 배열이기 때문에 여러 페이지의 리디렉션을 설정할 수 있다.
위의 예시를 보면 *.com/foo를 *.com/bar로 리디렉션하는 것과 *.com/firebase/*에 해당하는 모든 URL을 https://www.firebase.com으로 리디렉션 하는 것을 할 수 있다.

source에 지정된 값들이 지정된 경로에 파일과 폴더가 존재하는 지 확인하고 존재한다면 Location 헤더에 의해 리디렉션에 설정된다.

type에는 영구 이동 을 나타내는 301발견됨 뜻하는 302를 지정할 수 있다.

리디렉션 작성시 URL의 일부를 파라미터로 재사용해야 하는 경우(RESTful을 생각하면 이해하기 쉽다) 파라미터 영역을 캡쳐하도록 지정할 수 있다.

: 를 사용하면 접두사를, *를 사용하면 파라미터 뒷 부분을 캡쳐하도록 지정할 수 있다.

참고 위의 파라미터라는 용어는 이해를 돕기위한 용어로, 공식 문서에서는 세그먼트로 언급된다.

아래의 예시를 코드를 참고하자.

"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 재작성 규칙 배열을 포함하는 속성이다.

리디렉션과 유사하게 glob 패턴과 실제로 존재하는 파일을 이용해 재작성하며, source에 파일이나 폴더가 없을 때 미리 지정해둔 destination의 파일을 렌더링하여 같은 내용의 컨텐츠를 여러 URL에서 표시할 수 있게 해준다.

위의 예제 코드를 보면 실제 파일이 없는 모든 URL에 대하여 /index.html의 파일을 렌더링함을 알 수 있다.

headers(옵션)

"headers": [ {
  // 모든 끌꼴 파일에 대한 `Access-Control-Allow-Origin` 헤더 지정
  "source" : "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
  "headers" : [ {
    "key" : "Access-Control-Allow-Origin",
    "value" : "*"
  } ]
}, {
  // 모든 이미지 파일에 대해 2시간(7200초)의 캐시를 브라우저에 지정
  "source" : "**/*.@(jpg|jpeg|gif|png)",
  "headers" : [ {
    "key" : "Cache-Control",
    "value" : "max-age=7200"
  } ]
}, {
  // 404.html 페이지의 헤더를 5분(300초)동안 캐시하도록 지정
  "source" : "404.html",
  "headers" : [ {
    "key" : "Cache-Control",
    "value" : "max-age=300"
  } ]
} ]

headers는 렌더링되는 페이지의 헤더를 정의할 수 있는 속성이다.

속성내 배열에는 source에 glob 표기법을 사용하여 특정 파일의 종류나 실제 컨텐츠 파일을 지정하고 해당 source에 헤더값을 지정해준다.

만약 source에 지정된 파일이나 폴더를 찾을 수 없으면 404.html로 연결하도록 맞춤 오류 페이지를 지원할 수 있다.

위의 예시 코드에서는 모든 끌꼴 파일에 대한 Access-Control-Allow-Origin 헤더를 지정하고 모든 이미지 파일에 대해 2시간(7200초)의 캐시를 브라우저에 지정한다.

헤더에 쓸수 있는 key는 아래와 같다.

  • Cache-Control

  • Access-Control-Allow-Origin

  • X-UA-Compatible

  • X-Content-Type-Options

  • X-Frame-Options

  • X-XSS-Protection

  • Content-Type

  • Link

  • Content-Security-Policy

cleanUrls(옵션)

"cleanUrls": true

cleanUrls 속성을 true로 지정하면 배포된 파일의 URL에서 *.html 확장자가 삭제된다.

즉 https://www.example.com/a.html이 https://www.example.com/a 형식의 URL로 보여진다.

만약 URL에 https://www.example.com/a.html로 직접 접근한다면 https://www.example.com/a위치의 파일을 찾아 type : 301로 리디렉션한다.

trailingSlash(옵션)

"trailingSlash": false

trailingSlash 옵션은 URL 끝의 /의 제거 여부를 결정한다.

true일 경우엔 /를 추가하고 false일 경우엔 제거한다.

trailingSlash 옵션을 지정하지 않으면 about/index.html과 같은 색인 파일에서만 사용 된다.

DISQUS 로드 중…
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다