【小ネタ/ハンズオン】CloudFront＋ALB＋Cognitoを使って簡単Web認証基盤を作ってみよう！！

いつも記事を読んでいただきありがとうございます！
モブエンジニア（[@mob-engineer](https://qiita.com/mob_engineer))です！

社内検証環境で**EC2環境でWebサーバを実装＋認証基盤を実装**といった要件があったので、今回実装した内容について簡単にハンズオン化してみました。

初見の方でもサクッと読めるように平易な表現で執筆しておりますので、お気軽に読んでいただければ幸いです。

# 目次
- 対象読者
- 利用ケース
- 構成イメージ
- ハンズオン
    - セキュリティグループ設定
    - EC2設定
    - ALB設定
    - CloudFront設定
    - Cognito設定
- 所感

## 対象読者

次のような課題を抱えている方に本記事を活用いただけますと幸いです。

- Route53などを用いずに簡単にWebブラウザを実装したい
- S3を利用しないで静的Webサイトを実装したい場合
- とりあえず、AWSを用いた楽々実装アーキテクチャを実装したい

## 利用ケース

次のようなケースだと利用できると考えています。

- サーバーアクセス時に任意のポートで接続する場合
- バックエンド・フロントエンド環境が同一の場合
- 新規ドメインを払い出すのが面倒・難しい場合（ACMへの登録を行いたくない）

:::note warn
商用環境で実装する場合はAWS WAFなどのセキュリティ対策・Auto Scalingなどのアジリティ対策を講じてください。
:::

## 構成イメージ

次のような構成イメージを想定しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846878/7605db77-3a4c-4fb2-acb6-ed0af1df993b.png)


## ハンズオン

### セキュリティグループ設定

EC2サーバ用とALB用にあらかじめ作成しておきます。

- EC2用セキュリティグループ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846878/f7c0c0a2-d861-4432-a6f6-55daeb800664.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846878/5ac05bf2-a228-4d57-b4c5-4638c682f733.png)

ALBから来たHTTP・HTTPS通信は許可する設定にしております。また、自環境からはSSH・任意のポートを許可する仕様にしております。

- ALB用セキュリティグループ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846878/a42b9d8e-caad-44dd-8861-96164977706e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846878/eb4d1bc1-0453-441f-b336-75172d84c226.png)

HTTP・HTTPSポートに関しては任意の場所でも許可する仕様にしております。

:::note info
より厳密に設定する場合はCloudFrontからの通信のみに範囲を狭めてみてください
::::

### EC2設定

EC2設定に関してはapacheの設定ファイルを変えるだけです。
今回は使用ポートを7000番にしました。（任意の値で大丈夫です）

なお、HTML資材は過去ブログから持ってきています。

https://qiita.com/mob_engineer/items/8719e0b85fa340352771

実装した結果は以下となります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846878/ea30179a-9339-4df0-93a6-26e9bcb77e67.png)

### ALB設定

ALBの設定を行う前にEC2のセキュリティグループを次の通り変更してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846878/082a0e61-ba6f-4a41-a13e-e250db1c45a8.png)

上記設定を行うことで、**ALBから任意のポート宛の通信を行える**ようになります。

ALB設定としてターゲットグループとロードバランサーの設定を行います。

:::note info
先にターゲットグループを設定しないとロードバランサーは作成できません
:::

- ターゲットグループ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846878/985c83ef-361c-4b10-8ebf-0911e2a3dc51.png)

:::note info
ターゲット登録方法としてインスタンスでの登録がありますが、TerraformなどのIaCツールで頻繁にリソースを構築⇒削除する場合、インスタンスIDを固定化できません。そのため、今回は値を固定化できるIPアドレス（プライベートIP）をターゲットに指定しています。
:::

- ロードバランサー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846878/5097f2d1-c5de-47af-9447-0949fddb6102.png)

リスナーにつてはHTTPプロトコルの通信は許可するといったルールにしております。
なお、ALB単体でHTTPS設定も可能ですがその場合ACM設定が必須となります。

それでは、ALBから払い出されたDNSドメインでアクセスしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846878/dc23f221-def2-4e8e-a9ee-676ed409f5ae.png)

### CloudFront設定

オリジンドメインとして先ほど作成したALBを登録して作成しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846878/1029e416-1ecf-4a46-bbf7-1ccabf08396f.png)

:::note info
セキュリティ対策を強化したい場合は、CloudFrontからAWS WAF設定を行うことができます。
:::

:::note info
プロトコルをHTTPSのみ（デフォルト設定）にした状態でアクセスすると以下エラーが発生します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846878/89c8ea22-473f-4525-8a19-fe0278035acf.png)
:::

ディストリビューションドメインでアクセスしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846878/f4136b66-0a1b-424e-99a2-13fc76d8b46a.png)

無事、HTTPS認証でアクセスが可能になりました。

### Cognito設定

Cognito設定に関しては、過去ブログの内容として同じですので割愛いたします。

#### 過去ブログ

https://qiita.com/mob_engineer/items/8719e0b85fa340352771



## 所感

CloudFrontから自動生成されるドメインでアクセスできればいいといった条件であれば、Route53を利用してドメイン発行せずともHTTPS接続は実現できます。ただし、商用利用することを考えたらドメイン名を設定するのは必須化と思います。あくまで最低限の実装のみですので、本実装から拡張させることは可能だと思います。

最後まで、記事をお読みいただきありがとうございました