コンテンツ配信をしよう
この章では、S3・CloudFront・Route 53・ACMを組み合わせた静的Webサイトの構築をハンズオン形式で学習します。これにより、独自ドメインとHTTPS対応の静的サイトを自分で構築できるようになります。
1. 本章の概要
1.1 本章の目的
現代のWebサイトは、単に静的ファイルを置いて公開するだけでなく、「独自ドメイン」「HTTPS対応」「世界中への高速配信」を組み合わせた運用が当たり前です。AWSではS3・CloudFront・Route 53・ACMの4サービスを組み合わせて、この構成を実現できます。本章では、AWSのコンテンツ配信のスタンダードな組み合わせを1つのフルスタックで扱います。
1.2 ハンズオンの流れ
静的ファイルの格納先としてS3バケットを作成し、CDNとしてCloudFrontを設定します。OAC（Origin Access Control）でS3を保護しつつ、Route 53で独自ドメインを取得・設定し、ACMで発行したSSL証明書をCloudFrontに紐付けてHTTPS化します。
1.3 事前準備
必要なツール
この章では、以下のツールを使用します。まだインストールしていない場合は、リンク先の手順に沿って準備をお願いします。
| ツール名 | 関連箇所 | 理由 |
|---|---|---|
| Visual Studio Code | Visual Studio Codeのインストール | S3にアップロードする index.html を作成するエディタとして使用する |
必要なアカウント
この章では、以下のアカウントを使用します。まだ用意していない場合は、リンク先の手順に沿って準備をお願いします。
| アカウント名 | 関連箇所 | 理由 |
|---|---|---|
| AWSアカウント | AWSアカウントの作成 | S3・CloudFront・Route53などのAWSリソースを構築する環境として使用する |
2. S3バケットの作成
実際に構築を開始します。
2.1 S3バケットを作成
まず、静的ウェブサイトのファイルを格納するためにS3バケットを作成します。
AWSマネジメントコンソールでS3のダッシュボードを開きます。
左側のメニューから「汎用バケット」をクリックし、右上の「バケットを作成」をクリックして作成画面に進みます。
下記の内容を設定してください。
| 設定項目 | 値 | 設定の基準 |
|---|---|---|
| バケット名 | devops-camp-bucket-＜account_id＞ | 全世界でユニークな名前が必要なため、アカウントIDを含めて一意性を確保 |
| オブジェクト所有者 | ACL無効（推奨） | 他のアカウントからの所有権変更リスクを防ぐ |
| パブリックアクセス | すべてブロック | CloudFront経由でのみアクセスさせ、直接公開を防ぐ |
| バージョニング | 有効 | HTMLファイルの変更履歴を残し、誤った変更からの復旧を可能にする |
| デフォルトの暗号化 | デフォルト | 公開情報のため追加の暗号化設定は不要 |
入力が完了したら「バケットの作成」をクリックします。
| ⚠️ 「バケット名は既に使用されています」エラーが表示される場合 |
|---|
S3バケット名は全世界でユニークである必要があります。アカウントIDや日付など、一意になる文字列を追加してください（例：devops-camp-bucket-123456789012-20240101）。 |
無事にバケットが作成できれば、ここまでの操作は完了です。
2.2 静的ファイルのアップロード
作成したS3バケットに、ウェブサイトの静的ファイルをアップロードします。
まず、HTMLファイルを用意します。
Visual Studio Codeで任意のフォルダを開き、エクスプローラで右クリックして「新しいファイル」から 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を選択します。
追加が終わったら、「アップロード」をクリックします。
無事にアップロードが完了したら、ここまでの操作は完了です。
3. CloudFrontディストリビューションの作成
CloudFrontの設定を行います。
3.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からのアクセスを許可する設定を追加してください。 |
以上の操作で、ディストリビューションの作成が完了です。
3.2 動作確認
続いて、動作確認を行っていきます。
CloudFrontのアプリケーションを動作させるためには、ディストリビューションドメイン名に記載のドメイン名を利用します。
https://＜ディストリビューションドメイン名＞/index.htmlをブラウザで実行することで、下記のようなWebサイトが開かれれば成功です。
4. ドメインの取得と設定
CloudFrontに設定するために独自ドメインを取得し、Route53で利用できるように設定します。
| 💡 ポイント |
|---|
| このセクションではAmazon Route 53を利用して独自ドメインを取得するため、1,000円〜2,000円程度の費用（実費）が発生します。費用を抑えたい方は、このセクションをスキップしても問題ありません。あるいは、「お名前.com」などで安価なドメインを取得して利用することも可能です。 |
4.1 ドメインの作成
独自ドメインを取得します。ドメインの取得は、レジストラ（ドメイン登録業者）を通じて行います。代表的なサービスには「お名前.com」などがありますが、AWSのRoute 53もその役割を担うことができます。今回は、AWSで一貫した管理を行うため、Route 53でドメインの取得を行います。
まずは、Route53のダッシュボードを開きます。
左側のメニューから「登録済みドメイン」を選択し、右上の「ドメインを登録」をクリックします。
ドメインが利用できるかどうかを確認します。
利用したいドメイン名を決めたら、それを入力し、「検索」をクリックします。
そうすると、Route53で購入できるドメインがあれば一覧に表示されるので、それを「選択」し、「チェックアウトに進む」をクリックします。
料金が表示されるため、それを確認します。自動更新をオンにしていると、1年後に再購入がされるため、もし一度きりの購入としたい場合は、これを「オフ」にしておいてください。
確認が終わったら「次へ」をクリックします。
続いて、登録者の連絡先を入力します。これは、ドメインを管理するレジストラやWHOISデータベースに登録される情報となります。入力が終わったら「次へ」をクリックします。
最後に確認画面が表示されるので、内容に問題がなければ「送信」をクリックします。
ドメインの登録には時間がかかりますが、完了するとメールが届きます。それまでしばらく待ちます。
左側のメニューから「リクエスト」をクリックすると、ステータスが「進行中」になっていることがわかります。
ドメインの購入が完了すると、ステータスが「成功」になります。
4.2 ホストゾーンの作成
先程作成したドメインに対して、ホストゾーンの設定を行います。
しかし、Route53でドメインを購入した場合、ホストゾーンは自動で作成されます。左側のメニューから「ホストゾーン」を選択すると、先程作成したドメインに対するホストゾーンが作成されていることがわかります。
初期状態として、NSレコードとSOAレコードが作成されています。
Route53でドメインを購入した場合、ここは確認のみでかまいません。
4.3 レコードの作成
ホストゾーンに、CloudFrontを接続先としたレコードを作成します。今回はエイリアスレコードを作成して、購入したドメインから、CloudFrontへアクセスできるようにします。
まずは，ホストゾーンの画面で、「レコードを作成」をクリックします。
レコード名の部分は空白で構いません。
レコードタイプは「A - IPv4 アドレス」を選択します。Route 53では、まずAレコードを選択してから「エイリアス」のスイッチを有効にすることで、エイリアスレコードとして設定できます。
トラフィックのルーティング先として、「CloudFront ディストリビューションへのエイリアス」を選びます。
その下の入力欄で作成済みの「CloudFront のドメイン名」を選択することで、このドメインへのアクセスが該当のディストリビューションへ転送されるようになります。
すべて入力が完了したら「レコードを作成」をクリックします。
無事にレコードが作成されれば、ここまでは成功です。
5. ACM証明書の取得
CloudFrontへのTLS/SSL通信を可能とするために、ACMにてサーバ証明書を取得しCloudFrontに設定します。
5.1 リージョンの切り替え
ACM証明書を作成する前に、リージョンを「バージニア北部（us-east-1）」に切り替えます。
AWSマネジメントコンソールの右上に表示されているリージョン名（例：「東京」）をクリックします。
ドロップダウンメニューが表示されるので、一覧から「米国東部（バージニア北部） us-east-1」を選択します。
リージョン名が「バージニア北部」に変わったことを確認してから、次の手順に進んでください。
| 💡 ポイント |
|---|
| CloudFrontはグローバルサービスであり、SSL証明書の参照先としてバージニア北部リージョンのACMのみをサポートしています。これはAWSの仕様であり、他のリージョンの証明書は使用できません。 |
5.2 証明書のリクエスト
ACMのダッシュボードを開き、「証明書をリクエスト」をクリックします。
証明書タイプに「パブリック証明書をリクエスト」を選択し、「次へ」をクリックします。
下記の内容を設定してください。
| 設定項目 | 値 | 設定の基準 |
|---|---|---|
| 証明書タイプ | パブリック証明書 | インターネット上で公開するWebサイトに使用 |
| ドメイン名 | 取得したドメイン名 | HTTPS通信を有効にするドメインを指定 |
| エクスポート | 無効 | プライベートキーをAWS内で安全に保管 |
| 検証方法 | DNS検証 | 証明書の自動更新が容易で運用負荷が低い |
| キーアルゴリズム | RSA 2048 | 幅広いブラウザ・デバイスとの互換性を確保 |
すべての入力内容に間違いがないことを確認したら、「リクエスト」ボタンをクリックして証明書の申請手続きを完了します。
証明書のリクエストが行われます。この後、ドメインの認証を行うことで、証明書が使えるようになります。
5.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分以内に完了します。 |
5.4 CloudFrontの設定変更
続いて、CloudFront側に証明書を登録していきます。
まず、対象となるディストリビューションの詳細画面において、「一般」タブが選択されていることを確認し、設定セクションの右上に配置されている「編集」ボタンをクリックします。
次に、設定の編集画面に遷移したら、「代替ドメイン名 (CNAMEs)」の項目にある「項目を追加」ボタンを押し、今回使用するカスタムドメインである「devopscamp.net」を入力します。続けて「カスタム SSL 証明書」のプルダウンメニューから、事前準備しておいた「devopscamp.net」に対応する証明書を選択し、セキュリティポリシーなどの必要項目が正しく設定されていることを確認した上で、画面最下部の「変更を保存」ボタンをクリックします。
| ⚠️ CloudFrontで証明書が選択できない場合 |
|---|
| CloudFrontで使用するACM証明書は、バージニア北部（us-east-1）リージョンで発行する必要があります。東京リージョンなど他のリージョンで発行した証明書は使用できません。ACMのダッシュボードでリージョンを「us-east-1」に切り替えて、証明書を再発行してください。 |
最後に、画面上部に設定が正常に更新されたことを示すメッセージが表示され、一般タブ内の代替ドメイン名およびカスタム SSL 証明書の欄に指定したドメインが正しく反映されていることを確認できれば、設定作業は完了です。
5.5 動作確認
実際にドメインが設定され、TLS/SSL通信が可能かを確認します。
https://＜ドメイン名＞/index.html
のURLをブラウザで開きます。
そうすると、以下のようにWebサイトが表示されれば、ここまでは成功です。
6. 不要リソースの削除
ハンズオンが終わったら、作成したリソースを削除します。以下の順序で削除してください。
6.1 CloudFrontディストリビューションの削除
CloudFrontのダッシュボードを開き、作成したディストリビューションを選択します。まず「無効化」を実行し、ステータスが「Deployed」から「Disabled」になるまで数分待ちます。無効化が完了したら、「削除」を実行してディストリビューションを削除します。
| ⚠️ 上記の手順でディストリビューションを削除できない場合 |
|---|
| CloudFrontは直近で大きな仕様変更があり、上記の手順では削除できない場合があります。その場合は個別にご質問ください。 |
6.2 S3バケットの削除
S3のダッシュボードを開き、作成したバケットを選択します。バケット内にオブジェクトが残っている場合は先に「空にする」をクリックして、すべてのオブジェクトを削除します。バケットが空になったら「削除」をクリックしてバケットを削除します。
6.3 ACM証明書の削除
ACMのダッシュボードを開き、作成した証明書を選択します。「削除」をクリックして証明書を削除します。
6.4 Route 53リソースの削除
Route 53のホストゾーンを開き、このセクションで作成したAレコードとCNAMEレコード（ACM検証用）を削除します。NSレコードとSOAレコードは初期状態から存在するものなので、削除しないでください。
レコードの削除が完了したら、ホストゾーン自体も削除します。ホストゾーンを選択し、「ホストゾーンの削除」をクリックしてください。
| 💡 ポイント |
|---|
| Route53でドメインを購入した場合、ホストゾーンを削除してもドメイン自体は削除されません。後のセクション（TerraformでWebアプリケーションをデプロイしよう）でホストゾーンをTerraformで再作成するため、ここで削除しておいてください。ホストゾーンを再作成するとネームサーバが変わりますが、Route53で購入したドメインの場合は自動的に新しいネームサーバに追従します。外部のドメインレジストラ（お名前.comなど）で取得したドメインの場合は、ホストゾーン再作成後にレジストラ側でNSレコードを更新する必要があります。 |
ドメイン自体は今後も別の用途で使用できるため、削除する必要はありません。ドメインの自動更新がオフになっていれば、翌年以降の課金は発生しません。
7. まとめ
この章では、CloudFrontを使った静的コンテンツ配信を体験しました。
- S3に静的ファイルを配置し、CloudFrontのオリジンとして参照する構成を組める
- CloudFrontのディストリビューションを作成し、世界中のエッジロケーションからコンテンツを高速配信できる
- OAC（Origin Access Control）を使い、S3への直接アクセスを防いでCloudFront経由のみに制限できる
- Route 53で独自ドメインを取得し、CloudFrontと紐付けてカスタムドメインで公開できる
- ACMで発行したSSL証明書をCloudFrontに紐付け、HTTPS通信を実現できる
- DNS検証により、証明書の自動更新を有効化できる
次の章では、AWSのフルスタックホスティングサービスであるAmplifyについて学びます。