コンテンツ配信をしよう

このハンズオンでは、CloudFront・Route 53・ACMを使った静的コンテンツ配信について実際にハンズオン形式で手を動かしながら体験します。

S3バケットの作成と静的ファイルのアップロード
CloudFrontディストリビューションの設定
OAC（Origin Access Control）によるS3との連携
Route 53での独自ドメイン取得と設定
ACMでのSSL証明書発行
HTTPS対応の静的ウェブサイト公開

1. 事前準備

この講座のハンズオンでは、以下のツールやアカウントが必要です。まだ準備できていない場合は、リンク先の手順に沿って準備をお願いします。

AWSアカウント

2. ハンズオンの概要

静的ウェブサイトの元となるHTMLファイルを格納するため、S3バケットを作成します。

続いて、S3バケット内のデータを世界中に配信するためにCloudFrontを設定します。この際、OAC (Origin Access Control) を設定してS3と接続し、安全に公開できる状態にします。OACの詳しい仕様はRestrict access to an Amazon S3 origin（AWS公式ドキュメント）に記載があります。

その後、Route 53にて独自ドメインを取得し、AWS上でドメイン管理ができるように設定します。

最後に、ACM (AWS Certificate Manager) にて独自ドメイン用のSSL証明書を発行し、CloudFrontと紐付けることで、HTTPSによる暗号化通信を実現します。

このハンズオンで構築する構成の全体像を以下の図に示します。

3. S3バケットの作成

実際に構築を開始します。

3.1 S3バケットを作成

まず、静的ウェブサイトのファイルを格納するためにS3バケットを作成します。

AWSマネジメントコンソールでS3のダッシュボードを開きます。

左側のメニューから「汎用バケット」をクリックし、右上の「バケットを作成」をクリックして作成画面に進みます。

下記の内容を設定してください。

設定項目	値	設定の基準
バケット名	devops-camp-bucket-＜account_id＞	全世界でユニークな名前が必要なため、アカウントIDを含めて一意性を確保
オブジェクト所有者	ACL無効（推奨）	他のアカウントからの所有権変更リスクを防ぐ
パブリックアクセス	すべてブロック	CloudFront経由でのみアクセスさせ、直接公開を防ぐ
バージョニング	有効	HTMLファイルの変更履歴を残し、誤った変更からの復旧を可能にする
デフォルトの暗号化	デフォルト	公開情報のため追加の暗号化設定は不要

入力が完了したら「バケットの作成」をクリックします。

⚠️ 「バケット名は既に使用されています」エラーが表示される場合
S3バケット名は全世界でユニークである必要があります。アカウントIDや日付など、一意になる文字列を追加してください（例：`devops-camp-bucket-123456789012-20240101`）。

無事にバケットが作成できれば、ここまでの操作は完了です。

3.2 静的ファイルのアップロード

作成したS3バケットに、ウェブサイトの静的ファイルをアップロードします。

まず、HTMLファイルを用意します。

ローカルの任意の場所にindex.htmlというファイルを作成します。

index.html  ← このファイルを作成

作成したファイルに以下の内容を記述して保存します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CloudFront Hands-on</title>
</head>
<body>
    <h1>Hello from CloudFront!</h1>
    <p>This page is delivered via Amazon CloudFront.</p>
</body>
</html>

作成したファイルをS3バケットにアップロードします。

先程作成したS3バケットを開き、「アップロード」をクリックします。

その後、「ファイルを追加」をクリックし、先程作ったindex.htmlを選択します。

追加が終わったら、「アップロード」をクリックします。

無事にアップロードが完了したら、ここまでの操作は完了です。

4. CloudFrontディストリビューションの作成

CloudFrontの設定を行います。

4.1 ディストリビューションを作成

CloudFrontの設定単位であるディストリビューションを作成します。

AWSマネジメントコンソールで、CloudFrontのダッシュボードを開きます。

その後、左側のメニューから「ディストリビューション」を選択し、右上の「ディストリビューションを作成」をクリックします。

次に、CloudFrontのプランを選びます。利用できるオプションにより料金が決まりますが、今回は練習用のため、無料のFreeを選択したうえで、Nextを選択します。

下記の内容を設定してください。

