LoginSignup
0
0
@zumax

【Route 53】CloudFront の静的なウェブサイトにドメイン使用してみた

Last updated at Posted at 2024-06-16

背景・目的

Amazon Route53 でドメインを登録してみたや、【Route 53】S3バケットの静的なウェブサイトにドメインを使用してみたでは、DNSレコードの作成〜静的ウェブサイトを作成までを、Route 53を使って試しました。

今回は、CloudFrontでRoute 53を設定してみます。

まとめ

今回、下記のような環境を構築します。

image.png

概要

パブリック証明書

Amazon CloudFront ディストリビューションがビューワー CloudFront が HTTPS を使用するように を設定して、 がビューワーと CloudFront 通信するときに接続が暗号化されるようにするには、パブリック証明書が必要です。

  • ビューワーとCloudFrontディストリビューションがHTTPSを使用して通信するには、パブリック証明書が必要

ACMの料金

AWS Certificate Manager でプロビジョニングされたパブリック SSL/TLS 証明書は無料です。お支払いいただくのは、アプリケーションを実行するために作成した AWS リソースの料金のみです。
ACM を介して AWS Private Certificate Authority (CA) を管理する場合は、AWS Private CA の料金ページで詳細と例をご覧ください。

  • パブリック証明書は無料
  • プライベートCAは別途かかる

実践

Amazon CloudFront ディストリビューションを使用して静的ウェブサイトを提供するを基に試してみます。

ステップ 1: ドメインを作成する

Amazon Route 53 でドメインを登録してみたで作成したドメインを使用します。

ステップ 2: パブリック証明書のリクエスト

  1. AWSにサインインします

  2. AWS Certificate Manager (ACM)に移動します

  3. リージョンは、バージニアに移動します。（CloudFrontは、グローバルサービスのため）

  4. ナビゲーションペインで「証明書をリクエスト」をクリックします

  5. 証明書タイプでは、「パブリック証明書をリクエスト」を選択し、「次へ」をクリックします
    image.png

  6. 完全修飾ドメイン名を入力します

  7. 「この証明書に別の名前を追加」をクリックし、ドメイン名の前にアスタリスクを入力し、すべてのサブドメインに対してワイルドカード証明書を要求します

  8. 下記を入力し、「リクエスト」をクリックします

    • 検証方法：DNS検証
    • キーアルゴリズム：RSA 2048
      image.png

  9. 作成直後は、ステータスは、「保留中の検証」になります
    image.png

  10. 証明書IDをクリックします

  11. ドメインで「Route 53でレコードを作成」をクリックします
    image.png

  12. Route 53でDNSレコードを作成で、「レコードを作成」をクリックします
    image.png

  13. 証明書のステータスが、「発行済み」になりました！
    image.png

ステップ 3: サブドメインをホストする S3 バケットを作成する

  1. S3に移動します
  2. サブドメイン用のバケットを作成します。※ ドメイン名の前に、プレフィックスを付けます

ステップ 4: ルートドメイン用の別の S3 バケットを作成する

  1. S3に移動します
    1.ルートドメイン用のバケットを作成します。

ステップ 5: ウェブサイトファイルをサブドメインバケットにアップロードする

  1. S3に移動します
  2. ステップ3で、作成したサブドメイン用のバケットを選択します
  3. 下記のファイル(index.html)をアップロードします 
    <html>
<head>
<title>Amazon Route 53 Getting Started</title>
</head>

<body>

<h1>Routing Internet traffic to Cloudfront distributions for your website stored in an S3 bucket</h1>

<p>For more information, see
<a href="https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/getting-started.html">Getting Started with Amazon Route 53</a>
in the <emphasis>Amazon Route 53 Developer Guide</emphasis>.</p>

</body>

</html>

ステップ 6: ウェブサイトリダイレクト用にルートドメインのバケットを設定する

ルートドメイン→サブドメインにリダイレクトさせます

  1. S3に移動します
  2. ステップ4で作成した、ルートドメインのS3を選択します
  3. 「プロパティ」タブをクリックします
  4. 静的ウェブサイトホスティングで「編集」をクリックします
  5. 静的ウェブサイトホスティングで「有効にする」を選択します
  6. 下記を入力し、「変更を保存」をクリックします
    • ホスティングタイプ：オブジェクトのリクエストをリダイレクトする
    • ホスト名：サブドメインを入力
    • プロトコル：https

