AWSでよくある構成かもしれませんが、クラウドフロント→ALB→インスタンス(EC2)の流れを作ろうとしたのですが思ったより大変でした。今回はそのメモになります。ALBとはなんぞやというのは割愛してます

前提条件

以下の環境を想定してます

• ドメイン：Route53
• インスタンス：t2.micro
• WEBサーバー：nginx
• SSL：Amazon証明書
• リージョン：東京、バージニア
• ドメイン：logw.jp
• alb用ドメイン：alb.logw.jp

Route53がお勧め

Route53を使わなくても問題ないですが、Route53にしたほうがストレスが減ります

SSLの設定とかでCNAMEの設定をしたり、ALBやクラウドフロントの設定に必要なため、その方が楽になります。Route53にしなくてもできます。

EC2にはnginxをインストール

している前提となります。

Route53

まずはRoute53でドメインを登録します。ここではCNAMEでAレコードに登録されているホスト名を登録したりします。

ここではまだロードバランサーがないのでCNAMEで適当につけておきます。後ほど付け替えます。

ACMでドメインのSSL登録

ACMでalb.logw.jpを登録しておきます。これはクラウドフロントを使うのに大事なのでやっておきます。

ロードバランサー

ドメインの登録をしたらロードバランサーの作成に入っていきます。EC2が用意されている前提となりますが、EC2がなくても後から追加することができるので、気にしないでください。

ターゲットグループの追加

EC2 > ロードバランシング > ターゲットグループのページに行き、ターゲットグループの作成をクリックしてターゲットグループを作成します

基本的な設定
ターゲットタイプをインスタンスにします

ターゲットグループ名
任意の名前をつけます

プロトコル：ポート
HTTPSにします

VPC
VPCを選択します。デフォルトとかでも問題ありません。これで紐付けることになります

プロトコルバージョン
HTTP1を選択します

ヘルスチェック
ヘルスチェックプロトコルをHTTPSにします

ターゲットの登録

使用可能なインスタンスからインスタンスをチェックして、保留中として以下を含めるをクリックします。これができたらターゲットグループの作成を押して作成します

ロードバランサーの作成

ターゲットグループを登録したらロードバランサーの作成をします。ロードバランサーのタイプはApplication Load Balancerにします

ロードバランサー名

任意の名前を入力します

VPC

ターゲットグループと同じVPCを選択します

セキュリティーグループ

デフォルトのままで問題ないです

リスナー

プロトコルをHTTPSにして転送的を先ほど作ったグループにします

セキュリティーポリシー

変更無し

デフォルトSSL/TLSサーバー証明書

Route53でサブドメイン作った時に作ったSSL証明書を選択します。もし作ってない場合はACMから作成します。

AWS Web Application Firewall (WAF)

チェックいれません。

AWS Global Accelerator

チェックいれません。

これで作成を押します

DNS名でアクセスできるか確認

ロードバランサーを作成したらロードバランサーのDNS名をブラウザに入力してみます。これでnginxのwelcomeページが見えたら成功です

Route53→ALBの紐付け

ALBのドメイン(alb.logw.jp)でアクセスできるように設定をします。

Route53のレコード修正

• レコードタイプ：A
• エイリアス：オン
• トラフィックのルーティング先：ALBのDNSを選択
• ルーティングポリシー：変更無し
• ターゲットのヘルスを評価：変更無し

とします。これでドメイン名(alb.logw.jp)にアクセスをしてみます。nginxのwelcomeページが表示されたら成功です

ここまでのまとめ

ここまでやったことはALBの設定で、alb.のドメイン名でnginxのwelcomeページをみることになります。

クラウドフロントとALBの連携

ALBをフロント置くならこの後設定は不要ですが、実際にはwww.logw.jpにアクセスをしたらクラウドフロントの方に接続されて、そこからALBにアクセスするという方向になります。なのでここからはクラウドフロントとALBの接続をします。

注意点

