Edited at

AWS(S3+CloudFront)でカスタム404ページの作成

More than 1 year has passed since last update.

サイト全体でのカスタム404設定という要件があったため、AWSコンポーネントのみで対応したときのメモ。


前準備

サイト全体は常時HTTPS対応していたため、CloudFrontでS3のウェブサイトをSSL化するを参考にし、カスタム404ページを配置。

Route53の設定については割愛。

メモ書きのため以下を利用


  • S3 Bucket Name


    • hoge.domain.jp



  • CloudFront Domain Name


    • hogefoo.cloudfront.net



  • 404 Page


    • 404.html




S3設定


Static website hosting

このバケットを使用してウェブサイトをホストするを選択

以下の設定で、S3の


  • インデックスドキュメント


    • 存在しないファイル名にしておく(hoge.htmlとか)



  • エラードキュメント


    • 設定しない



  • リダイレクトルール


    • 以下を記載



<RoutingRules>

<RoutingRule><!-- S3で存在しないパスを見るとAccessDenied(403) -->
<Condition>
<HttpErrorCodeReturnedEquals>403</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<HostName>hogefoo.cloudfront.net</HostName>
<ReplaceKeyWith/>
</Redirect>
</RoutingRule>
<RoutingRule>
<Condition><!-- おまじない的に404定義 -->
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<HostName>hogefoo.cloudfront.net</HostName>
<ReplaceKeyWith/>
</Redirect>
</RoutingRule>
</RoutingRules>


CloudFront設定


General


  • Default Root Object


    • 存在しないファイル名にしておく(hoge.htmlとか)


      • こうしておくことで、CloudFrontのRootにアクセス来た際に404になるため。






ErrorPage

Create Custom Error Responseで以下のHTTP Error Code二つを追加する。


  • HTTP Error Code


    • 403: Forbidden

    • 404: Not Found



  • Error Caching Minimum TTL (seconds)


    • 300(default)



  • Customize Error Response


    • Yes



  • Response Page Path


    • /404.html



  • HTTP Response Code


    • 404: Not Found




アクセス

Route53で上記CloudFrontを設定し、アクセスし、Status Codeなどのレスポンスを確認。

Status Code: 404 Not Found

X-Firefox-Spdy: h2
accept-ranges: bytes
age: nnnnn
content-length: nnnn
content-type: text/html
date: Thu, 11 Jan 2018 04:15:23 GMT
etag: "xxxxxxxxxxxxxxxxxxxxx"
last-modified: Wed, 10 Jan 2018 09:50:55 GMT
server: AmazonS3
via: 1.1 hogefoo.cloudfront.net (CloudFront)
x-amz-cf-id: xxxxxxxxxxx_xxxxxxxx==
x-cache: Error from cloudfront