Reactを使ったSPAの運用方法（デプロイ、ロールバック、メンテナンス）
2022.02.28
SPA（Single Page Application）のコンテンツを配信する方法を調べると、よくAmazon CloudFrontとAmazon S3（Amazon Simple Storage Service）を利用する方法が出てきます。
しかし、デプロイ、ロールバック、メンテナンス（古いコンテンツの削除）に関する情報があまりなく、運用に困る方もいらっしゃると思います。
そこで今回は、私が編み出したReactを利用したSPAの運用方法をご紹介します。
はじめに
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のコスト・構成・可用性の無料最適化診断サービスなどをご提供しています。
気になる方がいらっしゃいましたら、ぜひお気軽にご相談ください。 最後までお読みいただきありがとうございました。
