概要

本書ではS3のバケットにHTMLをアップロードし、バケットに配置したHTMLをインターネット上に公開できるように設定します。

0. 事前準備

AWSのアカウントを作成していること。
VSCodeなどのHTMLファイルを作成するエディターをインストールしていること。
※本書ではWindows10を使用します。

1. HTMLファイルの作成

S3でHTMLを公開するためには「index.html」「error.html」のファイルが最低限必要です。VSCodeなどのエディターで「index.html」「error.html」を作成します。本書では下記のHTMLファイルを作成しました。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>S3テスト</title>
        <style>
            body{
                background-color: #FFD5EC;
            }
            div {
                background-color: #FFEEFF;
                border-radius: 20px;
                border: 3px solid #FF88FF;
                width: 400px;
                text-align: center;
                margin: auto;
            }
            h1 {
                color:#AA0000;
                font-style: italic;
                font-size: 60px;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>S3 Test!!</h1>
            <h2>静的htmlをS3で表示します</h2>
        </div>
    </body>
</html>

error.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Error Page</title>
        <style>
            body{
                background-color: #BBFFFF;
            }
            div {
                background-color: #EEFFFF;
                border-radius: 20px;
                border: 3px solid #55FFFF;
                width: 400px;
                text-align: center;
                margin: auto;
            }
            h1 {
                color:#000077;
                font-style: italic;
                font-size: 60px;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>Error!!</h1>
            <h2>WEBページを表示できません!</h2>
        </div>
    </body>
</html>

2. S3バケットの作成

AWSにログインし「サービス」→「S3」をクリックする。
「バケットを作成する」をクリックする。
「名前とリージョン」画面にて下記の内容を入力し、「次へ」をクリックする。
- バケット名 : (任意の名称を入力)
- リージョン : アジアパシフィック(東京)
「プロパティ」画面にて設定する内容がなければ「次へ」をクリックする。
「ブロックパブリックアクセス(バケット設定)」画面にて「パブリックアクセスをすべてブロック」のチェックを外し「次へ」をクリックする。
確認画面が表示されるので「バケットを作成」をクリックする。
バケットが作成されたことを確認する。

3. HTMLファイルの配置

作成したバケットをクリックする。
「アップロード」をクリックする。
作成したHTMLファイルを追加する。
「index.html」「error.html」ファイルが選択されていることを確認し「次へ」をクリックする。
アクセス許可設定画面にて下記の内容を選択し「次へ」をクリックする。
- パブリックアクセス許可を管理する : このオブジェクトにパブリック読み取りアクセス権限を付与する
「ストレージクラス」画面にて「スタンダード」を選択し、「次へ」をクリックする。
確認画面が表示されるので「アップロード」をクリックする。
「index.html」「error.html」がアップロードされたことを確認する。

4. Static website hostingの有効化

上部メニューから「プロパティ」をクリックする。
「Static website hosting」をクリックする。
「このバケットを使用してウェブサイトをホストする」を選択し、下記の内容を入力する。その後「保存」をクリックする。
- インデックスドキュメント : index.html
- エラードキュメント : error.html　　　　　　　　　　　　　　　　
「パケットホスティング」にチェックマークが付いたことを確認する。