Zenn
🐧

CloudFront経由でALBにHTTPS接続

2023/07/08に公開
CloudFront
インフラ
#
10分勉強会
tech

CloudFront経由でALBにHTTPS接続

はじめに

CloudFrontからALBにHTTPSで振り分けをした際にハマったので
設定方法を記します。

前提

  • Route 53でドメインを取得済みであること
  • CloudFrontとALB用にバージニア北部・東京それぞれのリージョンでACMを取得し適用していること
  • CloudFrontからALBへのアクセスはHTTPSであること
  • CloudFrontにはcdn.xxx.jpというサブドメインを設定する
  • 外部から直接ALBへのアクセスは不可能とする(CloudFrontを通してのみ可能)

構成図

logo

手順

CloudFrontの設定

  • cdn.xxx.jpと証明書が関連付けられていることを確認

logo

オリジンの作成

  • CloudFront > ディストリビューション > オリジンタブ > [オリジンの作成]を押下

  • 以下のように入力

    • オリジンドメインにRoute53でALBと紐付けたALB用ドメインを入力する

      ※注意※ プルダウンよりALBのDNS名を選択しないこと！（後述しますがこのせいでハマりました）
      logo

  • プロトコル: HTTPSのみ(※これでCloudFrontからALBへの通信はHTTPSになる)

  • カスタムヘッダーを追加

    • ヘッダー名: 推測されにくい任意の名前 値: 推測されにくい任意の値(※ALBのルール設定で使用するので控えておく)

  • [オリジンを作成]を押下

ビヘイビアの設定

  • CloudFront > ディストリビューション > ビヘイビアタブ > [ビヘイビアの作成]を押下
  • 以下のように入力
    • パスパターン: /admin/* (サーバ内の/usr/share/nginx/html/admin/*に振り分けたい場合)
    • オリジンとオリジングループ: 上記で作成したオリジンを選択
    • ビューワプロトコルポリシー: Redirect HTTP to HTTPS
    • 許可された HTTP メソッド: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETEにチェックを入れる(Webサーバのため)
    • HTTP メソッドをキャッシュ: チェックを入れない
    • キャッシュキーとオリジンリクエスト: Cache policy and origin request policy (recommended)にチェック
    • CloudFront側にキャッシュさせないため以下のように設定
      • キャッシュポリシー: プルダウンよりCachingDisabledを選択
      • オリジンリクエストポリシー: プルダウンよりAllViewerAndCloudFrontHeaders-2022-06を選択
    • [ビヘイビアを作成]を押下

logo

ALBの設定

  • EC2 > ロードバランサー > HTTPS:443リスナーのRole > [Manage rules]を押下
  • 以下のように設定
    • ALBに直接アクセスできないようにする
      • HTTPS 443:デフォルトアクションを固定レスポンスを返す 503にする
      • HTTPヘッダー: 上記で設定したカスタムヘッダーの値を設定。転送先はターゲットグループ

logo

  • 設定を保存

接続確認

  • ALB用のドメインでは接続ができず、CloudFront用のドメイン(ビヘイビアで設定したパスパターン)で接続できればOK

ハマったポイント

オリジンの設定の際に、オリジンドメインがプルダウンでALBのDNS名が選択できるため、それを選んでしまっていた。
そうするとCloudFrontからALBの接続はHTTPでないといけなくなるため、502エラーが出ていた。
(HTTP接続したい場合は別途設定が必要そう。今回は説明省きます)
ALB用にRoute53で紐付けたドメインを直接記述しましょう。

あとがき

AI・データ利活用をリードし、世界にインパクトを与えるプロダクトを開発しませんか？

アイディオットでは、今後の事業拡大及びプロダクト開発を担っていただけるエンジニアチームの強化を行っております。
さらに会社の成長を加速させるため、フロントエンドエンジニア、バックエンドエンジニア、インフラエンジニアのメンバーを募集しております！
日本を代表する企業様へ自社プロダクトを活用した、新規事業コンサルティング、開発にご興味のある方はお気軽にご連絡ください。

【リクルートページ】
https://aidiot.jp/recruit/
【募集ポジション一覧】
https://open.talentio.com/r/1/c/aidiot/homes/3925
【採用についてのお問合せ先】
株式会社アイディオット 採用担当：大島
メールアドレス：recruit@aidiot.jp

Discussion