デプロイ構成

firebase.json ファイル

firebase init コマンドを実行すると、firebase.json 設定ファイルがプロジェクト ディレクトリのルートに作成されます。この必須ファイルを使用して、デプロイ時にどのファイルを公開するかを設定します。firebase.json 内の Firebase Hosting 設定は次のようになります。

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

デフォルト プロパティ

デフォルト プロパティの publicignore について詳しくは、下記をご覧ください。

public

"public": "app"

必須 - public によって、Firebase Hosting へのアップロードに使用するディレクトリを firebase コマンドに指示します。このディレクトリはプロジェクト ディレクトリ内に置かれた、実在のディレクトリである必要があります。デフォルト値は「public」というディレクトリです。

ignore

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

省略可 - ignore は、デプロイ時に無視するファイルを指定する、省略可能なパラメータです。Git の .gitignore と同じように glob 定義を使用できます。

詳細プロパティ

firebase.json ファイルには Hosting 設定用のオプション パラメータが他にもいくつかあります。firebase.json ファイルの Hosting の完全な設定の例をこちらでご覧いただけます。これらのオプション パラメータについて詳しくは、下記をご覧ください。

redirects

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

省略可 - redirects は、リダイレクト ルールの配列を含む省略可能なパラメータです。ルールごとに sourcedestinationtype を指定する必要があります。

source パラメータは、各リクエストの開始時(対象のパスにファイルまたはフォルダが存在しているかどうかを確認する前)に、すべての URL パスに対して照合される glob パターンです。一致するパスが見つかると、静的な destination 文字列で設定された "Location" ヘッダーを持つ HTTP リダイレクト レスポンスが設定されます。このヘッダーは相対パスまたは絶対 URL で指定できます。

最後に type パラメータで、表示する特定の HTTP レスポンス コードを指定します。これは、301 (「Moved Permanently」)または 302 (「Found」(Temporary Redirect))に指定できます。

リダイレクトのキャプチャ

リダイレクトのソース 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 リライトルールの配列を含む省略可能なパラメータです。前述の redirects と同様、リライトルールごとに source glob パターンとローカルの destination(実在のファイルである必要があります)が必要です。リライトルールは、指定されたソースにファイルまたはフォルダが存在しない場合にのみ適用され、HTTP リダイレクトする代わりに、転送先にあるファイルの実際のコンテンツを返します。

前述の例では、一致するアップロード ファイルが存在しない場合に、任意の URL を /index.html のコンテンツにリライトしています。これは HTML5 pushState を利用しているアプリに便利です。

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 は、カスタム ヘッダー定義の配列を含む、省略可能なパラメータです。定義ごとに source キーが必要であり、glob 表現を使用したリライトルールに関係なく、この値が元のリクエストパスと照合されます。また、定義ごとに適用される headers の配列(それぞれ keyvalue を持つこと)も必要です。

前述の例では、すべてのフォント ファイルに 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 定義では、Git で .gitignore ルールを処理する場合や Bower で ignore ルールを処理する場合と同様に、extglob を使用する glob パターン マッチング表記を広範に使用します。より詳しい参考資料としてこの Wiki ページも活用できますが、上記の例についての説明を次に示します。

  • firebase.json は、パブリック ディレクトリのルートにある firebase.json ファイルにのみ一致します。
  • ** は、任意のサブディレクトリ内にあるファイルまたはフォルダと一致します。* はルート ディレクトリ内のファイルとフォルダにのみ一致することに注意してください。
  • **/.* は、任意のサブディレクトリ内にある「.」で始まるファイル(通常は .git フォルダなどの非表示ファイル)と一致します。
  • **/node_modules/** は、「node_modules」フォルダの任意のサブディレクトリ内にあるファイルまたはフォルダと一致します。「node_modules」フォルダ自体がパブリック ディレクトリの任意のサブディレクトリとなります。
  • **/*.@(jpg|jpeg|gif|png) は、任意のサブディレクトリ内にあるファイルで、「.」に続いて「jpg」、「jpeg」、「gif」、「png」のいずれかで終了するものと一致します。

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

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。