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

サイト全体でのカスタム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