設定項目	値	設定の基準
ディストリビューション名	my-web-page	リソースを識別しやすくする
Origin Type	Amazon S3	S3バケットに保存した静的ファイルを配信
オリジン	作成したS3バケット	静的ファイルの配信元として指定
WAF	設定なし	今回は練習用のため省略（本番環境では設定を推奨）

入力が終わったら「Next」をクリックし、確認画面で「Create distribution」をクリックします。

無事にディストリビューションが作成されますが、このタイミングではまだ、最終変更日が「デプロイ」となっています。この状態だとまだ初期設定が終わっておらず、該当のページを表示できません。

最終変更日に本日日付が入るまで、数分待ちます。

⚠️ CloudFrontでAccessDeniedエラーが表示される場合
OAC（Origin Access Control）の設定が正しくないか、S3バケットポリシーが設定されていない可能性があります。CloudFrontの「オリジン」設定でOACが選択されていることを確認し、S3バケットポリシーにCloudFrontからのアクセスを許可する設定を追加してください。

以上の操作で、ディストリビューションの作成が完了です。

4.2 動作確認

続いて、動作確認を行っていきます。

CloudFrontのアプリケーションを動作させるためには、ディストリビューションドメイン名に記載のドメイン名を利用します。

https://＜ディストリビューションドメイン名＞/index.htmlをブラウザで実行することで、下記のようなWebサイトが開かれれば成功です。

5. ドメインの取得と設定

CloudFrontに設定するために独自ドメインを取得し、Route53で利用できるように設定します。

💡 ポイント
このハンズオンではAmazon Route 53を利用して独自ドメインを取得するため、1,000円〜2,000円程度の費用（実費）が発生します。費用を抑えたい方は、このセクションをスキップしても問題ありません。あるいは、「お名前.com」などで安価なドメインを取得して利用することも可能です。

5.1 ドメインの作成

独自ドメインを取得します。ドメインの取得は、レジストラ（ドメイン登録業者）を通じて行います。代表的なサービスには「お名前.com」などがありますが、AWSのRoute 53もその役割を担うことができます。今回は、AWSで一貫した管理を行うため、Route 53でドメインの取得を行います。

まずは、Route53のダッシュボードを開きます。

左側のメニューから「登録済みドメイン」を選択し、右上の「ドメインを登録」をクリックしています。

ドメインが利用できるかどうかを確認します。

利用したいドメイン名を決めたら、それを入力し、「検索」をクリックします。

そうすると、Route53で購入できるドメインがあれば一覧に表示されるので、それを「選択」し、「チェックアウトに進む」をクリックします。

料金が表示されるため、それを確認します。自動更新をオンにしていると、1年後に再購入がされるため、もし一度きりの購入としたい場合は、これを「オフ」にしておいてください。

確認が終わったら「次へ」をクリックします。

続いて、登録者の連絡先を入力します。これは、ドメインを管理するレジストラやWHOISデータベースに登録される情報となります。入力が終わったら「次へ」をクリックします。

最後に確認画面が表示されるので、内容に問題がなければ「送信」をクリックします。

ドメインの登録には時間がかかりますが、完了するとメールが届きます。それまでしばらく待ちます。

左側のメニューから「リクエスト」をクリックすると、ステータスが「進行中」になっていることがわかります。

ドメインの購入が完了すると、ステータスが「成功」になります。

5.2 ホストゾーンの作成

先程作成したドメインに対して、ホストゾーンの設定を行います。

しかし、Route53でドメインを購入した場合、ホストゾーンは自動で作成されます。左側のメニューから「ホストゾーン」を選択すると、先程作成したドメインに対するホストゾーンが作成されていることがわかります。

初期状態として、NSレコードとSOAレコードが作成されています。

Route53でドメインを購入した場合、ここは確認のみでかまいません。

5.3 レコードの作成

ホストゾーンに、CloudFrontを接続先としたレコードを作成します。今回はエイリアスレコードを作成して、購入したドメインから、CloudFrontへアクセスできるようにします。

まずは，ホストゾーンの画面で、「レコードを作成」をクリックします。

レコード名の部分は空白で構いません。

レコードタイプは「A - IPv4 アドレス」を選択します。Route 53では、まずAレコードを選択してから「エイリアス」のスイッチを有効にすることで、エイリアスレコードとして設定できます。

トラフィックのルーティング先として、「CloudFront ディストリビューションへのエイリアス」を選びます。

