ENGINEERING ARTICLE
CloudFrontと非公開S3で独自404ページを表示する方法｜OAC構成に対応
この記事は約3分で読めます
こんにちは、 @Manabu です。
CloudFrontとS3で静的サイトを公開する場合、存在しないURLへアクセスした時にも、サイトのデザインに合った404ページを表示したいですよね。
ただ、OACを使ってS3を非公開にしている構成では、存在しないファイルに対して403が返る場合があります。
今回は、CloudFrontのカスタムエラーレスポンスを使って、独自の404ページを表示する方法を紹介します。
この記事は、以下のような方におすすめです。
こんな方におすすめ
- CloudFrontと非公開S3で静的サイトを公開している
- 存在しないURLへ独自の404ページを表示したい
- 404ページが200で返るソフト404を避けたい
404ページをS3へ配置する
最初に、サイトと同じS3バケットへ404ページを配置します。
/404.html
404ページ内のCSSや画像は、通常ページと同じようにルート相対パスで読み込めます。
<link rel="stylesheet" href="/assets/style.css">
CloudFrontのカスタムエラーレスポンス
CloudFrontのディストリビューションを開き、エラーページからカスタムエラーレスポンスを作成します。
404に対しては、次のように設定します。
| 項目 | 設定値 |
|---|---|
| HTTPエラーコード | 404 |
| レスポンスページのパス | /404.html |
| HTTPレスポンスコード | 404 |
| エラーキャッシュの最小TTL | 検証中は短い値 |
レスポンスコードを200へ変更すると、検索エンジンから通常ページとして認識されるソフト404になる可能性があります。
403も確認する
OACを設定したS3バケットオリジンでは、存在しないオブジェクトへのアクセスで403が返ることがあります。
実際に存在しないURLへアクセスし、ブラウザの開発者ツールやcurlでレスポンスコードを確認します。
curl -I https://example.com/not-found-page/
403が返る場合は、403に対しても/404.htmlを表示するカスタムエラーレスポンスを設定します。
ただし、S3のバケットポリシーやOAC設定が間違っている場合も403になります。正常なページまで403になる場合は、404設定ではなくS3へのアクセス権限を確認してください。
CloudFront Functionとの関係
ディレクトリ形式のURLをCloudFront Functionでindex.htmlへ変換している場合、存在しないURLも次のように変換されます。
/unknown-page/
↓
/unknown-page/index.html
変換後のファイルがS3に存在しないため、CloudFrontのカスタムエラーレスポンスによって/404.htmlを返します。
URL書き換えの実装は、以下の記事を参考にしてください。
REFERENCEOACで非公開S3を使う静的サイト！CloudFront Functionでindex.htmlへ変換IT自習室↗動作確認
設定後は、次の内容を確認します。
- 存在しないURLで独自404ページが表示される
- HTTPステータスコードが404になっている
- CSSや画像が表示される
- 正常な記事ページは200で表示される
- CloudFrontのキャッシュ削除後も同じ結果になる
まとめ
今回は、CloudFrontと非公開S3の構成で、独自404ページを表示する方法を紹介しました。
存在しないファイルが403と404のどちらになるか確認し、最終的なレスポンスコードは404にすることがポイントです。
404ページだけでなく、S3やOACの権限設定に問題がないことも一緒に確認しましょう。