質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Amazon CloudFront

Amazon CloudFrontは、AWSの高速且つ高パフォーマンスなコンテンツ配信(CDN) サービス。容量の大きいコンテンツをキャッシュさせてWebサーバの負荷を軽減し、サーバダウンの防止など安定した配信が可能になります。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

2852閲覧

CloudFront + S3でSPAを配信するときに404エラーをきちんとステータスコード404で返したい

pen_ari

総合スコア50

Amazon CloudFront

Amazon CloudFrontは、AWSの高速且つ高パフォーマンスなコンテンツ配信(CDN) サービス。容量の大きいコンテンツをキャッシュさせてWebサーバの負荷を軽減し、サーバダウンの防止など安定した配信が可能になります。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2022/04/18 09:49

reactで作成されたSPAをリソースをS3に配置してAWS CloudFront経由で配信しています。
SPAをS3で配信する場合、cloudFrontの設定で404エラー時のカスタムエラーレスポンスでindex.htmlをレスポンスコード200にて指定することが一般的かと思います
https://dev.classmethod.jp/articles/s3-cloudfront-spa-angular-403-access-denied/
(リンクは403エラーですが、権限が足りていれば404エラーになる為、404エラー時の設定を実施)
上記設定を行うと、SPAとして本当に404を返したい場合にレスポンスコード200で返ってしまいます

どうにか404でレスポンスを返したのですが、簡単に設定できる方法はありますでしょうか?
現状案としては以下です
a:別でもう一つCloudFrontを作成し、reactの404ページではそこに向けてリクエストをリダイレクトする。もう一つのcloudFrontではカスタムエラーレスポンスでerror用のhtmlとレスポンスコード404を指定する
b(実現可能か不明):S3の設定でそのオブジェクトを返す時のデフォルトレスポンスコードの様なものが設定できればそこで404を設定し、reactからはそのオブジェクトURLへリダイレクトする

似たような事象にはまって解決したような記事でもあれば良いのですが、あまり見つからず。参考情報などいただけると幸いです

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

SPAとして本当に404を返したい場合

この部分のイメージ(ユースケース)がイマイチ湧きませんでした。
単に404用のページを作成し、200OKのレスポンスとともに表示させるのでは不十分ということでしょうか?

投稿2022/05/17 13:01

ninja250r

総合スコア152

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問