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

やりたいこと

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的な勉強にもなります。

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

ポイントとしては、ディストリビューションではカスタムエラーを定義し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を返却してあげればうまく表示されるということです。

ReactをS3へデプロイ

作成されたS3のコンソール画面でReactの./build配下をアップロードします。

CloudFrontへアクセスして確認

クライアントからCloudFrontへアクセス（CloudFrontコンソール上のディストリビューションドメイン名でアクセス）すると、Reactの初期画面が表示されS3までリクエストが通っていることが分かります。

おしまい！

おまけ

S3へのデプロイはaws cliを使うとコマンド実行できるので、練習目的であればビルドとアップロードを同時に行うシェルを書いておくとデプロイが簡単になります。