ステップ 7: サブドメインの Amazon CloudFront ディストリビューションを作成する

  1. CloudFrontに移動します

  2. ナビゲーションペインで、「ディストリビューション」をクリックします

  3. 「CloudFront ディストリビューションを作成」をクリックします

  4. 下記を入力し、「Create new OAC」をクリックします

    • Origin domain： ステップ3で作成したS3バケット
    • オリジンアクセス：Origin access control settings (recommended)
      image.png

  5. ポップアップが表示されるので、そのまま、「Create」をクリックします
    image.png

  6. デフォルトのキャッシュビヘイビアのビュワープロトコルポリシーでは、「Redirect HTTP to HTTPS」を選択します
    image.png

  7. ウェブアプリケーションファイアウォール (WAF)では、「セキュリティ保護を有効にする」としました

  8. ディストリビューションを作成をクリックします

  9. 設定の「編集」をクリックします

  10. 下記を入力し、④「変更を保存」をクリックします

    • CNAMEs：①サブドメイン
    • Custom SSL certificate：②ACMで作成した証明書
    • Default root object ：③index.html
      image.png

S3バケットポリシーの修正

  1. サブドメインのバケットポリシーを修正します 
    {
        "Version": "2008-10-17",
        "Id": "PolicyForCloudFrontPrivateContent",
        "Statement": [
            {
                "Sid": "AllowCloudFrontServicePrincipal",
                "Effect": "Allow",
                "Principal": {
                    "Service": "cloudfront.amazonaws.com"
                },
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::XXXXXX/*",
                "Condition": {
                    "StringEquals": {
                      "AWS:SourceArn": "arn:aws:cloudfront::XXXXXX:distribution/YYYY"
                    }
                }
            }
        ]
      }

ステップ 8: ルートドメインの Amazon CloudFront ディストリビューションを作成する

ルートドメインの CloudFront ディストリビューションを作成し、URL がサブドメインにリダイレクトされたときに HTTPS を使用する

  1. CloudFrontに移動します

  2. ナビゲーションペインで、「ディストリビューション」をクリックします

  3. 「CloudFront ディストリビューションを作成」をクリックします

  4. Origin domain:ルートドメインバケットのWebエンドポイントを選択します
    image.png

  5. デフォルトのキャッシュビヘイビア：Redirect HTTP to HTTPS
    image.png

  6. キャッシュポリシー：CachingDisabled
    image.png

  7. CNAMEには、①ルートドメイン、Custom SSLには、ACMで作成した証明書を選択します
    image.png

  8. 最後にディストリビューションを作成をクリックします

ステップ 9: ドメインの DNS トラフィックを CloudFront ディストリビューションにルーティングする

ドメインのインターネットトラフィックを CloudFront ディストリビューションにルーティングします。

  1. Route 53に移動します
  2. ナビゲーションペインで、「ホストゾーン」を選択します
  3. ドメイン名を選択します
  4. 「レコードを作成」をクリックします
  5. ルーティングポリシーで「シンプルルーティング」を選択し、「次へ」をクリックします
  6. 「シンプルなレコードを定義」をクリックします
  7. ポップアップが表示されるので、下記を入力し、「シンプルなレコードを定義」をクリックします
    • レコード名:デフォルトの前にサブドメインをいれる
    • レコードタイプ：A
    • ルーティング先：CloudFrontディストリビューションへのエイリアス
      image.png
  8. 最後に「レコードを作成」をクリックします

ルートドメインのエイリアスレコードの追加

ルートドメインからサブドメインにリダイレクトさせるため、DNSレコードを追加します。

  1. 上記のサブドメインと同様の設定を行う。（ただし、ルートドメインで行うこと）

ステップ 10: ウェブサイトをテストする

  1. サブドメインでアクセスします。表示されました
    image.png

  2. ルートドメインでアクセスします。リダイレクトされました

考察

前回に引き続き、今回も静的ウェブサイトにドメインを使用してみました。
今回は、CloudFrontを使用しましたが、ACMなどがあるため、S3のホスティングよりも手間はかかりました。
次回以降も、Route 53や、CloudFront、ACMを深堀りしていきたいと思います。

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0