【AWS】静的WEBサイトをS3のみで構築する方法

動的処理がない静的WEBサイトの場合、S3のみで構築することができます。

手順の概要は以下の通りです。

    ① S3バケット作成
    ② ホスティング設定
    ③ バケットポリシー設定
    ④ ファイルアップロード

詳細を説明します。

① S3バケット作成

Step1 >「バケットを作成する」をクリック

Step2 >「バケット名」「リージョン」を入力して「作成」をクリック

バケット名は使用されていないものを指定します。
リージョンはどれでも大丈夫ですが、日本で使う場合レスポンスが速い「アジアパシフィック(東京)」を指定するのが良いです。

    バケット名:「nakamu.com」
    リージョン:「アジアパシフィック(東京)」

② ホスティング設定

作ったバケットをWEBサーバーとして機能するように設定します。

Step1 > 作成したバケットをクリック

Step2 > 「Static website hosting」で「ウェブサイトをホストする」を選択

Step3 > 「インデックスドキュメント」と「エラードキュメント」を設定

インデックスドキュメントはURLがWEBサイトのルートのみを指定した場合に表示する画面を指定し、エラードキュメントにはエラー発生時に表示する画面を指定します。
両方、任意の名前で大丈夫です。
あとでこれらのファイルはアップロードするので今は名前の指定だけです。

    インデックスドキュメント:「index.html」
    エラードキュメント:「error.html」

③ バケットポリシー設定

ここまででWEBサーバーができました。
URLは「Static website hosting」の枠の「エンドポイント」に書いてあります。


今の状態で記載のURLにアクセスしてみると「403 Forbidden」エラーとなります。これはアクセス権限がないためです。
そのため、アクセス権限をバケットポリシーで設定します。


Step1 > アクセス権限の編集をクリック

Step2 > 「パブリックアクセスをすべてブロック」のチェックを外して保存

パブリックアクセスをブロックするのはS3にWEBサーバーからだけアクセスしたりする場合など、外部に公開したくない場合に設定します。
今回はS3をWEBサーバーとして外部に公開するため、ブロックを外します。


確認画面で「確認」と入力して「確認」ボタンをクリックします。


Step3 > 「アクセス権限」の「バケットポリシー」をクリック

バケットポリシーとはアクセスの許可を付与する設定です。
たとえば、任意のユーザにのみS3へのアクセスを許可するなどの設定ができます。

今回はすべてのユーザがアクセス可能とする設定をします。

設定はJSONでの記載となるため、公式ガイドを参考にします。
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/user-guide/static-website-hosting.html


Step4 > バケットポリシーに設定を書いて保存

上記、公式ガイドの記述を設定します。
赤線のところは自分のバケット名に修正してください。


④ ファイルアップロード

ここまでで設定は完了しました。あとはファイルをアップロードで完了です。

Step1 > 「概要」の「アップロード」をクリック

Step2 > ファイルアップロード

今回はインデックスドキュメントで設定した下記の「index.html」とそこに表示する「aws.png」をアップロードします。

ドラッグアンドドロップでファイルを選択して、「アップロード」ボタンをクリックします。


これで完成です。
「Static website hosting」の枠の「エンドポイント」に記載のURLで確認してみましょう。

ちゃんと表示されました。

動画

動画にもしているのでこちらも参考にしてください。


参考

こちらを参考にしています。

【公式ガイド】

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/user-guide/static-website-hosting.html

【書籍】

コメントを残す

メールアドレスが公開されることはありません。