Amazon CloudFront ディストリビューションを使用して静的なウェブサイトを提供する - Amazon Route 53

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

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

この入門チュートリアルでは、次のタスクの実行方法を示します。

  • example.com などのドメイン名を登録する。

  • ドメインの証明書を作成する。

  • 2 つの Amazon S3 バケットを作成し、1 つをウェブサイトをホストするように設定し、もう 1 つをサブドメインにリダイレクトするように設定する。

  • サンプルウェブサイトを作成し、S3 バケットにファイルを保存する。

  • 両方の S3 バケットの CloudFront ディストリビューションを作成する。

  • Amazon Route 53 を設定して、CloudFront ディストリビューションにトラフィックをルーティングする。

これらのタスクが完了したら、ブラウザを開き、ドメイン名を入力してウェブサイトを安全に表示できます。

前提条件

開始する前に、Amazon Route 53 を設定する の手順を完了するようにしてください。

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

ドメイン名 (例えば、example.com) を使用するには、そのドメイン名が既に使用されていないことを確認してから登録する必要があります。ドメイン名を登録すると、通常 は 1 年間、そのドメイン名をインターネットで独占的に使用できます。デフォルトでは、ドメイン名は毎年の終了時に自動的に更新されますが、この自動更新はオフにできます。詳細については、「新しいドメインの登録」を参照してください。

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

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

