🔖

はじめてのPages(4) _headres と _redirects を使ってみる

2023/07/09に公開

この記事は、久々のはじめてのPagesシリーズです。今日はレスポンスヘッダを修正する'_headers'とリダイレクトルールを作成する'_redirects_を触ります。

_headers

はHTTP Responseのヘッダーを書き換えたり追記したりする際に使います。Pagesのoutputフォルダ(staticのサイトであればindex.htmlなどと同じフォルダ）にtxt形式で作成しておきます。
書式は単純で以下の通りです。

[url]
  [name]: [value]

例えばほかのドメインのリソースからPagesのサイト上のリソースへアクセスを許可するクロスオリジンリソース共有(CORS)であれば以下のように記載します。

/*
  Access-Control-Allow-Origin: *

特定のフォルダのみに限定させる場合は

/api/*
  Access-Control-Allow-Origin: *

のようになります。curlでデプロイが行われたサイトを叩くと以下のように戻ってきます。

PS C:\Users\HarunobuKameda> curl.exe -k -X HEAD -I https://0e38edd8.ehtest.pages.dev/
HTTP/2 200 
date: Sun, 09 Jul 2023 04:55:51 GMT
content-type: text/html; charset=utf-8
access-control-allow-origin: *

その他よく使う物を例に挙げます。
:Google Bot等を除外する場合

/*
  X-Robots-Tag: noindex

リファラーを取得しない場合

/*
Referrer-Policy: no-referrer

詳しくはこちらのドキュメントを参照してください。

_redirects

こちらはユーザーリクエスト時のリダイレクトルールの設定に利用されます。'_headers'と同様にプロジェクトのoutputフォルダ（staticのwebの場合はindex.htmlなどと同じ場所）に配置します。

基本的は書式は以下の通りです。

[source] [destination] [code?]

ステータスコードはあってもなくても構いません。その場合デフォルトで302が付与されます。
例えば'index.html'にアクセスしてきた場合、'/'へリダイレクトさせる場合、以下のような書式になります。

/index.html / 301

その他よく使われるものとしては、
:特定ディレクトリへのアクセスを別の外部サイトにリダイレクトさせる場合

/yahoo https://www.yahoo.com

:タイポが頻発する際の補正

/install /installation/

その他利用方法はこちらを参考にしてください。

こちらはルールは合計2100件、１個のルールが1000文字まで、という制限があります。

_headers

_redirects

Discussion