AWSのS3上に静的なWebサイトを公開するまで【2021年版】

#初めに
こちらの記事は、私が『[AWSのS3上に静的なWebサイトを公開して、「Hello World」を表示するまでの全手順]
(https://qiita.com/harufuji/items/b3ebb4ac059587e6168f)』を参考にWebサイトを立ち上げた際、
AWSのセキュリティが変更されたことにより手順通りにできなかったので、それを回避した備忘録です。

参照記事の『バケットを作成して、HTMLファイルをAWS上に保存して、公開する。』のみ記載しています。
※独自ドメイン、リダイレクトの処理は記載しておりません。(いずれ書くかも。。。)

##こんな人が読むといいかも
・『[AWSのS3上に静的なWebサイトを公開して、「Hello World」を表示するまでの全手順]
(https://qiita.com/harufuji/items/b3ebb4ac059587e6168f)』を読んだけど、AWSの画面が変わりできなかった。
・一先ず、Webサイトを立ち上げてみたい。
##ゴール
「Hello World」と表示されるindex.htmlをWebサイトで公開する。

##手順
１．AWSにログインし、「すべてのサービス」から、「S3」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/9f638133-7e78-fa41-dc94-733f021271b9.png)
２．『パケットを作成』をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/b549ece2-4478-8571-2eb7-bdfe76feacf4.png)
３．パケット作成画面で以下の設定をします。
・一般的な設定
　パケット名：任意の名前を付けます。
　AWSリージョン：アジアパシフィック(東京)ap-northeast-1
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/65f965a9-8557-bf4b-7d72-ea2695b5b121.png)
・このパケットののブロックパブリックアクセス設定
　パブリックアクセスをすべてブロック：**チェックを外す**
　　　　　　　　　　　　　　　　　　　※チェックを外せば関連して4つのチェックボックスも外れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/5bbda3f6-95a7-2b5b-baf2-3ba66717b407.png)
　チェックを外すとパケットとオブジェクトが公開される可能性がありますと警告が出るので、こちらの承認チェックをします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/aa05bc44-38d6-cd0b-bbb4-68f59fb27831.png)

・パケットのバージョニング
　パケットのバージョニング：無効にする(デフォルト)
・タブ-オプション
　変更なし
・デフォルトの暗号化
　サーバー側の暗号化：無効にする(デフォルト)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/6525e091-0e17-9033-7d3b-c3728eab6abf.png)
　パケットを作成をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/124f0ca3-69a5-a18d-ea35-ab26e9589af3.png)
４．S3のコンソール画面に戻るとバケットが作成されています。バケット名をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/a46b526c-b4ec-a232-7bf6-f9b5249a863c.png)
５．index.htmlファイルをドラック＆ドロップします。※アップロードをクリックしても可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/c69ab4bc-ccfa-ea17-fc8c-d211dd539d81.png)

６．アップロード画面にファイルがあることを確認し、アップロードをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/4f5f6e23-7568-81d5-cfae-7af67f4acf9d.png)

7．アップロードが完了したら、再度S3のコンソール画面に戻り、バケット名をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/a46b526c-b4ec-a232-7bf6-f9b5249a863c.png)
８．index.htmlファイルが存在するのでチェックし、**アクションのプルダウンから公開するをクリック**します。※フォルダをアップロードしている場合も同様にチェックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/f8ad892a-e500-08a3-dc91-efb08efcc94c.png)


９．公開するファイル名が表示されるので、問題が無ければ『公開する』をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/a8c70667-da13-897b-a181-67bf55276afd.png)

１０．公開が完了したら、index.htmlファイルをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/7afc31b3-6cde-5785-5196-390381b43ca9.png)

１１オブジェクトURLにある始まるURLをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/53485adb-45f3-79c5-0a40-13f0a07d081b.png)
**出来た！！**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/eaf6be27-90cc-3ad7-e1e8-27a7a9f70f29.png)

##最後に
手順を行うとわかりますが、セキュリティをがばがばにしないと公開できません。(静的Webサイトはだいたいがばがばになるらしい)その為、個人情報などの重要情報はこちらに保管するのはおすすめしません。