AWS
S3
CloudFront

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

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