その下の入力欄で作成済みの「CloudFront のドメイン名」を選択することで、このドメインへのアクセスが該当のディストリビューションへ転送されるようになります。

すべて入力が完了したら「レコードを作成」をクリックします。

無事にレコードが作成されれば、ここまでは成功です。

6. ACM証明書の取得

CloudFrontへのTLS/SSL通信を可能とするために、ACMにてサーバ証明書を取得しCloudFrontに設定します。

6.1 リージョンの切り替え

ACM証明書を作成する前に、リージョンを「バージニア北部（us-east-1）」に切り替えます。

AWSマネジメントコンソールの右上に表示されているリージョン名（例：「東京」）をクリックします。

ドロップダウンメニューが表示されるので、一覧から「米国東部（バージニア北部） us-east-1」を選択します。

リージョン名が「バージニア北部」に変わったことを確認してから、次の手順に進んでください。

💡 ポイント
CloudFrontはグローバルサービスであり、SSL証明書の参照先としてバージニア北部リージョンのACMのみをサポートしています。これはAWSの仕様であり、他のリージョンの証明書は使用できません。

6.2 証明書のリクエスト

ACMのダッシュボードを開き、「証明書をリクエスト」をクリックします。

証明書タイプに「パブリック証明書をリクエスト」を選択し、「次へ」をクリックします。

下記の内容を設定してください。

設定項目	値	設定の基準
証明書タイプ	パブリック証明書	インターネット上で公開するWebサイトに使用
ドメイン名	取得したドメイン名	HTTPS通信を有効にするドメインを指定
エクスポート	無効	プライベートキーをAWS内で安全に保管
検証方法	DNS検証	証明書の自動更新が容易で運用負荷が低い
キーアルゴリズム	RSA 2048	幅広いブラウザ・デバイスとの互換性を確保

すべての入力内容に間違いがないことを確認したら、「リクエスト」ボタンをクリックして証明書の申請手続きを完了します。

証明書のリクエストが行われます。この後、ドメインの認証を行うことで、証明書が使えるようになります。

6.3 ドメインの認証

証明書のリクエストが完了すると、ステータスが「保留中の検証」となります。ドメインの所有権を証明するため、まずはドメイン一覧セクションにある「Route 53 でレコードを作成」ボタンをクリックします。

遷移後の画面では、対象のドメインが選択されていること、および「ドメインは Route 53 にありますか？」という項目が「はい」になっていることを確認し、右下の「レコードを作成」ボタンを押下します。これにより、検証に必要なCNAMEレコードが自動的にRoute 53のホストゾーンへ追加されます。

レコード作成後、Route 53の管理画面を確認すると、実際に検証用のCNAMEレコードが登録されていることが分かります。

DNSの変更が反映されるまで数分から数十分ほど待機すると、ACM画面上のドメインステータスが「保留中の検証」から緑色の「成功」という表示に切り替わり、証明書が正式に発行されます。

⚠️ ACM証明書の検証が「保留中」のまま進まない場合
(1) Route 53のホストゾーンに検証用のCNAMEレコードが正しく作成されているか確認 (2) 外部のドメインレジストラ（お名前.comなど）を使用している場合は、そちらのDNS設定でCNAMEレコードを手動で追加する必要があります (3) DNSの反映には最大48時間かかることがありますが、通常は30分以内に完了します。

⚠️ ACM証明書の検証が「保留中」のまま進まない場合

(1) Route 53のホストゾーンに検証用のCNAMEレコードが正しく作成されているか確認 (2) 外部のドメインレジストラ（お名前.comなど）を使用している場合は、そちらのDNS設定でCNAMEレコードを手動で追加する必要があります (3) DNSの反映には最大48時間かかることがありますが、通常は30分以内に完了します。

6.4 CloudFrontの設定変更

続いて、CloudFront側に証明書を登録していきます。

まず、対象となるディストリビューションの詳細画面において、「一般」タブが選択されていることを確認し、設定セクションの右上に配置されている「編集」ボタンをクリックします。

次に、設定の編集画面に遷移したら、「代替ドメイン名 (CNAMEs)」の項目にある「項目を追加」ボタンを押し、今回使用するカスタムドメインである「devopscamp.net」を入力します。続けて「カスタム SSL 証明書」のプルダウンメニューから、事前準備しておいた「devopscamp.net」に対応する証明書を選択し、セキュリティポリシーなどの必要項目が正しく設定されていることを確認した上で、画面最下部の「変更を保存」ボタンをクリックします。

