AWS 髙妻智一

AWS CloudFrontとS3、ALB(ELB)でSPAを構築する




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を使ったモニタリング方法、セキュリティ等について解説されています。手元において困ったときに読むのにちょうどいい一冊になると思います。

Amazon Web Services実践入門 (WEB+DB PRESS plus)

posted with ヨメレバ
舘岡 守,今井 智明,永淵 恭子,間瀬 哲也,三浦 悟,柳瀬 任章 技術評論社 2015-11-10
Amazon
Kindle
楽天ブックス

 

The following two tabs change content below.
Twitter のプロフィール

髙妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。２年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。






よく読まれている関連記事はこちら




コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。