SPAのWebサイトをS3×CloudFrontで設定する時はリダイレクト設定!403/404のAccessDenyを解消する

AWS

こんにちはますのです。
あれこれAWSで遊んでいます。構築用のサンプルとかお借りしながらで、やはりコードに関しては分かりませんなぁという。

S3へのアップロード→CloudFrontへの設定を完了させたのですが、エラーが出てアクセス出来ないのです。

Chromeのディベロッパーツールで見たところ403や404エラーが出ているようです。

S3のアクセス権限やネットワーク周りの変更をしても変わらず煮詰まっていた時、作者様のWebサイトを徘徊していたらこんな内容がありました。

SPAをCloudFrontで公開する時には、カスタムエラーレスポンスの設定が必須
今回アプリとしてデプロイしているのは、Vue.jsで作ったいわゆるSPA(Single Page Application)です。
引用:【VueSlsApp】CloudFrontでHTTPS化してみた

SPAって何ですかぁぁぁっていうレベルの知識なのです。
Webサイトの階層で「~.jp/login」でアクセスしてるけど、S3には「login」っていう階層は存在しないからエラーになっちゃうのよって理解しました。
参考:SPA(Single Page Application)ってなに?

作者様のサイトでは、TeraformでCloudFrontの構築手順が記載されていましたが、手動で設定しました。
CloudFront、消すのに結構時間掛かるのでメンドクサイというのと、せっかくなので触ってみたいということで、設定した内容を以下綴っていきます。

設定はCloudFrontに2つのみ!

ややこしい設定が必要なのかと思いましたが、設定の追加は2つと以外と簡単でした。

  • 404エラーの場合:コード200に書き換えて、/index.htmlにリダイレクトする
  • 403エラーの場合:コード200に書き換えて、/index.htmlにリダイレクトする

今回エラーが起きている原因は「存在しないページへアクセス」しているからです。
そのため、その情報を書き換えてリダイレクトしてあげるという処理のようですね。細かいことは分からんですが。

CloudFrontの「Error Pages」に設定を追加する

まずはCloudFrontを開きます。

Distributions>タブ:ErrorPages>CreateCustomErrorResponseをクリック

リダイレクト時の処理を設定>「Create」をクリック

・HTTP Error Code:403:Forbidden
・Customize Error Response:Yes
・Response Page Path:/index.html ※アクセス出来るパス等を記載する
・HTTP Response Code:200:OK

こんな感じに出来ればOKです。
404に関しても同じく「CreateCustomErrorResponse」から「HTTP Error Code:404」を選択して、他は同じ設定で完了です。

余談:S3の静的アクセスを設定してもアクセスできた。しかし…。

当初はCloudFrontの「Origin Setting」のドメイン名を変更して「アクセス出来た!」と喜んでいました。

S3バケットのアクセス権限もフルアクセス権限を付与し、バッチリ!と思ったらアクセス出来るのは「/index.html」のみでした。
そりゃそうですよね。S3の静的サイトで実在するデータにアクセスしてるのですから。

なので、SPA(Single Page Application)のサイトをS3×CloudFrontにする場合はリダイレクト設定をして、REST APIのエンドポイントに設定する必要があるようです。

【Origin Domain Name】※REST APIエンドポイント
(ドメイン名).s3.amazonaws.com
REST API?SPA?などの理解出来ていないものを扱って四苦八苦しましたです。
未だに良くわかってないですが、サンプルコードを拾ってこのあたりを感覚として触れたのは良い機会になりました。今後Webサービス扱う機会があったときの糧になればよいなと感じたであります。

最新情報をチェックしよう!