はじめに

ReactなどでSPAを開発して公開する場合、AWSではCloudFrontとS3の構成にしましょうという情報がとても多く出てくると思います。

S3のレプリケーション機能でS3をマルチリージョンで運用し、CloudFrontのOriginGroupに、それぞれのS3バケットを指定すると、AWSのリージョン障害にも対応でき、全リージョン障害ではない限りは、継続してサービスを提供できる障害にとても強いインフラ構造になるためです。

しかし、紹介される多くの情報では、継続して機能の追加や改修がある場合、どうすれば良いのかの情報があまりありません。

SPA（Single Page Application）とは

ページを遷移するとき、毎回HTMLを読み込まず、JavaScriptがDOMを組み立てるため、一つのページのみでできているWebアプリです。動的なデータは、APIサーバーから取得するため、データが揃っていない状態でもページを表示することができ、取得できたところから必要な場所のみ表示を更新するため、リッチなUIを開発することができます。

動的なデータはAPIサーバーから取得するため、Reactなどで開発したSPAは、静的ファイル(HTML、JavaScript、CSS)を配信するだけで済みます。

本記事で紹介する、機能要件

そこで今回は、以下の要件を満たす方法をご紹介します。

指定したタイミングで公開される

問題が発生したときには動作していたバージョンに戻せる

使われなくなったコンテンツは削除できる

> AWSの運用監視代行サービス – 詳細はこちら

失敗例

要件を満たすように初めに行った方法は、次のコマンドの通りにアプリをビルドし、バージョンごとにS3に保存する方法です。

npm run build
aws s3 sync build s3://my-bucket/${VERSION}

CloudFrontのオリジンパスに${VERSION}を指定することで、コンテンツを切り替える方法しました。

発生した問題点

この方法で新しいバージョンのデプロイを行うと、ブラウザでページを再読み込みしたタイミングで画面が真っ白になるという事象が発生しました。

原因は、古いキャッシュが、新しいバージョンに存在しないファイルを利用するため、404エラーとなり、この問題が発生したようです。キャッシュがすべて新しいものに切り替わると、正常にページが表示されるようになりました。

成功した方法

そこで、古いキャッシュを利用しても古いファイルを返すことができる構成を検討しました。検討した結果、URLのパスにバージョンを含めるようにしました。

バージョンを含める方法

export PUBLIC_URL=/$VERSION/
npm run build
aws s3 sync build s3://my-bucket/${VERSION}
aws s3 cp s3://my-bucket/${VERSION}/index.html s3://my-bucket/

バージョンの切り替えは、各バージョンの index.html を RootIndexと置き換えることで実現しました。

この構成のメリット

Index.htmlを差し替えることで、バーションを切り替えることができるので、キャッシュが切り替わるタイミングで新しいバージョンになります。

また、古いキャッシュを参照しても、ファイルが存在するためエラーになりません。ディレクトリごとにバージョンを分けているので、既に使わないバーションを簡単に削除することができます。

> AWSの運用監視代行サービス – 詳細はこちら

まとめ

SPAをどのように運用していくのかの情報があまりなく、私が実施した方法をご紹介しました。ぜひお試しください。

最後に、当社ではAWSを8%割引でご利用いただける 請求代行サービス や AWSの運用監視サービス、 AWSのコスト・構成・可用性の無料最適化診断サービスなどをご提供しています。

気になる方がいらっしゃいましたら、ぜひお気軽にご相談ください。 最後までお読みいただきありがとうございました。