🐶

S3の静的ホスティング機能を利用してwebページを作成してみる

2023/08/03に公開

AWS

tech

はじめに

今回はS3の静的ホスティング機能を利用してwebページを作成してみます。
htmlファイルだけあれば静的ホスティング機能は確認できると思いますが、cssファイルや画像ファイルも使用してみようと思います。

S3静的ホスティングとは

S3を利用して簡易な静的webサイトを作ることが出来る機能です。

メリット

・サーバーなしにWEBサイトをホスティング可能。
・EC2を起動すると、常時料金が発生するが、サーバーが必要ないため値段が安い。(アクセスするリクエストのみ料金がかかる)
・マルチAZの冗長化を勝手にしてくれており、運用いらず
・Route53で独自ドメインを設定可能で、通常のURLのように扱うことが可能
・CloudFrontによる配信が可能である

デメリット

・サーバーサイドスクリプト言語を実行するなどの動的サイト不可
・単独ではSSLを使用したhttpsによる通信ができず、SSL設定にはCloudFrontを設定して、https通信をCloudFront側から実行することが必要

作成の流れ

簡単に流れを説明します

ブロックパブリックアクセスを無効化する(webサイトとして表示することが必要なため)
↓
バケットポリシーでバケットの読取許可を様々なユーザからアクセスできるように設定する。
↓
Index.htmlなどのwebサイトとして表示するhtmlドキュメントをバケット内に保存する。
↓
静的WEBホスティングの設定画面でIndex.htmlなどのインデックスドキュメントを設定し、有効化する。

作成していきます

静的webサイト用のs3を作成していきます
他のファイルを保存するバケットと静的webサイト用を混在させてしまうとよくない為です

公開する為、ACLは有効にします

こちらも公開する為、チェックボックスを外します
オブジェクトが公開されることを承認します

作成されたバケットを選択し、

「プロパティ」から下にスクロールしていき、「編集」をクリックします

以下画像のように設定し、「変更の保存」をクリックします。

URLをクリックすると、

このようにForbiddenとなっていてアクセスできません。
そもそもファイルを置いていないからですね。

ファイルを置きます。
html、css、画像ファイルをアップロードしていきます。

アップロードされました。

公開する為の設定をしていきます
全てのファイルを選択し、「アクション」-「ACLを使用して公開する」をクリックします。

「公開する」をクリックします

これで終わりかと思いきや‥もう1つ設定することがあります。
バケットポリシーを指定する必要があります。

中身がどうなっているか説明します

・Version
バケットポリシーバージョンというものです。IAMポリシーと同じ日付が利用されます。
・Statement
バケットポリシーのポリシーの内容です
・Sid
バケットポリシーのIDです。自由に設定することができます。書き換えても問題ありません。
・Effect
このバケットポリシーの効果です。「Allow」か「Deny」を設定します。
・Principal
対象となるバケットポリシー、ユーザを指定します
ここでAWSIDなどアカウントを指定すると、アカウントのみの許可となります。
・Action
S3オブジェクトを取得するアクションになっています
・Resource
対象となるバケット名を指定するところです。

これで「変更の保存」をします。

再度、「プロパティ」-「静的ウェブサイトホスティング」にあるURLをクリックします

html、css、画像ファイルを使用してwebページを表示させることが出来ました。

つまずいたところ

恥ずかしながら、cssファイルが何かを分かっていませんでした‥。
その為、cssファイルの作成に時間がかかりました。
また、それぞれ作成したファイルをアップロードすればいけると思っていましたが、htmlファイルにcssファイルと画像ファイルのコードを埋め込むことに気づかず、かなり時間が掛かってしまいました。
AWSコンソール上の操作は特につまずきませんでした。