最近 S3とCloudFrontでReactJSアプリの運用コストを削減 できる方法が効果的ではないかかという悩みがインタネット上で頻度が高く寄せられています。 ここ数ヶ月、サーバー担当者として弊社最大規模のプロジェクトにジョインしていました。規模が大きいですから、お客様がAWSに支払わなくてはならないコストの大きさも半端ではありません。ジョインから3ヶ月ぐらいの時に、運用の安定性を保ったままコストを削減できる方法はないかと、リクエストを頂きました。 色々考えた末、１つの点に思い当たりました。すべてのソースコードはElasticBeanstalk経由でEC2にデプロイされています。AWSの費用が決して安くないことは皆さんもご存知でしょう。 解決方法 EC2の費用が安くないとすると、他の何かに変えてみたらどうでしょうか？　もしできるとしたらどのリポジトリでしょうか？ 本プロジェクトには巨大なソースコード群が存在し、そのソースが各リポジトリに分割され、ヘッドレスモデル的に構築されています。つまり、クライアントのリポジトリ（ReactJSでコード）があり、バックエンドのリポジトリ（PHPでコードされたAPI）もあります。そして改めて検討すると、EC2にデプロイする必要がないリポジトリが見つかりました。それは、ReactJSでコードされたクライアントリポジトリです。 なぜ必要ないのでしょうか？ それは、一度ソースコードをデプロイしてしまえば、私達が取得するのは静的なhtmlファイル、cssファイル、js、画像ファイルだけだからです。そして、そのようなファイルを最も安価かつ簡単に保存できるのは？　間違いなくS3でしょう。 しかし、S3はEC2のように自動スケーリングできないため、アクセス数が多い場合に、どのように処理させたらよいでしょうか。その答えはCloudFrontです。 最終的には、S3とCloudFrontを組み合わせて、顧客のコスト削減問題を実現することにしました。 前提 用意するもの