クラウドフロントとALBの接続は少し難しく、403エラーや502エラーなどが起きたりします。ログを確認したいと思ってもS3になるので、クラウドフロントのログはみれないと思ってください。

クラウドフロントを作成

まずはクラウドフロントを作成します。ディストリビューションを作成をクリックして新しくディストリビューションを作成します。

503のケース

503エラーとなるケースを載せていきます

　オリジン

オリジン設定をしていきます。

• Origin domain：albをプルダウンから選択
• プロトコル：変更なし
• Minimum Origin SSL protocol：変更なし
• Origin path - optional：記入なし
• 名前：任意で好きな名前をいれる

※参考画像を載せてます

デフォルトのキャッシュビヘイビア

• パスパターン：変更なし
• オブジェクトを自動的に圧縮：変更なし
• ビューワープロトコルポリシー：Redirect HTTP to HTTPS
• 許可された HTTP メソッド：GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
• ビューワーのアクセスを制限する：変更なし
• キャッシュキーとオリジンリクエスト：CachingDisabled
• レスポンスヘッダーポリシー - オプション：変更なし

※参考画像を載せてます

関数の関連付け - オプション

ここは変更なし

ウェブアプリケーションファイアウォール (WAF)

• セキュリティ保護を有効にしないでくださいを選択

設定

• 料金クラス：変更なし
• 代替ドメイン：クラウドフロントでアクセスされるドメイン名をいれる
• Custom SSL certificate - optional：SSL証明書を選択。ない場合はリクエストから作成
• レガシークライアントサポート - 月額 600 USD の比例配分された料金が適用されます。ほとんどのお客様はこれを必要としません。：変更なし
• セキュリティポリシー：変更なし
• サポートされている HTTP バージョン：HTTP/2、HTTP/3
• デフォルトルートオブジェクト - オプション：index.html
• 標準ログ記録：変更なし

とりあえずキャッシュ無効化にしています

※参考画像を載せてます

Route53→クラウドフロントの紐付け

ALB、クラウドフロントと作りました。ドメイン(logw.jp)でアクセスをしたらクラウドフロントになるようにします。

Route53のレコード修正

• レコードタイプ：A
• エイリアス：オン
• トラフィックのルーティング先：クラウドフロントを選択
• ルーティングポリシー：変更無し

とします。これでドメイン名(logw.jp)にアクセスをしてみます。nginxのwelcomeページが表示されたら成功です

wwwwの場合はCNAMEでホスト名(logw.jp)を選択します

503エラーになる

おそらくこの方法だと503エラーとなります。503エラーになる原因としては

オリジンのとこでalbを選択しているためになります。

403エラーのケース

403エラーのケースも載せておきます。ただオリジンのとこが違うだけになります。後は基本的に一緒になります。

ALBの代わりにドメイン名をいれる

オリジンのドメインのとこを、logw.jpなどのドメイン名をいれると403エラーとなります。

正しい設定

正しいクラウドフロントの設定を載せます。

オリジンにはサブドメイン

オリジンの設定のとこでALBを選択した場合、内部で通信エラーとなります。ドメイン名でアクセスしているけど、クラウドフロントからALBへ接続するときはALBのDNSになるため、エラーとなります。

そこでALBの名前ではなく、サブドメインにすることでエラー回避となります。ここではalb.logw.jpをいれてます。

464エラーがでた場合

この設定ではこのエラーはおきないですが、もし464エラーがでたらロードバランサー作成の前に作ったターゲットグループのプロトコルバージョンがHTTP1か確認してください。

クラウドフロント→ALBの通信

カスタムオリジンの場合のリクエストおよびレスポンスの動作のページのHTTP バージョンのとこにこんな記載があります

CloudFront は HTTP/1.1 を使用してカスタムオリジンにリクエストを転送します。

HTTP2にすると465エラーを返すのは、この通信が違うためになります。ターゲットグループでHTTP1にすることで見ることができます