[AWS](WA)S3 バケットオリジンを使用した CloudFront[AWS](WA)

AWS
2023.12.13

元ネタ

AWSのWell-Architected Frameworkを改めて整理。せっかくなんでハンズオン形式で学べるAWS Well-Architected Labsをやってみよう！ということで、備忘も兼ねて実践＆記録をしてみました。

Workshop Studio
Discover and participate in AWS workshops and GameDays
catalog.workshops.aws

前提条件

  • AWSアカウントがあること
  • Amazon S3 および Amazon CloudFront へのアクセス許可。

ハンズオン開始

0. 概要

このハンズオンでは、S3とCloudFrontを使用して静的Webコンテンツをホストする手順を説明します。

1. S3バケットの作成

まずは静的Webのコンテンツを配置するS3バケットを作成します。

S3バケットの作成手順

  1. S3コンソールを開く。
  2. 「バケットを作成」を選択する。
  1. 「一般的な設定」より、「AWSリージョン」を選択する。より近いリージョンが良い。「バケット名」に以下バケット命名規則に従ったバケット名を入力する。

バケット命名規則

  • バケット名の長さは 3 (最小) ～ 63 (最大) 文字にする必要があります。
  • バケット名には、小文字、数字、ドット (.)、およびハイフン (-) のみを使用できます。
  • バケット名は文字または数字で始まり、終わる必要があります。
  • バケット名には、隣接する 2 つのピリオドを含めることはできません。
  • バケット名は IP アドレス (たとえば、192.168.5.4) としてフォーマットされてはなりません。
  • バケット名は接頭辞xn--で始まってはなりません。
  • バケット名は接頭辞sthree-と接頭辞sthree-configuratorで始まってはなりません。
  • バケット名は接尾辞-s3aliasで終わってはなりません。このサフィックスは、アクセス ポイントのエイリアス名用に予約されています。詳細については、「S3 バケット アクセス ポイントにバケット スタイルのエイリアスを使用する」を参照してください。
  • バケット名は接尾辞--ol-s3で終わってはなりません。このサフィックスは、オブジェクト Lambda アクセス ポイントのエイリアス名用に予約されています。詳細については、「S3 バケット オブジェクト Lambda アクセス ポイントにバケット スタイルのエイリアスを使用する方法」を参照してください。
  • バケット名は、パーティション内のすべての AWS リージョンのすべての AWS アカウントにわたって一意である必要があります。パーティションはリージョンをグループ化したものです。AWS には現在aws(標準リージョン)、aws-cn(中国リージョン)、 aws-us-gov(AWS GovCloud (米国)) の 3 つのパーティションがあります。
  • バケット名は、バケットが削除されるまで、同じパーティション内の別の AWS アカウントで使用できません。
  • Amazon S3 Transfer Acceleration で使用されるバケットの名前にはドット (.) を含めることはできません。
  1. 「このバケットのブロックパブリックアクセス設定」にて「パブリックアクセスをすべて ブロック」を選択する。
  1. 「バケットのバージョニング」にて「有効にする」を選択する。
  1. 「バケットを作成」を選択する。

2. index.htmlファイルをアップロードする。

単純なindex.htmlファイルを作成し、1.で作成したS3バケットにアップロードします。

アップロード手順

  1. 以下の内容を含むindex.htmlファイルを作成する。
<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <h1>Example Heading</h1>
    <p>Example paragraph.</p>
  </body>
</html>
  1. S3コンソールを開く。
  2. 「汎用バケット」の一覧より1.で作成したバケットの詳細を開く。
  3. 「オブジェクト」より「アップロード」を選択する。
  1. 「ファイルとフォルダ」より「ファイルを追加」を選択し、index.htmlファイルをアップロードする。
  1. 「アップロード」を選択する。
  2. 「アップロード：ステータス」でアップロードが成功したことを確認する。

3. CloudFrontを構成する

作成したS3を用いてサービスを提供するようにCloudFrontディストリビューションを作成します。

CloudFrontディストリビューションの作成手順

  1. CloudFrontコンソールを開く。
  2. 「ディストリビューションを作成」を選択する。
  1. 「オリジン」にて「オリジンドメイン」に作成したS3を選択する。更に「オリジンアクセス」で「Origin access control settings (recommended)」を選択し、「コントロール設定を作成」を選択する。
  1. 開いた「Create control setting」では初期表示のまま「作成」を選択する。
  1. 「ウェブアプリケーションファイアウォール（WAF）」で「セキュリティ保護を有効にしないでください」を選択する。
  1. 「設定」にて「デフォルトルートオブジェクト」に「index.html」（アップロードしたindex.htmlファイル）を入力し、「ディストリビューションを作成」を選択する。
  1. ディストリビューションの作成完了を確認し、「S3バケットのポリシーを更新する必要があります」より「ポリシーをコピー」を選択し、コピーする。
  1. S3コンソールを開く。
  2. 対象となるS3バケットの詳細を開く。
  3. 「アクセス許可」タブの「バケットポリシー」より「編集」を選択する。
  1. 「バケットポリシーを編集」の「ポリシー」に7.でコピーしたポリシーを貼り付ける。
  2. 「変更の保存」を選択する。
  3. CloudFrontコンソールを開く。
  4. 対象のディストリビューションの詳細を開く。
  5. 「一般」タブの「詳細」にある「最終変更日」が「デプロイ」から現在の日時に変わっていることを確認する。
  1. 「一般」タブの「詳細」にある「ディストリビューションドメイン名」をコピーする。
  2. ブラウザのURLに16でコピーしたドメイン名を貼り付け、index.htmlの内容が表示されることを確認する。
タイトルとURLをコピーしました