OPT PLANNING ブログ｜広島のWebシステム開発

皆さんは、AWS S3の「静的ウェブサイトホスティング」という機能をご存じでしょうか？
この機能を利用すると、だれでも簡単にインターネット上にWebサイトを公開することができます。
また、普段からAWSを利用している人でも「知っているけど使ったことがない」という人が案外多いのではないでしょうか。（自分がそうでした
そこで今回、「どのくらい簡単なのか？」を

• Webサイトが公開されるまでの時間

を計測しながら、実際に検証してみたいと思います！

1. 静的ウェブサイトホスティングとは

---

そもそも　静的ウェブサイトホスティング　とは何なのかと言うと

静的ウェブサイト　→　いつ・どこで・だれがアクセスしても変わらないWebサイトのこと。
ホスティング　　　→　WebサイトやWebアプリケーションをインターネット上で一般公開すること。

つまりは

「いつ・どこで・だれがアクセスしても変わらないWebサイトをインターネット上に一般公開すること」

ことになります。

ちなみに、この逆でGoogleなど検索結果によって表示される内容が変わるものを動的ウェブサイトと言います。
そして、今回検証するS3の「静的ウェブサイトホスティング」というのは

「S3を利用すれば、いつ・どこで・だれがアクセスしても変わらないWebサイトをインターネット上に一般公開することができる」

という、S3にアクセスするとWebサイトが見れるようになる機能になります。

※イメージ図

2. 内容

---

今回の検証内容は、AWS公式チュートリアルの

• チュートリアル: Amazon S3 での静的ウェブサイトの設定

を参考にします。

検証の前に一度こちらのチュートリアルを実践しました。 わかりやすく簡単でした。
検証のおおまかな流れは以下のとおりです

1. 公開したいhtmlファイルを用意する。
2. S3バケットを作成する。
3. 静的ウェブサイトホスティング機能の設定をする。
4. S3バケットへのアクセス権限設定をする。
5. S3バケットに対してWebブラウザからアクセスする。

3. 検証

---

htmlファイルの用意

こちらのindex.htmlが、今回公開したいWebページのホームになります。
検証ですので最低限表示されるものを記述しただけになります。

こちらのerror.htmlは、今回公開するWebページがエラーの際に表示されるページになります。

(0:00) 開始

(0:01) AWSへログイン

(0:15) S3バケットを作成

S3コンソール画面から　バケット　を選択し、バケットを作成　を押します。

(0:17) S3バケット作成時の設定

バケット作成の設定は赤枠を設定しました。

①　バケット名
作成するバケット名を入力します。
作成するバケット名は全リージョンで一意でなければなりません。

②　AWSリージョン
バケットが作成されるAWSリージョンを選択します。
日本国内であれば東京や大阪を選びましょう。

③　パブリックアクセスをすべてブロック
パブリックアクセスの設定をおこないます。
今回は検証としてWebサイトを公開するのでこちらはチェックを外します。

④　警告内容の承認
パブリックアクセスをすべてブロックをオフにしたことによる警告です。
S3内のWebサイトを公開するのでチェックを入れます。

そのほかはそのままで、ページ一番下の　バケットを作成　を押します。

(0:50) 作成されたバケットの設定

無事S3バケットが作成されました。
この　作成されたバケット　を選択します。

(1:00) 「静的ウェブサイトホスティング」の設定

プロパティタブ　を選択します。

この時点では静的ウェブサイトホスティングが無効になっています。
静的ウェブサイトホスティングの　編集　を押します。

編集内容では赤枠を設定しました。

①　静的ウェブサイトホスティング
静的ウェブサイトホスティング機能の有無を選択します。
今回の目的の機能なので　有効にする　を選択します。

②　ホスティングタイプ
ホスティング機能の種類を選択します。
作成したバケットで公開するので　静的ウェブサイトをホストする　を選択します。

③　インデックスドキュメント
公開したいWebサイトのホームとなるページ名を入力します。
最初に作成したファイル名のindex.htmlと入力します。

④　エラードキュメント
エラーの際に表示されるページ名を入力します。
オプションになっているため入力しなくても問題ありませんが
検証のためこちらにも、最初に作成したファイル名のerror.htmlを入力します。

そのほかはそのままで、ページ一番下の　変更の保存　を押します。

(1:40) WebサイトのURLを確認。

先ほどの設定が反映され、静的ウェブサイトホスティングが有効になりました。
この、バケットウェブサイトエンドポイントに表示されているURLがWebサイトのURLになります。

(1:45) バケットポリシーの設定する。

アクセス許可タブ　を選択します。

この時点ではまだ何もポリシーが設定されていません。 バケットポリシーの　編集　を押します。

上記ポリシーのバケット名の部分を作成したS3バケット名に変更します。
このポリシーは、指定したバケット内のオブジェクト（ファイル）に対してGETアクションを可能にさせます。
このポリシーを設定して　変更を保存　を押します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::バケット名/*"
            ]
        }
    ]
}

ポリシーに問題なければ先ほどの画面にポリシーが表示されます。

(2:17) htmlファイルをS3バケットへアップロードする。

作成したバケットにindex.htmlとerror.htmlをアップロードします。

(2:55) WebサイトのURLへアクセス

先ほど確認した、バケットウェブサイトエンドポイントに表示されているURLをクリックすると…
無事index.htmlの内容が表示されました！！
記録は2分55秒 たったこれだけの時間でWebサイトが公開できてしまいます。AWS恐るべしですね。

また、存在しないアドレスを入力した際にはerror.htmlが表示されます。

5. あとがき

今回、S3の「静的ウェブサイトホスティング」の機能ではに簡単にWebサイトを公開することができました。
また、今回はWebサイトのURLをバケットウェブサイトエンドポイントの値そのままで使用しましたが、AWSの他サービスと連携することによりドメインの変更することも可能です。

次回はそのドメイン変更を「S3静的ウェブサイトのドメインを変更する」で実施してみたいと思います。