1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AWS初心者がS3で静的Webサイトを公開してみた

1
Posted at

はじめに

おきたと申します。
今回はS3を用いた静的Webサイトの公開を実施してみました。
ChatGPTに聞きながら簡単に実施できたので参考にしてみてください

経歴

・4月から新卒でIT企業に入社
・資格はAWS SAA、DVA、COAを取得

動機

・資格取得で培った知識を用いて実践してみたかった
・実際にAWSコンソールを触ってみたかった

S3で静的Webサイトを公開する意味

・サーバーを立てなくていいのでほぼ無課金で実施可能
・静的サイトが早く公開できる

Step1:アカウントを作成する

image.png
この流れに従えば、簡単に作成できます!
ルートユーザーという言葉が出ますが、なんでもできる最強ユーザーという認識でOKです

Step2:S3バケットを作成する

image.png
ログインするとこのページに来ます。
左上の検索窓にS3という風に入力します

image.png
汎用バケットの右側にバケットを作成というところを押すとバケットを作成できます

Step3:S3にファイルをアップロードする

今回は適当なファイルを作成し、バケットに入れてみましょう
ファイル名はindex.htmlとして
内容はこんな感じで作成してください。これはChatGPTに出してもらいました。

image.png

これをオブジェクトのアップロードというところからアップロードしてください。

image.png

#Step4:バケットポリシーを変更する
image.png
アクセス許可というところにバケットポリシーを入力するところがあります。
そこに図のようにコードを入れてください。
バケット名には自分のバケット名を入力してください。

今回は情報を取得することのみを許可しています。

Step5:ブロックパブリックアクセスをOFFにする

バケットポリシーと同じ、アクセス許可のところに、ブロックパブリックアクセスというところがあります。
これは、全ての人がリソースを除いたりアクセスすることを防ぐものです。
今回はWebサイトを載せるため、今回このブロックパブリックアクセスをOFFにします。
image.png

アクセスコントロール(ACL)とか出てきますが、無視で大丈夫です

Step6:静的ウェブサイトホスティングを有効にする

プロパティのところの一番下に
image.png
図のような画面が出てきます。

ここの静的ウェブサイトホスティングを有効にしてください

Step7:Webサイトを確認

ここから最後に確認していきましょう。
静的ウェブサイトホスティングの下のところに
http://バケット名.s3-website-ap-northeast-1.amazonaws.com
というところが表示されると思います。

そこをクリックしてみると、
image.png
図のように表示されます!

これで完了です

最後に

初めて自分でS3の静的ウェブサイトホスティングを実行してみましたが、意外と簡単でした。(もちろんChatGPTの活躍ありきですが)

他にも参考書で学んだものを少しずつ実践していこうと思います!

1
1
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
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?