【ITニュース解説】Deploy a React SPA using AWS S3 and CloudFront

ウェブサイトの中でも、Reactのようなフレームワークを使って作られたシングルページアプリケーション（SPA）をインターネット上に公開する方法について解説する。この記事では、AWSのサービスであるS3とCloudFrontを組み合わせて、React SPAを高速かつ安全にデプロイする手法が紹介されている。システムエンジニアを目指す上で、このようなウェブアプリケーションのデプロイは非常に重要な知識となるため、その基本と具体的な仕組みを理解しよう。

まず、React SPAとは、ウェブブラウザ上で動くアプリケーションで、一度ウェブページを読み込むと、その後はページの再読み込みなしに内容が切り替わるタイプのアプリケーションだ。これは、HTML、CSS、JavaScriptといった静的なファイル群で構成されている。これらのファイルをどこに置き、どうやってユーザーに届けるかがデプロイの主な課題となる。

ここで登場するのが、AWSのAmazon S3（Simple Storage Service）というサービスだ。S3は、インターネット上で利用できる「クラウドストレージ」であり、写真や動画、ドキュメントなど、あらゆる種類のデータを保存できる。ウェブサイトのデプロイにおいては、React SPAを構成するHTML、CSS、JavaScriptファイルといった静的なコンテンツを保存する「ウェブサイトの倉庫」として利用される。S3は非常に堅牢で、大量のデータを安全に保存し、高い可用性でアクセスできることが特徴だ。

しかし、S3にファイルを保存しただけでは、世界中のユーザーが高速にアクセスできるとは限らない。ユーザーが遠い場所にいる場合、データの取得に時間がかかってしまう。この問題を解決するために利用するのが、AWS CloudFrontというサービスだ。CloudFrontはCDN（Content Delivery Network）と呼ばれ、世界中に分散配置されたデータセンター（エッジロケーション）を利用して、コンテンツを高速に配信する。ユーザーがウェブサイトにアクセスすると、最寄りのエッジロケーションからコンテンツが配信されるため、データ転送の遅延が大幅に短縮され、ウェブサイトの表示速度が向上する。CloudFrontは、S3に保存されたウェブサイトのファイルを「世界中に高速で配達する郵便局」のような役割を担うのだ。

この組み合わせの大きな利点の一つは、セキュリティとコスト効率の高さにある。記事では、S3バケット（S3内のファイルを保存する場所）へのパブリックアクセスを厳しく制限している。つまり、S3バケットが直接インターネットに公開されることを防ぎ、CloudFrontを通じてのみアクセスを許可する。これは、Origin Access Control（OAC）という仕組みと、S3バケットポリシーによって実現される。OACはCloudFrontとS3の間で安全な通信経路を確立し、S3バケットポリシーはCloudFrontディストリビューション（CloudFrontの設定単位）だけがS3バケットからファイルを取得できるような「許可証」の役割を果たす。これにより、ウェブサイトのコンテンツが不正にアクセスされるリスクを低減しつつ、CloudFrontの高速配信の恩恵を受けられる。

さらに、このデプロイパターンではAWS API Gatewayというサービスも利用されている。API Gatewayは、ウェブアプリケーションが利用するREST API（アプリケーションがデータをやり取りするためのインターフェース）を構築・管理するためのサービスだ。React SPAでは、サーバー側からデータを取得するためにAPIを利用することが一般的だが、ウェブアプリケーションとAPIが異なるドメインにある場合、セキュリティ上の制約（CORS、Cross-Origin Resource Sharing）によって通信がブロックされることがある。この記事のパターンでは、API Gatewayで設定されたAPIもCloudFront経由で公開することで、このCORSの問題をシンプルに解決している。CloudFrontがウェブアプリケーションのコンテンツとAPIの両方を同じドメインから提供することで、ブラウザのセキュリティ制限に引っかからずにAPIと通信できるようになる。

このような複雑なAWSの構成を手動で一つ一つ設定していくのは大変だ。そこで役立つのが、AWS CloudFormationというサービスだ。CloudFormationはIaC（Infrastructure as Code）という考え方に基づいており、AWSのサービスやリソースの構成をYAMLやJSON形式のコードファイルとして定義できる。このコードファイルをCloudFormationに渡すことで、S3バケット、CloudFrontディストリビューション、API Gatewayなど、必要なすべてのリソースが自動的に、かつ一貫性をもって構築される。手動での設定ミスを防ぎ、同じ環境を何度でも簡単に再現できるため、開発や運用において非常に強力なツールとなる。記事ではreact-cors-spa-stack.yamlというファイルに、これらのリソースの設計図が記述されている。

具体的なデプロイの手順は、まずCloudFormationのコマンドを実行して、この設計図に基づいてS3バケットやCloudFrontディストリビューションといったAWSリソースを構築する。次に、構築されたS3バケットの名前やCloudFrontのドメイン名といった重要な情報を取得する。そして、Reactアプリケーションをビルドし、生成された静的ファイル群（例：outフォルダー内のファイル）を、先ほど構築したS3バケットにアップロードする。これで、S3に保存されたファイルがCloudFrontを通じて公開され、ユーザーはCloudFrontのドメイン名にアクセスすることで、React SPAを利用できるようになる。

このデプロイ構成は、他にもいくつかの重要な設定を含んでいる。例えば、CloudFrontのデフォルトルートオブジェクトとしてindex.htmlが指定されている。これは、ユーザーがウェブサイトのルートURLにアクセスしたときに、どのファイルを最初に表示するかを定義するものだ。また、403（アクセス拒否）などのエラーが発生した場合に、index.htmlを返すように設定されている。これはSPA特有のルーティングの問題、つまり存在しないURLに直接アクセスされた場合でも、アプリケーションのメインページを表示させて、Reactルーターが正しいコンポーネントを表示できるようにするための工夫である。さらに、すべての通信がHTTPSにリダイレクトされるように設定されており、通信の安全性が確保されている。

このように、S3とCloudFrontを核として、API GatewayやCloudFormationといった様々なAWSサービスを組み合わせることで、React SPAを高速、安全、かつ効率的にデプロイできる。これは現代のウェブアプリケーション開発における標準的なパターンの一つであり、システムエンジニアとしてクラウド上でのウェブアプリケーション公開の基礎を理解するための良い出発点となるだろう。