⚠️ CloudFrontで証明書が選択できない場合
CloudFrontで使用するACM証明書は、バージニア北部（us-east-1）リージョンで発行する必要があります。東京リージョンなど他のリージョンで発行した証明書は使用できません。ACMのダッシュボードでリージョンを「us-east-1」に切り替えて、証明書を再発行してください。

最後に、画面上部に設定が正常に更新されたことを示すメッセージが表示され、一般タブ内の代替ドメイン名およびカスタム SSL 証明書の欄に指定したドメインが正しく反映されていることを確認できれば、設定作業は完了です。

6.5 動作確認

実際にドメインが設定され、TLS/SSL通信が可能かを確認します。

https://＜ドメイン名＞/index.html

のURLをブラウザで開きます。

そうすると、以下のようにWebサイトが表示されれば、ここまでは成功です。

7. 不要リソースの削除

ハンズオンが終わったら、作成したリソースを削除します。以下の順序で削除してください。

7.1 CloudFrontディストリビューションの削除

CloudFrontのダッシュボードを開き、作成したディストリビューションを選択します。まず「無効化」を実行し、ステータスが「Deployed」から「Disabled」になるまで数分待ちます。無効化が完了したら、「削除」を実行してディストリビューションを削除します。

⚠️ 上記の手順でディストリビューションを削除できない場合
CloudFrontは直近で大きな仕様変更があり、上記の手順では削除できない場合があります。その場合は個別にご質問ください。

7.2 S3バケットの削除

S3のダッシュボードを開き、作成したバケットを選択します。バケット内にオブジェクトが残っている場合は先に「空にする」をクリックして、すべてのオブジェクトを削除します。バケットが空になったら「削除」をクリックしてバケットを削除します。

7.3 ACM証明書の削除

ACMのダッシュボードを開き、作成した証明書を選択します。「削除」をクリックして証明書を削除します。

7.4 Route 53リソースの削除

Route 53のホストゾーンを開き、このハンズオンで作成したAレコードとCNAMEレコード（ACM検証用）を削除します。NSレコードとSOAレコードは初期状態から存在するものなので、削除しないでください。

レコードの削除が完了したら、ホストゾーン自体も削除します。ホストゾーンを選択し、「ホストゾーンの削除」をクリックしてください。

💡 ポイント
Route53でドメインを購入した場合、ホストゾーンを削除してもドメイン自体は削除されません。後の講座（TerraformでWebアプリをデプロイしよう）でホストゾーンをTerraformで再作成するため、ここで削除しておいてください。ホストゾーンを再作成するとネームサーバが変わりますが、Route53で購入したドメインの場合は自動的に新しいネームサーバに追従します。外部のドメインレジストラ（お名前.comなど）で取得したドメインの場合は、ホストゾーン再作成後にレジストラ側でNSレコードを更新する必要があります。

💡 ポイント

Route53でドメインを購入した場合、ホストゾーンを削除してもドメイン自体は削除されません。後の講座（TerraformでWebアプリをデプロイしよう）でホストゾーンをTerraformで再作成するため、ここで削除しておいてください。ホストゾーンを再作成するとネームサーバが変わりますが、Route53で購入したドメインの場合は自動的に新しいネームサーバに追従します。外部のドメインレジストラ（お名前.comなど）で取得したドメインの場合は、ホストゾーン再作成後にレジストラ側でNSレコードを更新する必要があります。

ドメイン自体は今後も別の用途で使用できるため、削除する必要はありません。ドメインの自動更新がオフになっていれば、翌年以降の課金は発生しません。

8. まとめ

このハンズオンでは、CloudFrontを使った静的コンテンツ配信を体験しました。

S3は静的ファイルを保存するストレージサービスで、CloudFrontのオリジンとして使用できる
CloudFrontはCDNサービスで、世界中のエッジロケーションからコンテンツを高速配信する
OAC（Origin Access Control）でS3への直接アクセスを防ぎ、CloudFront経由のみでアクセスさせる
Route 53で独自ドメインを取得し、CloudFrontと紐付けることでカスタムドメインを使用できる
ACM（AWS Certificate Manager）でSSL証明書を発行し、HTTPS通信を実現する
DNS検証を使うことで、証明書の自動更新が可能になる