ReactをS3へデプロイしてCloudFrontで公開する【React,AWS】

2021-10-262022-11-12

やりたいこと

ReactをS3へアップロードして

CloudFront経由でHTTPアクセスしたい

できたらしあわせ

AWS構成とそれぞれの役割

構成図

今回は、シンプルにHTTPアクセス。
※Route53とCertificateManagerを絡めるとHTTPSでのアクセスができます。

それぞれの役割

React

フロントエンドのSPAフレームワーク（Facebook社製）

自分でHTML作ったり、APIを叩いたりして画面を表示してくれる。

S3

Amazon Simple Storage Service（Amazon S3）

安くていろんな方法でアクセスできて、99.999999999% (イレブンナイン)の耐久性を誇るオブジェクトストレージサービス

今回はReactのファイル群をデプロイする。

Origin access identityという機能を使用して、CloudFrontからのアクセスを通す。

CloudFront

Amazon CloudFront

いわゆるCDNサービス

オリジンからコンテンツを取得してキャッシュしてくれる。更に、Amazonで発行した証明書をアタッチできるのでHTTPS通信の入り口にできる。

今回はクライアントからのアクセスを受付け、オリジンであるS3へコンテンツをとってくる役割。

CloudFrontとS3をCloudFormationで作る

AWSコンソールから作成してもいいですが、後片付けを考えるとCloudFormationのほうが良いです。
DevOps的な勉強にもなります。

シングルテンプレートです。

CloudFormationテンプレート

テンプレートでやっていること。上から順に。

S3バケット定義
CloudFrontキャッシュポリシー定義
CloudFrontリクエストポリシー定義
CloudFrontディストリビューション定義
オリジンアクセスID定義

ポイントとしては、ディストリビューションではカスタムエラーを定義しS3から403が返却された場合にindex.htmlへ飛ばし200で返却する部分

ReactはSPA（シングルページアプリケーション）なので、URLはダミーになります。

例えば、http://example.com/articles/1へアクセスしてもhttp://example.com/index.htmlを返却する必要があります。

CloudFrontもS3もそんなことは知らないので、CloudFrontはS3のarticles/1をリクエストし、結果S3は403エラーを返却します。そこで、CloudFrontのカスタムエラーレスポンスでindex.htmlを返却してあげればうまく表示されるということです。