はじめに

現在、SPA (React + Rails API) を活用した個人開発を進めています。フロントエンドのデプロイには AWS の S3 と CloudFront を採用したので、その構成についてまとめました。また、今後の拡張として、CSR (クライアントサイドレンダリング) の課題についても考察します。

なぜSPAか

SPA を採用した理由として、ビルド済みのアセットを CDN で配信し、動的なデータのやり取りを API サーバーで処理することで、必要なリソースを最小限に抑え、運用コストを低くできる点に注目したからです。この構成により、サーバー負荷を軽減しつつ、高速なコンテンツ配信を実現しています。

システム構成図

全体のシステム構成図は以下の通りです。フロントエンドの構成は赤線で囲った範囲になります。

S3 バケットに React のビルドファイルを格納し、CloudFront を経由して独自ドメインかつ HTTPS 通信でアクセスできる Web サイトを構築しました。特に CloudFront を活用することで、CDN (Content Delivery Network) を構成し、高速なコンテンツ配信を実現できます。

CDN とは

CDN (Content Delivery Network) とは、「Web サイトの表示やコンテンツ配信を高速化するネットワーク」のことです。

メリット

サーバーやネットワークの負荷軽減

CDN では、「エッジサーバー」と呼ばれる代理サーバーが「オリジンサーバー」(今回は S3) に代わってコンテンツを配信します。

エッジサーバーはオリジンサーバーからキャッシュしたコンテンツを保持しているため、リクエストがあるとオリジンサーバーにアクセスすることなくレスポンスを返せます。その結果、ネットワークの負荷を軽減し、応答速度を向上させます。

物理的距離の短縮

CDN のエッジサーバーは世界各地に分散しており、ユーザーから最も近いエッジサーバーがリクエストを処理します。

これにより、ユーザーとサーバーの物理的距離が短縮され、コンテンツの表示・配信速度を向上させることができます。

デメリット

古いコンテンツが配信される可能性

エッジサーバーが更新前のコンテンツをキャッシュしたままだと、新しいコンテンツが反映されず、古いデータが配信されてしまう可能性があります。

この問題を防ぐためには、キャッシュの有効期限 (TTL) を適切に設定したり、キャッシュを手動で無効化 (Invalidation) するなどの対応が必要です。

過去には、個人情報が掲載されたページがキャッシュされ、それが削除されずに第三者に見られてしまう「キャッシュ事故」が発生した例もあります。

今後の課題と CSR の課題

現在の構成では、ローカルで変更した内容を反映させるには、ビルドファイルを S3 にアップロードし、CloudFront のキャッシュを削除する必要があります。この作業を手動で行うのは煩雑なため、今後は CI/CD を導入し、自動化を進める予定です。

また、SPA では CSR (クライアントサイドレンダリング) を採用しており、初回ロード時に JavaScript の読み込みが必要なため、表示速度が遅くなることがあります。特に SEO や SNS でのプレビュー表示を考慮すると、以下の課題が発生します。

ページの初回表示速度の遅延
SEO への影響 (クローラーが適切にコンテンツを取得できない可能性)
SNS での適切なメタ情報の表示が困難

このような課題を考慮し、今後はキャッシュの最適化や、場合によっては静的サイト生成 (SSG) などのアプローチを検討していきます。

さいごに

S3 と CloudFront を活用したフロントエンドのデプロイを実現しました。しかし、キャッシュ管理やデプロイ作業の効率化が課題として残っています。

今後は CI/CD によるデプロイの自動化を進めつつ、CSR の課題を改善し、より快適な Web サービスを提供できるよう改善を続けていきたいと考えています。