SPA Single Page Applicationの構築
CloudFrontとS3、ELB(ALB)を使うと簡単にSPAなサービスを構築することができます。
CloudFrontの設定
CloudFrontにはパスによってどのバックエンドにリクエストを流すか複数設定することができます。一般的な設定でいくと、APIのプリフィックスに/apiをつけて、APIに関するリクエストはALBに流すようにして、それ以外のリクエストはS3に流すようにするだけです。
Originの作成
設定はまずOriginを追加します。Originにはhtmlなどを配信するS3とAPIを提供するALBを設定します。プルダウンから各リソースを選択するだけなので簡単に設定できます。

S3のBehaviorの設定
Originを作成したら次はBehaviorを設定します。
S3はPath Patternがデフォルト設定になるようにしてください。HTTPS設定をしていない場合はHTTP and HTTPSを選択してください。

Cache Based on Selected Request HeadersはNodeを選択することでキャッシュ機能を有効化できます。

ALBのBehaviorの設定
パスを設定する場合は/api/*のようにすると/api/user、/api/user/1などのパスに対して対応することができます。

Cache Based on Selected Request HeadersはALLを選択することでAPIの結果をキャッシュしなくなります。ALLを選択するとTTLが自動で0になります。この画像の場合は自分で0を入力しているので0と表記されていますが。

まとめ
これであとは設定が反映されればCloudFrontのドメインからhtmlとAPIの両方にリクエストを割り振ることができ同じドメインでSPAを構築することができます。
CloudFrontにはAWS WAFを設定してアクセス制限等もできるのでぜひ試してみてください。
関連記事:AWS Web Application Firewall WAFでCloudFrontにIP制限をかける方法
おすすめ書籍
AWSをこれから使う初心者の方から現在使っている中級者の方までおすすめできる書籍です。内容はVPC、セキュリティグループ、IAMなどの基本的なことからWEBサービスを作るのに欠かせない、EC2、RDS、Route53などの扱い方が丁寧に説明されています。
中級者向けにはWEBサーバのオートスケール、Cloud Watchを使ったモニタリング方法、セキュリティ等について解説されています。手元において困ったときに読むのにちょうどいい一冊になると思います。
髙妻智一
最新記事 by 髙妻智一 (全て見る)
- Polkadot(Substrate)のアドレスとトランザクションについて - 2023-03-09
- 【無料公開】「Goで始めるBitcoin」3章 Bitcoinノードとの通信 技術書典8 - 2020-03-08
- エンジニアがゼロから技術ブログを書くための方法をまとめました - 2019-05-25
コメントを残す