こちらの記事の続きです。

やりたいこと

フロントエンドからのリクエストをロードバランサー経由で処理する
CloudFrontを設定し、ロードバランサーにHTTPS接続する

構成のおさらい

EC2

Webアプリのバックエンドを実行します。
今回はJavaのjarファイルを常時実行し、フロント側から実行されたAPIを処理します。
RDSに構築されたデータベースとデータをやりとりします。
SpringBootで実装しています。
ロードバランサーからHTTPリクエストを処理します。

RDS

Webアプリのデータベースを担います。
今回はPostgreSQLです。

S3

Webアプリのフロントエンドを配置します。
静的ウェブサイトとして設定し、エンドポイントにアクセスすることでフロント側の画面を表示します。
今回はVue.jsを用いて画面を作成します。

ロードバランサー

ターゲットグループの作成

ロードバランサーがリクエストをルーティングするためのターゲットグループを作成します。
EC2 > ターゲットグループと進み、ターゲットグループの作成を選択します。

ターゲットタイプの選択

今回はEC2がターゲットとなるため、インスタンスを選択します。

プロトコル、ポート

ロードバランサー-EC2間はHTTP接続としたいため、HTTP:80としました。

VPC

EC2が属しているVPCを選択します。

ヘルスチェック

APIにヘルスチェック用URLがある場合は設定します。

ターゲットの登録

使用可能なインスタンスでEC2を選択します。（冗長化したい場合は2つ設定）
バックエンドのポートを設定します。（今回は8080を設定）
設定後、「保留中として以下を含める」をクリックします。
ターゲットに追加されたら、ターゲットグループの作成をクリックします。

ターゲットグループが作成されました。

ロードバランサーの作成

EC2 > ターゲットグループと進み、ロードバランサーの作成をします。
今回は、HTTPおよびHTTPSトラフィックを処理したいため、Application Load Balancerを選択します。

VPC

EC2の属するVPCを選択します。

マッピング

トラフィックをルーティングしたいサブネットを選択します。ここではEC2のサブネットを選びます。
少なくとも2つのアベイラビリティーゾーンと、ゾーンごとに1つのサブネットを選択します。

リスナーとルーディング

先ほど作成した、ターゲットグループを選択します。
ここでは、フロントエンドからはHTTPS接続としたいので、HTTPS:443を設定します。

SSL/TLS証明書

リスナーのプロトコルをHTTPSとしたため、証明書の設定が必要です。
ACMにて作成/アップロートした証明書を選択できます。
（今回はテスト環境のため、自己署名証明書をアップロードし、選択しました）

ロードバランサーを作成をクリックします。

フロントエンドのアクセス先

フロントエンドからの向き先を、EC2エンドポイント→ロードバランサーのDNSに変更することで、
ロードバランサー経由でバックエンドにリクエストし、APIを実行できます。

CloudFront

ロードバランサーはHTTPS接続を受けているため、フロントエンドもHTTPSにてアクセスする必要があります。
S3の静的ウェブサイトホスティングはHTTPでのホスティングなため、CloudFrontを用いることとしました。

CloudFrontの作成

CloudFrontの画面より、ディストリビューションを作成をクリックします。

オリジンドメイン

S3ウェブサイトエンドポイントを設定します。
静的ウェブサイトホスティングのエンドポイントです。

ビューワー

Redirect HTTP to HTTPSに設定しました。

許可されたHTTPメソッド

許可するHTTPメソッドを選択します。

料金クラス

アジアを含む選択肢を選択しました。

上記以外はデフォルトとしました。
ディストリビューションを作成をクリックして作成します。

作成されたディストリビューションのディストリビューションドメイン名にアクセスすることで、フロントエンドを表示できました。
今回はディストリビューションドメイン名を使いましたが、Route53等を設定することで独自ドメインにできるようです。

以上で、（一応）ロードバランサーとColudFrontを設定できました。