ハンズオン(簡易版): CloudFront入門

事前作業1.2. S3バケットの静的Webサイトホスティング設定の作成 (ハイレベルコマンド: handson-cli-cloudfront-highlevel-XXXXXXXXXXXX)

手順の目的 [why]

コンテンツ用のS3バケット"handson-cli-cloudfront-highlevel-XXXXXXXXXXXX"にハイレベルコマンドでWebsiteホスティングの設定をし、静的Webサーバとして利用できるようにします。

設定値の指定

設定値の指定

手順に必要な設定値を変数に格納をします。

1. S3バケット名

S3バケット名を指定します。

変数の設定:

S3_BUCKET_PREFIX='handson-cli-cloudfront-highlevel'

コマンド:

AWS_ID=$( \
  aws sts get-caller-identity \
    --query 'Account' \
    --output text \
) \
  && echo ${AWS_ID}

結果(例):

XXXXXXXXXXXX

変数の設定:

S3_BUCKET_NAME="${S3_BUCKET_PREFIX}-${AWS_ID}" \
  && echo ${S3_BUCKET_NAME}

結果(例):

handson-cli-cloudfront-highlevel-XXXXXXXXXXXX

2. インデックスファイル

インデックスファイルを指定します。

変数の設定:

S3_DOC_INDEX='index.html'

3. エラーページファイル

エラーページファイルを指定します。

変数の設定:

S3_DOC_ERROR='error.html'

設定値の確認

各変数に正しい設定値が格納されていることを確認しながら保存します。

変数の確認:

cat << END

  # 1. S3_BUCKET_NAME:"handson-cli-cloudfront-highlevel-XXXXXXXXXXXX"
       S3_BUCKET_NAME="${S3_BUCKET_NAME}"
  # 2. S3_DOC_INDEX:"index.html"
       S3_DOC_INDEX="${S3_DOC_INDEX}"
  # 3. S3_DOC_ERROR:"error.html"
       S3_DOC_ERROR="${S3_DOC_ERROR}"

END

下段の変数が入っていない、もしくは上段と同等の値が入っていない場合は、それぞれの手順番号に戻って変数の設定を行います。

処理の実行

S3バケットに静的Webサイトホスティングの設定をします。

変数の確認

cat << END

  # S3_BUCKET_NAME:"handson-cli-cloudfront-highlevel-XXXXXXXXXXXX"
    S3_BUCKET_NAME="${S3_BUCKET_NAME}"
  # S3_DOC_INDEX:"index.html"
    S3_DOC_INDEX="${S3_DOC_INDEX}"
  # S3_DOC_ERROR:"error.html"
    S3_DOC_ERROR="${S3_DOC_ERROR}"

END

コマンド:

aws s3 website "s3://${S3_BUCKET_NAME}" \
  --index-document ${S3_DOC_INDEX} \
  --error-document ${S3_DOC_ERROR}

結果(例):

(出力なし)

完了確認

「S3バケット"handson-cli-cloudfront-highlevel-XXXXXXXXXXXX"の静的Webサイトホスティングの設定が有効になっている。」ことを確認します。

コマンド:

aws s3api get-bucket-website \
  --bucket ${S3_BUCKET_NAME} \
  --query "length(@)"

結果(例):

2

手順の完了

(参考) マネジメントコンソールの確認

  • 左ペインの"バケット"をクリックします。

バケット一覧(画面)

  • 検索欄にバケット名"handson-cli-cloudfront-highlevel-XXXXXXXXXXXX"を入力します。

  • バケット名"handson-cli-cloudfront-highlevel-XXXXXXXXXXXX"(リンク)をクリックします。

バケット詳細画面

  • "プロパティ"タブをクリックします。

  • "静的ウェブサイトホスティング"セクションの"静的ウェブサイトホスティング"に"有効"が表示されていることを確認します。