むらじゅん風呂具

ITエンジニアとたまに歌手と司会などで活動する村中淳のブログ

【AWS】S3のStatic website hosting を使って簡単にWebページを作ってみた

今日はS3を触ってみようと思い、
Static website hosting を使って簡単にWebページを作成する。

Amazon S3 での静的ウェブサイトのホスティング

バケットを作成

AWS S3 マネジメントコンソールからバケットを作成する

f:id:pj124183:20200105101211p:plain

次にバケット名、リージョンを編集する

f:id:pj124183:20200105101346p:plain

オプションの設定画面に移るが、今回は設定せず次へ

アクセス許可の設定画面にて、
今回はWebページ公開してみるので、
パブリックアクセスをすべてブロック のチェックを外す

f:id:pj124183:20200105101732p:plain

最後に確認画面が出てくるので、バケットを作成

バケットが出来ていることを確認

f:id:pj124183:20200105103031p:plain

バケットポリシーの作成

作成したバケットをクリック、アクセス権限 タブから[バケットポリシー]をクリック

バケットポリシーエディターが開かれるので入力

バケット内のオブジェクトをパブリックに読み取り可能にするには、
すべてのユーザーに s3:GetObject アクセス許可を付与するバケットポリシーを作成する必要がある。  

必要なバケットポリシーは以下より引用
ウェブサイトアクセスに必要なアクセス許可

{
  "Version":"2012-10-17",
  "Statement":[{
    "Sid":"PublicReadGetObject",
        "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::<作成したバケット>/*"
      ]
    }
  ]
}

保存すると、パブリックアクセス権限があります と表示されますが、
公開用なので今回は気にせず。

f:id:pj124183:20200105103805p:plain

・index.htmlファイルのアップロード

Hello World 」と記載したindex.htmlファイルをアップロード

概要 タブから[アップロード]

f:id:pj124183:20200105104108p:plain

ファイルをアップロードして、次へ

f:id:pj124183:20200105104258p:plain

アクセス許可の設定画面に移るが、そのまま次へ

プロパティ設定画面でスタンダードが設定されていることを確認
そのまま次へ

f:id:pj124183:20200105104523p:plain

最後に確認画面が表示されるので、アップロードをクリック

ファイルがアップロードされていることを確認

f:id:pj124183:20200105104648p:plain

・Static website hostingの設定

プロパティ タブから Static website hosting をクリック

f:id:pj124183:20200105104932p:plain

Static website hosting 設定画面が出てくるので、
[このバケットを使用してウェブサイトをホストする] をチェック

インデックスドキュメントに、先ほどアップロードしたファイル名を入力

f:id:pj124183:20200105105238p:plain

入力後、保存するとバケットホスティングにチェックが入っている状態

f:id:pj124183:20200105105531p:plain

・アクセス確認

アクセス先のURLは、Static website hosting をクリックして
中にあるエンドポイントのURLになる

f:id:pj124183:20200105105731p:plain

無事にHello World を確認

f:id:pj124183:20200105105925p:plain

とりあえず簡単にサイト構築完了。
うむ、便利。ごっつあんです。