0
2

More than 3 years have passed since last update.

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

Posted at

初めに

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

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

こんな人が読むといいかも

・『AWSのS3上に静的なWebサイトを公開して、「Hello World」を表示するまでの全手順』を読んだけど、AWSの画面が変わりできなかった。
・一先ず、Webサイトを立ち上げてみたい。

ゴール

「Hello World」と表示されるindex.htmlをWebサイトで公開する。

手順

1.AWSにログインし、「すべてのサービス」から、「S3」を選択します。
image.png
2.『パケットを作成』をクリック
image.png
3.パケット作成画面で以下の設定をします。
・一般的な設定
 パケット名:任意の名前を付けます。
 AWSリージョン:アジアパシフィック(東京)ap-northeast-1
image.png
・このパケットののブロックパブリックアクセス設定
 パブリックアクセスをすべてブロック:チェックを外す
                   ※チェックを外せば関連して4つのチェックボックスも外れます。
image.png
 チェックを外すとパケットとオブジェクトが公開される可能性がありますと警告が出るので、こちらの承認チェックをします。
image.png

・パケットのバージョニング
 パケットのバージョニング:無効にする(デフォルト)
・タブ-オプション
 変更なし
・デフォルトの暗号化
 サーバー側の暗号化:無効にする(デフォルト)
image.png
 パケットを作成をクリックします。
image.png
4.S3のコンソール画面に戻るとバケットが作成されています。バケット名をクリックします。
image.png
5.index.htmlファイルをドラック&ドロップします。※アップロードをクリックしても可能です。
image.png

6.アップロード画面にファイルがあることを確認し、アップロードをクリックします。
image.png

7.アップロードが完了したら、再度S3のコンソール画面に戻り、バケット名をクリックします。
image.png
8.index.htmlファイルが存在するのでチェックし、アクションのプルダウンから公開するをクリックします。※フォルダをアップロードしている場合も同様にチェックしてください。
image.png

9.公開するファイル名が表示されるので、問題が無ければ『公開する』をクリックします。
image.png

10.公開が完了したら、index.htmlファイルをクリックします。
image.png

11オブジェクトURLにある始まるURLをクリックします。
image.png
出来た!!
image.png

最後に

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

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2