株式会社クイックのWebサービス開発blog

HAPPYなサービスプランナー・エンジニア・デザイナーのブログです。

【AWS CloudFront + S3】「404 NotFound」を表示させる方法

こんにちは。クイックSREチームのみっちーです。
今日はCloudFront+S3を利用時に役立つ小ネタをご紹介します。

ファイルが無くても「403 Forbidden」を返すS3

普段CloudFrontのオリジンとして、S3を利用している方は多いと思います。
ただこのS3、存在しないファイルへアクセスしたときも、「403 Forbiddenを返す」という特徴があります。
(本当?と思ったそこのあなた、このあとテスト結果を公開してますよ!)

「ファイルが無いんだったら、403じゃなくて404 NotFoundを返してよ」って思いませんか?
(思いますよね?はい。自分は思います。どっちなのかわからない!)

「本当にファイルが無いのか、ファイルのアクセス権限が無いだけなのか」を毎回調べるのもちょっと面倒なのが本音じゃないでしょうか。
そんなあなたにぜひお届けしたい!今回の小ネタはこちら✧(・ㅂ・)و

目次

1. 概要

2. 設定方法

1. 概要

CloudFront + S3の構成の場合、前述の通り「存在しないファイルへアクセスした場合でも403 Forbidden」を返します。
それが嫌な場合に、正しいステータスコードである「404 NotFoundを返す」ようにする設定方法です。

前提として、CloudFront(cf.919.test でDNS設定済み)のオリジンとしてS3を設定済みであるとします。
※ S3のStaticWebSiteHosting設定はONでもOFFでもどちらでもOKです。

・ 構成イメージ

f:id:aimstogeek:20180727181305p:plain

この時、「アクセス権限がないファイル」と「存在しないファイル」にアクセスすると、それぞれ挙動はどうなるでしょうか。
bucket policyで、「そのbucket内のファイルはすべて閲覧可能」な状態としてあるとします。)

・ アクセス権限がないファイル

f:id:aimstogeek:20180727181318p:plain f:id:aimstogeek:20180727181341p:plain

・ 存在しないファイル

f:id:aimstogeek:20180727181352p:plain f:id:aimstogeek:20180727181404p:plain

このように、どちらも同じ結果(403 Forbbden)が返ります。

これを以下のように設定したいとします。

存在しないファイル にアクセスした時は、
「error.html を表示し、404 NotFoundを返す」ようにしたい。

f:id:aimstogeek:20180727181415p:plain

2. 設定方法

それでは設定方法です。

CloudFront 側の設定

CloudFrontの管理コンソールから、以下の手順で設定を行います。
[CloudFront Distributions] -> [該当のCloudFrontをクリック] -> [Error Pages タブ] -> [Create Custom Error Response] f:id:aimstogeek:20180727181552p:plain

  • HTTP Error Code : 403 Forbidden
    オリジン(今回はS3)が返却するステータスコード を入力します。
    S3の場合は前述の通り、存在しないファイルでも403を返します。

  • Error Caching Minum TTL(Seconds) : 300
    「Response Page Path」で指定するファイルのキャッシュ時間です。
    任意値で設定します。

  • Customize Error Response : Yes
    カスタムファイルであるerror.htmlを表示させたいので「Yes」を選択します。

  • Response Page Path : /error.html
    カスタムファイルのPathを指定します。
    /error.html とした場合、アクセスURLはhttps://cf.919.test/error.html となります。

  • HTTP Response Code : 404 NotFound
    条件に合致して「Response Page Path」のファイルを表示した際に、「CloudFrontがクライアントに返却するステータスコード」を指定します。

これらの設定が終わったら[Create]を押します。 後は、Statusが「In Progress」から「Deployed」に変わるのを待ちましょう。

S3 側の設定

その間に、S3にerror.html をアップロードします。 アップ先(ファイル名)は、先程CloudFrontで設定した「Response Page Path」と同じにしてください。

アクセス確認

これで存在しないファイルへアクセスした場合は、error.htmlが表示されるようになりました。 f:id:aimstogeek:20180727181415p:plain f:id:aimstogeek:20180727181432p:plain

※ ちなみにこの状態でアクセス権限がない場合は「403 Forbidden」が返ります。

以上で終了です。
少しでもお役に立てば幸いです~ではでは!



\\『明日のはたらくを創る』仲間を募集中です!! // 919.jp