AWS Certificate Manager (ACM) パブリック証明書をリクエストするには (コンソール)
  1. AWS マネジメントコンソールにサインインして ACM コンソール (https://console.aws.amazon.com/acm/home) を開きます。

    注記

    米国東部 (バージニア北部) リージョンで証明書を作成していることを確認します。Amazon CloudFront では、これが必要です。

    左側のナビで [証明書のリクエスト] を選択し、[証明書のリクエスト] ページで [証明書のリクエスト] を選択し、[次へ] を選択します。

  2. [ドメイン名] セクションに、「example.com」などのドメインを入力します。

    [Add another name to this certificate] (この証明書に別の名前を追加する) を選択し、ドメイン名の前にアスタリスクを入力して、すべてのサブドメインに対してワイルドカード証明書を要求します (例: *.example.com)。

  3. [検証方法] セクションで、[DNS での検証] を選択します。

  4. [キーアルゴリズム] セクションで、[RSA 2048] を選択します。

  5. [タグを追加] セクションで、オプションで証明書にタグを付けることができます。タグとは、AWS リソースを識別および整理するためのメタデータとして機能するキーと値のペアのことを指します。

    [リクエスト] を選択すると、[証明書] ページに移動します。

  6. 新しい証明書が保留中ステータスになったら、証明書 ID を選択し、[証明書の詳細] ページで [Route 53 でレコードを作成] を選択してドメインの CNAME レコードを自動的に追加し、[レコードの作成] を選択します。

    [Certificate status] (証明書のステータス) ページで、[Successfully created DNS records] (DNS レコードが正常に作成された) ことを伝えるステータスバナーと共にページが開くでしょう。

    新しい証明書は [Pending validation] (検証保留中) のステータスを最大 30 分間表示し続けます。

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

www.ドメイン名 用の別の S3 バケットを作成するには

Amazon S3 では、インターネットのどこからでもデータの保存と取得を実行できます。このステップでは、ウェブサイトのすべてのファイルを保存する S3 バケットを作成します。

  1. Amazon S3 コンソール (https://console.aws.amazon.com/s3/) を開きます。

  2. [バケットを作成する] を選択します。

  3. 以下の値を入力します。

    バケット名 

    www.your-domain-name」と入力します。例えば、example.com というドメイン名を登録済みの場合は、「www.example.com」と入力します。

    リージョン

    バケットのリージョンを選択します。

  4. デフォルト設定をそのまま使用してバケットを作成するには、[Create bucket] (バケットの作成) を選択します。

    S3 バケットの設定の詳細については、Amazon S3 ユーザーガイドの「S3 バケットのプロパティを表示するには」を参照してください。

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

.ドメイン名 (example.com など) というルートドメインを使用してユーザーがサンプルウェブサイトにアクセスできるようにする場合、2 つ目の S3 バケットを作成します。このチュートリアルでは、2 つ目のバケット (ルートドメイン) から 1 つ目のバケットにトラフィックをルーティングするように設定します。

ドメイン名 用の S3 バケットを作成するには
  1. Amazon S3 コンソール (https://console.aws.amazon.com/s3/) を開きます。

  2. [バケットを作成する] を選択します。

  3. 以下の値を入力します。

    バケット名

    [ドメイン名] を入力します。例えば、example.com というドメイン名を登録済みの場合は、「example.com」と入力します。

    リージョン

    最初のバケットを作成したのと同じリージョンを選択します。

  4. デフォルト設定をそのまま使用してバケットを作成するには、[Create bucket] (バケットの作成) を選択します。

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

S3 バケットの作成が完了したので、ウェブサイトファイルをアップロードできます。このチュートリアルでは、ページにテキストを表示するシンプルな index.html ファイルをアップロードします。

S3 バケットでウェブサイトホスティングを有効にするには
  1. Amazon S3 コンソール (https://console.aws.amazon.com/s3/) を開きます。

  2. Buckets (バケット) リストで、ウェブサイトファイルのアップロード先のバケットのリンク名 (例: www.example.com) を選択します。

  3. シンプルな 1 ページのウェブサイトを作成するためのサンプルテキストをコピーしてテキストエディタに貼り付け、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>
  4. [Objects] (オブジェクト) タブで、[Upload] (アップロード) を選択します。

  5. [Files and folders] (ファイルとフォルダ) で、[Add files] (ファイルの追加) を選択して、ウェブサイトファイルをアップロードします。このチュートリアルでは、この手順のステップ 3 で保存した index.html ファイルをアップロードします。

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

ウェブサイトのホスティング用にルートドメインバケットを設定した後、オプションですべてのリクエストをサブドメインにリダイレクトするようにルートドメインバケットを設定することができます。例えば、example.com に対するすべてのリクエストが、www.example.com にリダイレクトされるように設定できます。

リダイレクトを設定するには
  1. Amazon S3 コンソールの [Buckets] (バケット) リストで、バケット名 (example.com など) を選択します。

  2. [プロパティ] を選択します。

  3. [静的ウェブサイトホスティング] で [編集] を選択します。

  4. [Static website hosting] (静的ウェブサイトホスティング) で [Enable] (有効化) を選択します。

  5. [Redirect requests for an object (オブジェクトのリクエストをリダイレクト)] を選択します。

  6. [Host name] (ホスト名) ボックスに、サブドメインを入力します (例: www.example.com)。

  7. [プロトコル] として [HTTPS] を選択します。

  8. [Save changes (変更を保存)] をクリックします。

  9. [静的 ウェブサイトホスティング] の下のエンドポイントを書き留めます。

    [Endpoint (エンドポイント)] は、バケットの Amazon S3 ウェブサイトエンドポイントです。このエンドポイントを使用して、Amazon CloudFront ディストリビューションを設定します。

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

このステップでは、www.example.com などのサブドメイン用の CloudFront ディストリビューションを作成し、ウェブサイトが HTTPS を使用できるようにして、ユーザーが安全に表示できるようにします。

CloudFront ディストリビューションを作成するには
  1. で CloudFront コンソールを開きますhttps://console.aws.amazon.com/cloudfront/v4/home

  2. [Create Distribution] を選択します。

  3. [オリジン][オリジンドメイン] で、前の手順で作成した Amazon S3 バケットを選択します。形式は www.example.com.s3.<Region>.amazonaws.com に似ています。

    オリジンアクセスでは、[レガシーアクセス ID] を選択します。[Origin access identity] (オリジンアクセスアイデンティティ) では、リストから選択するか、[Create new OAI] (新しい OAI の作成) を選択します (どちらも動作します)。

    [Bucket policy] (バケットポリシー) では、[Yes, update the bucket policy] (はい、バケットポリシーを更新します) を選択します。

  4. [Default Cache Behavior Settings] (デフォルトのキャッシュ動作の設定) の下で、[Viewer (ビューワー) にある [Viewer protocol policy] (ビューワープロトコルポリシー) を [Redirect HTTP to HTTPS] (HTTP を HTTPS にリダイレクト) に 設定し、残りの設定はデフォルト値のままにします。

    キャッシュ動作のオプションの詳細については、Amazon CloudFront デベロッパーガイドの「キャッシュ動作の設定」を参照してください。

  5. [Web アプリケーションファイアウォール (WAF)] セクションでは、AWS WAFセキュリティ保護を有効にするか無効にするかを選択できます。

  6. [Settings] (設定) の下にあるフィールドで、次の作業を行います。

    • [Alternate domain name (CNAME) - optional] (代替ドメイン名 (CNAME) - オプション) に [Add item] (アイテムの追加) を選択し、www.example.com などのサブドメインを入力します。

    • [Custom SSL Certificate] (カスタム SSL 証明書) では、以前に作成した証明書を選択します。

    • [Default root object] (デフォルトのルートオブジェクト) テキストボックスに「index.html」と入力します。

    • その他は、デフォルト値を受け入れ、[ディストリビューションを作成] を選択します。

      ディストリビューションのオプションの詳細については、「ディストリビューション設定」を参照してください。

  7. CloudFront がディストリビューションを作成すると、ディストリビューションの [ステータス] 列の値が、[進行中] から [デプロイ済み] に変わります。これには通常数分かかります。

    CloudFront によってディストリビューションに割り当てられたドメイン名が記録され、ディストリビューションのリストに表示されます。このドメイン名を使用して、ディストリビューションをテストできます。

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

このステップでは、ルートドメインの CloudFront ディストリビューションを作成して、その URL がサブドメインにリダイレクトされるときに HTTPS を使用するようにします。

CloudFront ディストリビューションを作成するには
  1. で CloudFront コンソールを開きますhttps://console.aws.amazon.com/cloudfront/v4/home

  2. [Create Distribution] を選択します。

  3. [Origin Settings] (オリジンの設定) で、[Origin Domain Name] (オリジンドメイン名) に、バケットウェブサイトエンドポイントを入力します。以前に作成した Amazon S3 バケットの [Properties] (プロパティ) の [Static website hosting] (静的ウェブサイトホスティング) セクションからこれを取得します。

    それ以外は、デフォルト値のままにしておきます。

  4. [Web アプリケーションファイアウォール (WAF)] セクションでは、AWS WAFセキュリティ保護を有効にするか無効にするかを選択できます。

  5. [キャッシュキーとオリジンリクエスト] のフィールドで、キャッシュポリシーとオリジンリクエストポリシー (推奨) を選択し、[キャッシュポリシー] ドロップダウンで [CachingDisabled] を選択します

    それ以外は、デフォルト値のままにしておきます。

    キャッシュ動作のオプションの詳細については、Amazon CloudFront デベロッパーガイドの「キャッシュ動作の設定」を参照してください。

  6. [Settings] (設定) の下にあるフィールドで、次の作業を行います。

    • [Alternate domain name (CNAME) - optional] (代替ドメイン名 (CNAME) - オプション) に [Add item] (アイテムを追加) を選択し、example.com などのルートドメインを入力します。

    • [Custom SSL Certificate] (カスタム SSL 証明書) では、以前に作成した証明書を選択します。

    • それ以外は、デフォルト値のままにしておきます。

    ディストリビューションのオプションの詳細については、「ディストリビューション設定」を参照してください。

  7. ページの最下部で、[ディストリビューションの作成] をクリックします。

  8. CloudFront がディストリビューションを作成すると、ディストリビューションの [ステータス] 列の値が、[進行中] から [デプロイ済み] に変わります。これには通常数分かかります。

    CloudFront によってディストリビューションに割り当てられたドメイン名が記録され、ディストリビューションのリストに表示されます。このドメイン名を使用して、ディストリビューションをテストできます。

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

これで、CloudFront ディストリビューションを使用する 1 ページのウェブサイトが S3 バケットに配置されました。ドメインのインターネットトラフィックが CloudFront ディストリビューションにルーティングされるようにするには、次の手順を実行します。

CloudFront ディストリビューションへのトラフィックのルーティングの詳細については、「ドメイン名を使用してトラフィックを Amazon CloudFront ディストリビューションにルーティングする」を参照してください。

トラフィックをウェブサイトにルーティングするには
  1. Route 53 コンソール (https://console.aws.amazon.com/route53/) を開きます。

  2. ナビゲーションペインで [Hosted zones] を選択します。

    注記

    ドメインを登録すると、同名のホストゾーンが、Amazon Route 53 によって自動的に作成されます。ホストゾーンには、ドメインのトラフィックを Route 53 がどのようにルーティングするかに関する情報が含まれています。

  3. ホストゾーンリストから、ドメインの名前を選択します。

  4. [Create record (レコードを作成)] を選択します。

    [Quick create record] (レコードのクイック作成) ビューが表示されている場合は、[Switch to wizard] (ウィザードへの切り替え) を選択します。

    注記

    各レコードには、1 つのドメイン (example.com など) またはサブドメイン (www.example.com や test.example.com など) のトラフィックをどのようにルーティングするかについての情報が含まれます。レコードは、ドメインのホストゾーンに保存されます。

  5. [Simple routing (シンプルルーティング)]、[Next (次へ)] の順に選択します。

  6. [Define simple record (シンプルなレコードを定義)] を選択します。

  7. [Record name] (レコード名) では、デフォルト値の前に「www」を入力します。これが、ホストゾーンとドメインの名前です。

  8. [Record type (レコードタイプ)] で、[ ‐ Routes traffic to an IPv4 address and some resourcesAWS (A ‐ IPv4 アドレスと一部の リソースにトラフィックをルーティングします)] を選択します。

  9. [Value/Route traffic to] (値/トラフィックのルーティング先) で、[Alias to CloudFront distribution] (CloudFront ディストリビューションへのエイリアス) を選択します。

  10. ディストリビューションを選択します。

    ディストリビューション名は、[Distributions] (ディストリビューション) リストの [Domain name] (ドメイン名) ボックスに表示されている名前と一致する必要があります (例えば、dddjjjkkk.cloudfront.net)。

  11. [Evaluate target health (ターゲットの正常性の評価)] で [No (いいえ)] を選択します。

  12. [Define simple record (シンプルなレコードを定義)] を選択します。

ルートドメインのエイリアスレコードを追加するには (example.com)

ルートドメインのエイリアスレコードをさらに追加して、そのレコードがトラフィックを www.example.com にリダイレクトする S3 バケットを指すようにします。CloudFront ディストリビューションへのトラフィックのルーティングの詳細については、「ドメイン名を使用してトラフィックを Amazon CloudFront ディストリビューションにルーティングする」を参照してください。

  1. ナビゲーションペインで [Hosted zones] を選択します。

  2. ホストゾーンリストから、ドメインの名前を選択します。

  3. [Create record (レコードを作成)] を選択します。

    [Quick create record] (レコードのクイック作成) ビューが表示されている場合は、[Switch to wizard] (ウィザードへの切り替え) を選択します。

    注記

    各レコードには、1 つのドメイン (example.com など) またはサブドメイン (www.example.com や test.example.com など) のトラフィックをどのようにルーティングするかについての情報が含まれます。レコードは、ドメインのホストゾーンに保存されます。

  4. [Simple routing (シンプルルーティング)]、[Next (次へ)] の順に選択します。

  5. [Define simple record (シンプルなレコードを定義)] を選択します。

  6. [Record name] (レコード名) では、デフォルト値をそのまま使用します。

  7. [Record type (レコードタイプ)] で、[ ‐ Routes traffic to an IPv4 address and some resourcesAWS (A ‐ IPv4 アドレスと一部の リソースにトラフィックをルーティングします)] を選択します。

  8. [Value/Route traffic to] (値/トラフィックのルーティング先) で、[Alias to CloudFront distribution] (CloudFront ディストリビューションへのエイリアス) を選択します。

  9. ディストリビューションを選択します。

    ディストリビューション名は、[Distributions] (ディストリビューション) リストの [Domain name] (ドメイン名) ボックスに表示されている名前と一致する必要があります (例えば、dddjjjkkk.cloudfront.net)。

  10. [Evaluate target health (ターゲットの正常性の評価)] で [No (いいえ)] を選択します。

  11. [Define simple record (シンプルなレコードを定義)] を選択します。

  12. [Configure records] (レコードを設定) ページで、[Create records] (レコードを作成) を選択します。

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

ウェブサイトが正常に動作していることを確認するには、ウェブブラウザを開いて以下の URL を入力します。

  • https://www.ドメイン名 (www.example.com など) – www.ドメイン名 のバケットにあるインデックスドキュメントが表示されます

  • https://ドメイン名 (example.com など) – リクエストが www.ドメイン名 のバケットにリダイレクトされます

状況によっては、期待される動作を実現するために、キャッシュの消去が必要になる場合があります。

インターネットトラフィックのルーティングの詳細については、「DNS サービスとしての Amazon Route 53 の設定」を参照してください。インターネットトラフィックの AWS リソースへのルーティングについては、AWS リソースへのインターネットトラフィックのルーティング を参照してください。