【初心者向け】営業がS3を利用して静的Webサイトを立ち上げてみた

AWS営業部の洲崎です! 今回はS3で静的Webサイトを立ち上げてみました。 サイトが表示されるとこまでで、次回はCloudfrontとの連携をブログに上げていきます。
2020.07.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、AWS営業部の洲崎です!

今回はS3で静的Webサイトを立ち上げてみようと思います!
今日はサイトが表示されるとこまでで、次回はCloudfrontとの連携をブログに上げていきます。

※前回同様初心者向けです。
※勉強不足なところが多いと思いますので、気になる点があればコメント等でご指摘頂けますと幸いです。
※本ブログは2020/7/29時点での情報になります。

S3とは?

S3とは一言でいうとオブジェクトストレージサービスになります。
Amazon S3

ただのオブジェクトストレージサービスではありません。
イレブンナイン(99.999999999%)の堅牢性を持っていたり、暗号化やバージョニング等の多様な機能を持っている優秀なサービスです。
吉井さん八幡さんがブログにて纏めて頂いていますのでご確認ください。
[AWS Workshop] これから学ぶS3基礎
AWS再入門 Amazon S3編

今回はS3の機能の中で「静的ウェブサイトのホスティング」をやってみます!

バケット作成

では早速作っていきましょう!
まずはAWSマネージドコンソールにログインして、S3を検索、”バケットを作成する”を押してください。

バケットを作成するを押すとバケットの作成が立ち上がります。
バケット名は任意の文字を入力しましょう。
またこの時のバケット名は全世界でユニーク(唯一)なものを入力する必要があります。
私はsuzaki.netと入力します。(見ている方はそれ以外の記載をお願いします)

オプション設定の部分で、バージョニングやサーバアクセスのログ記録、Tag、暗号化について利用するか問われます。
バージョニングは、今後誤ってファイルを削除したりする場合設定されていたら、削除される前のバージョンに復元することが可能です。
ですが、バージョン毎に異なるファイルとして認識されるため、費用はバージョニングが設定されてない時より高くなります。
今回はWebサイトのホスティングを確認するだけなので特にオプションは選択せずに行きます。

次にアクセス許可について問われます。基本パブリックアクセスをブロックすることを推奨されます。
ただ今回はパブリックアクセスでWebサイトが立ち上がるか検証する為、”パブリックアクセスをすべてブロック”の✔を外します。

このように警告が出てきますが、今回は静的ウェブサイトホスティングの為、了承しましょう。

これでバケットが作成されました!

ウェブサイトホスティングの設定

次に作成したバケットに対してウェブサイトホスティングの設定をしましょう。
バケットを選択してプロパティのStatic website hostingをクリックしてください。

この時にインデックスドキュメントで表示したいhtml名を入力して保存します。

ただ、このままの状態だとアクセスしても拒否されます。
北野さんの下記ブログで説明がありますが、大前提として、AWSへのアクセスは全てデフォルトで拒否されます
S3バケットポリシーの具体例で学ぶAWSのPolicyドキュメント

その為、バケットに対してアクセス権限からバケットポリシーを設定しましょう。
今回はこちらのバケットポリシーを利用しました。

  
    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::xxxxxxx/*"
        }
    ]
}

※xxxxxxxのところは作成したバケット名を入力しましょう!(今回でいうとsuzaki.net)

上記をバケットポリシーに記載し保存する事で、パブリックアクセス権限になりました!

最後にhtmlのデータをS3にアップロードしましょう。
アップロードを押して、インデックスドキュメントに記載したhtmlファイルをアップロードしてください。

アップロードが終わりましたらStatic website hostingの画面を表示します。
そこでエンドポイントにあるURLをクリックすると・・・

無事設定したHTMLが表示されました!!

まとめ

今回はS3で静的Webサイトを立ち上げるまでをやってみました。

いかがだったでしょうか。S3は堅牢性のあるストレージサービスに加えWebサイトのホスティングも可能です。
一度S3をご検討いただけると嬉しいです。

また前回同様のご案内になりますが、弊社経由でAWSをご利用頂くことで、S3を5%OFFでご利用頂けます!
AWS請求代行サービス”クラスメソッドメンバーズ”

是非これからS3を利用するけども不安がある等ありましたら、お気軽にお問い合わせ頂けますと幸いです。

ではまた!AWS営業部の洲崎でした。