📝

S3で静的ウェブサイトを作成してみた

2021/08/23に公開

AWS

tech

S3の静的ウェブサイトホスティングの機能で簡単なウェブサイトを作成してみました。

動画

https://youtu.be/DWCPUreEDN8

準備

以下のような簡単なhtmlファイルを用意しておきました。

index.html

<!DOCTYPE html>
<html lang>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AWSチョットサワル</title>
</head>

<body style="text-align:center">
  <h1>AWSチョットサワル</h1>
  <h3>S3で静的ウェブサイトを作成してみた</h3>
</body>

</html>

手順

バケットを作成
静的ウェブサイトホスティングの有効化
バケットポリシーの編集
htmlファイルのアップロード

1. バケットを作成

まずはS3バケットを作成します。
S3コンソールに移動しましょう。

「バケットを作成」をクリックします。

バケット名を入力します。
バケット名は世界中で一意にする必要があります。

「パブリックアクセスをすべてブロック」のチェックを外し、警告の承認にチェックをつけます。

その他の設定はデフォルトのまま、「バケットを作成」をクリックします。

これでバケットの作成は完了です。

2. 静的ウェブサイトホスティングの有効化

次に静的ウェブサイトホスティングの機能を有効化します。
作成したバケット名をクリックします。

「プロパティ」タブをクリックします。

下部に「静的ウェブサイトホスティング」という項目があるので、「編集」をクリックします。

静的ウェブサイトホスティングで「有効にする」を選択し、インデックスドキュメントにindex.htmlと入力します。

その他の設定はデフォルトのまま、「変更の保存」をクリックします。

これで静的ウェブサイトホスティングの設定は完了です。
設定後にはエンドポイントのURLが払い出されます。
ただし、この時点ではアクセスしても何も表示されません。

3. バケットポリシーの編集

次にバケットにアップロードするファイルへのアクセス許可を、バケットポリシーで編集します。
「アクセス許可」のタブをクリックします。

バケットポリシーの「編集」をクリックします。

静的ウェブサイトホスティング用のバケットポリシーは、公式ドキュメントにも記載されていますが、今回はポリシージェネレーターで作成してみます。

Select Policy Typeから、「S3 Bucket Policy」を選択します。

Princiopalに「*」を入力します。
これで、すべての対象からのアクセスを許可します。

Actionsで「GetObject」を選択します。
これでバケット内のファイルへの読み取りを許可します。

ARNはバケットポリシーの編集画面から、作成したバケットのARNをコピペします。

貼り付けたARNに続けて、/*を入力します。
これでバケット内のすべてのオブジェクトへのアクセスを許可します。

Add Statementをクリックします。

Generate Policyをクリックします。

バケットポリシーが生成されるので、コピーします。

バケットポリシーの編集画面に戻り、コピーしたポリシーを貼り付けます。

「変更の保存」をクリックします。

これでバケットポリシーの設定も完了です。

4. htmlファイルのアップロード

あとは作成しておいたindex.htmlをアップロードするだけです。
「オブジェクト」のタブをクリックします。

「アップロード」ボタンまたはドラッグ & ドロップでアップロードします。

すべてデフォルト設定のまま、「アップロード」をクリックします。

アップロードが完了したら、「閉じる」をクリックします。

これでアップロードが完了しました。

動作確認

それでは動作確認してみます。
「プロパティ」タブをクリックします。

下部のバケットウェブサイトエンドポイントのURLをクリックします。

サイトが表示されました！
URLもエンドポイントのURLになっています。

これでS3で静的ウェブサイトを作成することができました。
簡単なサイトなら数分で公開できてしまいますね！

まとめ

今回はS3で静的ウェブサイトを作成してみました。
htmlファイルさえ準備しておけば、あとはコンソールでポチポチするだけでサイトが公開できるなんてすばらしいですよね！
S3ではCDNであるCloudFrontとも連携して、画像などのキャッシュをすることもできるので、その辺も今後記事にしてみようと思います。
今回の内容が参考になれば幸いです。