お問い合わせ
業務効率化システムを開発したいなら「ジテラ」へ！他社より1.4倍速い開発、お返事は3日以内、開発知識ゼロでもOK!、お見積りは無料。
✕
INSIGHTS  >  業務システム開発

CloudFrontの構築とリダイレクト設定方法を紹介！操作画像付きで解説！

AI Chipエンジニア全般 AI Chip初心者エンジニア AI Chip開発手順 AI Chip開発環境
2024年10月25日

本記事ではCloudFront+ALB経由のサーバへのHTTPS接続するための構築(DNS設定含む)や、CloudFrontFunctionsを使用したリダイレクト処理の実装方法を紹介します。

目次
アバター画像
監修者 くまンモ

はじめまして、くまンモ(@kumanmoo) と申します。 普段はAWS,Azure,GCPのインフラをメインにフルリモートでクラウドエンジニアやってま。2023/2024Japan AWS All Certifications Engineers AWSとかガジェットについて記事書いてます。 X(Twitter):@kumanmoo

✕
\エキスパートが回答！/
この記事に関する質問はこちら
記事に関するご質問以外にも、システム開発の依頼やAIの導入相談なども受け付けております。

    会社名必須
    姓必須
    名必須
    Eメール必須
    電話番号必須
    ご依頼内容必須

    CloudFrontの構築の前提と最終的な構成図

    【最終的な構成図】最終的な構成図

    リージョンは東京リージョン(ap-northeast-1)を使用し、DNSサーバはRoute53(ドメイン取得済み)とします。
    また、パブリックサブネットにALB(Name:test-alb)を１台、プライベートサブネットにウェブサーバが１台すでに構築されている状態からスタートとします。
    (ALBのドメイン名でHTTP接続可能)

    image.png

    image.png

    CloudFrontで利用可能なリダイレクト方法について

    CloudFrontで使用可能なリダイレクト方法は以下の２種類があります。
    本検証ではCloudFront Functionsをビューワリクエストに設定してリダイレクトを行っていきます。
    ビューワリクエスト、ビューワレスポンス、オリジンリクエスト、オリジンレスポンスの違いに関する説明は割愛しますが、以下参考のドキュメントになります。

    AWS公式ドキュメント

    image.png

    CloudFront Functionsについて

    実行時間が1ミリ秒未満と非常に短いですが、毎秒数百万のリクエストを処理することができます。
    実装はCloudFrontの画面で行い、JavaScriptで記載します。作成したコードはCloudFrontにデプロイする前にテストが可能で、
    デプロイもワンクリックで完了します。作成したFunctionsはCloudFrontのパスパターンを定義する際に紐づけることができます。
    注意点として、ビューワーリクエスト、ビューワーレスポンスにのみ紐づけが可能です。

    Lambda@Edgeについて

    CloudFront内で実行できるLambdaです。CloudFrontと組み合わせることでエッジロケ－ションごとにコンテンツを切り替えたり、
    接続元IPによってレスポンスを指定することが可能です。

    CloudFront経由の接続に変更する際の注意点

    外部ALB(internet経由)からEC2に接続する構成の場合、ALBのセキュリティグループで接続元IPアドレスの制限を実施しているケースは少なくないかと思います。
    CloudFront経由の構成に変更した場合、ALBのセキュリティグループが受け取る接続元IPアドレスは「CloudFront用に払い出されたプレフィックスリストのIPアドレス」に変わります。
    そのため、接続経路の変更に合わせて、セキュリティグループのインバウンドルールでCloudFrontをのプレフィックスリストを追加で許可する必要があります。
    セキュリティグループで許可されていないと「DNSレコードは設定済み、証明書も適用したのにうまく繋がらない」といった事象が発生してしまうので注意してください。

    ALB接続のHTTPS化

    ALBへHTTPS接続をするために以下の流れで作業をしていきます。証明書はAWS Certificate Manager(ACM)を使用して発行します。

    1. 証明書を発行する(このタイミングでCloudFront用も併せて作成します。）
    2. Route53にCNAMEレコードを登録する
    3. ALBにHTTPS(443)のリスナーを追加する
    4. ALBのセキュリティグループのインバウンドルールにHTTPS(443)を追加する
    5. Route53にAレコードを登録する(レコードの値にはALBのエイリアスを指定)
    6. 疎通確認

    注意点として、ALB用の証明書は東京リージョン(ap-northeast-1)、CloudFront用の証明書はバージニア北部(us-east-1)で作成する必要があります。

    1.証明書を発行する

    画像は東京リージョン(ALB用)のものですが、バージニア北部でも同様の作業を実施してください。(CloudFront用)
    image.png
    「完全修飾ドメイン名」に”*.ドメイン名”と入力して作成します。
    検証方法は「DNS検証」を使用します。Route53にCNAMEレコードを追加することでこの証明書が使用可能になります。
    image.png

    2.Route53にCNAMEレコードを登録する

    証明書が発行できたら「Route53でレコードを作成」を選択します。
    「レコードを作成」を押すとRoute53に自動でCNAMEレコードを追加してくれます。レコードが追加されれば検証が成功し、この証明書が使用可能になります。

    image.png
    image.png

    image.png

    3.ALBにHTTPS(443)のリスナーを追加する

    ALBの画面より「リスナーの追加」を選択し、画像の内容で登録します。
    東京リージョンで作成した証明書はここで使用します。
    image.png
    image.png

    image.png

    4.ALBのセキュリティグループのインバウンドルールにHTTPS(443)を追加する

    本検証では自宅のIPアドレスからのみ接続を許可しています。

    image.png

    5.Route53にAレコードを登録する(レコードの値にはALBのエイリアスを指定)

    Route53の画面から「レコード追加」を選択します。
    レコード名は呼び出しに使用したいサブドメインを指定してください。（お好きなものでOK）
    AレコードでALBを呼び出せるようにしたいので「エイリアス」をオンにしてルーティング先を指定します。

    image.png

    image.png

    6.疎通確認

    https://｛Route53に登録したレコード名｝で接続してみます。image.png

    ALB経由のHTTPSが成功しました！

    CloudFrontの構築

    つぎにCloudFrontディストリビューションを作成していいます。
    CloudFront経由の接続を行うため、以下の流れで作業をしていきます。

    1. CloudFrontディストリビューションを作成する
    2. Route53にAレコードを登録する(レコードの値にはALBのエイリアスを指定)
    3. ALBのSGでCloudFrontのIPアドレス(プレフィックスリスト)を許可するimage.png

    1.CloudFrontディストリビューションを作成する

    「オリジンドメイン」にはHTTPS接続可能なALBのFQDNを記載してください。
    プルダウンでALBのDNS名を指定することも可能ですが、このDNS名はHTTP接続しかできないため、
    かならず”HTTPS接続可能なALB用FQDN”を入力してください。
    もし誤ってALBのDNS名をそのまま選択してしまうとCloudFrontからALBへHTTPS接続できず502エラーになります。

    設定時に注意が必要な点は以下です。それ以外は画像を参考にデフォルト値で進めます

    • オリジンドメイン：HTTPS接続可能なALBのFQDN
    • プロトコル：HTTPSのみ
    • ビューワプロトコルポリシー：HTTPS only
    • 代替ドメイン名（CloudFront呼び出し時に使用したいFQDN）
    • 証明書：バージニア北部(us-east-1)で作成したもの

    image.png
    image.png
    image.png
    代替ドメインを指定します。
    ※代替ドメインとはCloudFrontを呼び出すときに使用する名前です。
    この代替ドメインで名前解決をするため、後ほどRoute53にレコードを追加します。image.png
    上記の設定が完了したら「ディストリビューションを作成」を選択します。

    2.Route53にAレコードを登録する(レコードの値にはALBのエイリアスを指定)

    loudFrontを呼び出す際に「代替ドメイン」というものを設定しました。

    しかし、Route53にはCloudFront用のレコードが設定されていないため、作成した代替ドメイン名で名前解決しようとしても
    CloudFrontのIPアドレスが分からず到達することが出来ません。

    そのため代替ドメイン名とCloudFrontディストリビューションを紐づけるためのレコードを登録します。
    レコードの登録方法はALBの時と同様にAレコード(エイリアス)を使用して発行します。

    Route53の画面から「レコード追加」を選択します。
    レコード名はCloudFrontディストリビューション作成時に入力した「代替ドメイン」を記載してください。
    AレコードでCloudFrontを呼び出せるようにしたいので「エイリアス」をオンにし、作成した「CloudFrontディストリビューションID」を指定します。

    image.pngimage.png

    3.ALBのSGでCloudFrontのIPアドレス(プレフィックスリスト)を許可する

    冒頭でもお話しましたが、CloudFront経由の構成に変更した場合、ALBのセキュリティグループが受け取る接続元IPアドレスは
    「CloudFront用に払い出されたプレフィックスリストのIPアドレス」に変わります。そのため、HTTPS接続を自宅IPアドレスから許可していましたが、CloudFrontのIPアドレスに変更する必要があります。

    Internetから直接ALBへ接続できないようにインバウンドルールはCloudFrontのIPアドレスのみ許可するように変更します。

    image.png
    これでCloudFrontからALBへ接続ができるようになりました。CloudFrontに指定した代替ドメインで呼び出してみます。

    image.png

    無事に成功しました！！

    ALBへの調節アクセスはできないようにセキュリティグループを変更したので念のため確認してみます。

    image.png
    CloudFront経由でなければ接続できなくなっているのでアクセス制御が正しく行われていることを確認できました。

    CloudFront Functionsの構築

    最後にCloudFront Functionsを使用したリダイレクト設定をしてみます。

    現在CloudFrontのビヘイビアの設定はデフォルトのみ、すべてALBに流す設定になっています。今回は特定のパスパターン(/twitter))にマッチした場合はTwitterのアカウントトップページへリダイレクト、それ以外のパスパターンはすべてALBの後ろのwebサーバへ接続する構成にしてみようと思います。

    • パスパターン：/twitter
    • リダイレクト先：https://x.com/kumanmoo

    image.png

    function handler(event) { var request = event.request; var request_uri = request.uri; var redirect_URL =””; var xxx_ID = “”; var searchString = “/twitter” //リクエストされたuriを出力 console.log(request_uri); if (request_uri.includes(searchString)){ console.log(“/twitterのパスパターンにマッチしました”); // リダイレクト後のURLを構築 redirect_URL = ‘https://x.com/kumanmoo’; console.log(“リダイレクト後のURLはこちら”) console.log(redirect_URL); return { statusCode: 302, statusDescription: ‘Found’, headers: { ‘location’: {‘value’: redirect_URL} } }; } console.log(request); return request; }

    CloudFrontの「関数」からCloudFrontFunctionsを作成します。

    image.png
    image.png
    コードの記載ができたらデプロイします。

    image.png
    image.png
    最後にCloudFrontのビヘイビアを追加します。

    パスパターン：/twitter
    ビューワ：HTTPS only
    ビューワリクエスト：作成したCloudFrontFunctions

    image.png
    image.png
    image.png
    image.png
    登録が完了したので/twitterのパスを追加して呼び出してみます。

    image.png

    無事にXアカウントのトップページが表示されました。
    ほかのパスパターンでも試してみます。

    image.png
    Nginxのエラー画面が表示されました。ALB側にルーティングされていることが分かります。

    さいごに

    以上でCloudFrontの構築、リダイレクト設定のご紹介は以上となります。

    最後まで読んでいただきありがとうございました！！

    普段はQiitaをメインに投稿していることが多いですが、今後は英語のサイトでも投稿していこうかなと思っているので気になる人はそちらも読んでもらえると嬉しいです。

    例：開発手順、ツール、プロンプト

      アプリ開発のお見積り

      Jiteraなら最先端AI開発で
      高品質・スピード開発を実現します

      どんなアプリを開発したいですか？

      会社名
      担当者名
      メールアドレス
      電話番号
      その他コメント

        システム開発のお見積り

        Jiteraなら最先端AI開発で
        高品質・スピード開発を実現します

        どんなシステムを開発したいですか？

        会社名
        担当者名
        メールアドレス
        電話番号
        その他コメント

          既存システムのお悩み相談

          AIアシスタントJiteraが解決します！

          どんなお悩みがありますか？

          会社名
          担当者名
          メールアドレス
          電話番号
          その他コメント

          カテゴリから探す

          アプリ開発
          エンジニア向け基礎知識
          クラウドシステム
          システム開発
          ツール紹介
          マーケティング基礎知識
          生成AI・AIツール

          関連記事

          【初心者必見】Premiere Pro徹底解説！基本的な使い方から文字起こしなどの応用編まで紹介！

          【初心者必見】Premiere Pro徹底解説！基本的な使い方から文字起こしなど...
          シナリオテストとは？目的や書き方、サンプル例から他のテストとの違いまでわかりやすく解説

          シナリオテストとは？目的や書き方、サンプル例から他のテストとの違いまでわかりやす...
          ホワイトボックステストとは？ブラックボックステストとの違いや手法もわかりやすく解説

          ホワイトボックステストとは？ブラックボックステストとの違いや手法もわかりやすく解...
          機能要件とは？非機能要件との違いやグレード、項目一覧から具体例まで解説

          機能要件とは？非機能要件との違いやグレード、項目一覧から具体例まで解説

          関連記事

          AI Chipおすすめ・比較 AI Chipエンジニア全般 AI Chip中級〜上級エンジニア向け

          アップクラウド（App Cloud）とは？不要通知を表示し続けるシステムアプリの対処法

          最近、Android端末をOSアップデートした後に「AppCloud」という見慣れないアプリからの通知に悩まされているユーザーが増えています。 「更新を完了してください」という通知が消えず、いくつかのアプリをインストール […]

          2024年10月11日
          AI ChipIT知識 AI Chipエンジニア全般 AI Chip初心者エンジニア AI Chip業務効率化 AI Chip開発環境

          光回線に使用するMDFとは？開き方や設置方法を基礎から解説！

          MDFとは、光回線に用いられる用語で、通信ネットワークの中核部分をなす、光ファイバーケーブルが集まって配線が管理される場所のことです。 この記事では、光回線に使用するMDFの設置方法などを基礎から解説しています。 この記 […]

          2024年11月6日
          AI Chipエンジニア全般 AI Chip初心者エンジニア AI Chip管理システム

          【IT超基礎知識】仮想化技術とは？クラウドとの違いや仕組み、技術一覧から仮想化に便利なツールなどを完全網羅

          仮想化技術は、近年のデジタル化が進んだ環境下において必要不可欠な技術の1つです。ただ仮想化技術という言葉を聞いたことがあってもそれが何か分からない人は少なくないでしょう。 仮想化技術は、物理的なITリソースを削減してコス […]

          2024年10月31日
          AI Chipエンジニア全般 AI Chipノーコード/ローコード AI Chip初心者エンジニア AI Chip業務効率化

          【無料あり】ノーコードWEBデータベースのおすすめツール16選！基本知識や選び方も紹介

          システム開発には時間もコストもかかり、特に初期投資は大きな負担になりがちです。しかし、皆様は近年注目を集めつつある「ノーコードデータベース」というツールをご存知でしょうか。 ノーコードデータベースを上手く活用することで、 […]

          2024年10月1日

          例：開発手順、ツール、プロンプト

          タグから記事を探す

          AI情報

          API

          ChatGPT

          DX開発

          DX（デジタルトランスフォーメーション）

          GAFA

          Git/GitHub

          IT知識

          SEO

          SNS

          UI/UXデザイン

          おすすめ・比較

          インフルエンサー記事

          エンジニア全般

          クラウドシステム

          チャットボット

          トレンド記事

          ノーコード/ローコード

          フレームワーク

          フロントエンド/バックエンド開発

          中級〜上級エンジニア向け

          初心者エンジニア

          大規模言語モデル（LLM）

          業務効率化

          機械学習

          画像・動画生成/編集

          管理システム

          経営者/管理職向け

          開発手順

          開発環境

          開発言語

          メルマガ登録

          社内で話題になった「生成AIに関するニュース」をどこよりも早くお届けします。