おっさん社内SEエンジニアの勉強ブログ

勉強記録のブログとなります。

SAA学習-S3-静的WEBホスティングの活用

今回のテーマ:静的WEBホスティング

主要サービスの公式資料

Amazon S3 を使用して静的ウェブサイトをホスティング docs.aws.amazon.com

概要

  • WEBサイト(JavaScriptで画面制御など)をしないテキストページのみ掲載するWEBサイトのみの場合活用します。
  • 静的WEBサイト用のバケットは他のバケットと混在させないようするため新規で作成することが望ましいです。
  • 公開するHTMLドキュメントとバケットポリシーが必要となります。

実際の手順

f:id:In-houseSE:20210506111532p:plain

f:id:In-houseSE:20210506111638p:plain

  • 静的WEBサイトは外部公開することが多いため、パブリックアクセスのブロックを解除

f:id:In-houseSE:20210506111841p:plain

  • その他のオプションについては、公開する要件のみならば、設定しなくて問題ありません。 設定確認後にバケットを作成をクリック

f:id:In-houseSE:20210506112056p:plain

f:id:In-houseSE:20210506113205p:plain

  • 以下の設定に変更し、変更の保存をクリック

設定項目

  • 静的ウェブサイトホスティング:有効にする
  • ホスティングタイプ:静的ウェブサイトをホストする
  • インデックスドキュメント:index.html
  • エラードキュメント:error.html

f:id:In-houseSE:20210506113703p:plain

  • 設定が有効になったことを確認

f:id:In-houseSE:20210506114136p:plain

cf)有効化した後のリンクをクリックした場合、以下のようになります。(公開するHTMLドキュメントが存在してないため)

f:id:In-houseSE:20210506114219p:plain

  • 該当するドキュメントファイルをアップロード

f:id:In-houseSE:20210506114425p:plain

  • アップロードが終了後、該当するドキュメントを公開するためアクション-公開するをクリック

f:id:In-houseSE:20210506114544p:plain

  • 公開対象を確認し、公開するをクリック

f:id:In-houseSE:20210506114614p:plain

  • 該当するバケットを選択し、アクセス許可タグよりバケットポリシーを検索し、編集するをクリック

f:id:In-houseSE:20210506115036p:plain

  • アクセス制御を行うJSONコードを記載し、変更の保存をクリック ※Resourceの値は適用するバケットのarn値になります。

f:id:In-houseSE:20210506115913p:plain

JSONコード

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::bucket-name/*"
        }
    ]
}
  • 動作確認でWEBページが表示されていることを確認

f:id:In-houseSE:20210506120059p:plain

今回のテーマは以上です。