初心者がAmazon S3で静的ウェブサイトをホスティングするところまでやってみた

こんにちはhisacomです。

この記事は先月までAWSに触ったことのなかった私が、ストレージサービスAmazon S3の機能の1つである静的ウェブサイトのホスティングを行った際の作業メモを整理したものです。

AWSの勉強記録については以下にもまとまっているので、よろしければご参照ください。 osushi-engineer.hatenablog.com

この記事のゴール

Amazon S3を利用して静的ウェブサイトのホスティングを行う
(SSL、独自ドメインでのウェブサイトホスティングは今回行わない)
同一バケット上に配置したJavaScriptが動いていることを確認する

Amazon S3とは

Amazon S3はAmazon Simple Storage Serviceと呼ばれるインターネット用のストレージサービスです。いつでも、どこからでも容量無制限でデータの格納および取得ができます。

また、単なるストレージサービスではなく、高速なWEBサイトホスティング機能を持っており S3で作成したバケットをそのままWebサイトに公開できます。 今回はこの機能を利用して、静的ウェブサイトのホスティングを行ってみます。

静的ウェブサイトとは

サーバ上でスクリプト処理をしないサイトのことです。反対に動的ウェブサイトとは、PHPやJSP、ASP.NETなどサーバ側での処理が必要な言語を含むサイトを指します。

今回は「index.html、error.html、JavaScript、image」を含む以下のファイルをアップしてホスティング機能を試してみます。

事前準備

AWSのアカウント（参考：AWS アカウント作成の流れ | AWS）
表示確認用のhtml

実行手順

今回行った大まかな手順は以下の通りです。

① バケットの生成

② ファイルのアップロード

③ Static website hostingの有効化

それでは、それぞれ詳細を書いていきます。

バケット生成

1.サービス画面の中からS3を選択します サービスからS3を選択

2.「バケットを作成する」をクリックします。バケットを作成するページが開きます

3.デフォルトのリージョンを選択したまま、バケット名を入力し「作成」

バケットが生成されます。（バケットの作成だけでは課金されません、バケットにオブジェクトを保存すると課金されます）

（参考：バケットの作成 - Amazon Simple Storage Service）

ファイルのアップロード

1.S3コンソール画面で作成したバケットを選択 今回作成したバケットを選択

2.アップロードをクリック

3.アップロードするファイルを選択

4.次へボタンで画面を進めると、アクセス権限やプロパティを選択できます (プロパティ画面のストレージクラスに関しては、スタンダードに設定しました) プロパティの設定

5.アップロードをクリックでバケット内にオブジェクトを作成できます （ファイル、テキスト、写真、動画、またはアプリケーションをオブジェクトにできます）アップロード完了

Static website hostingの有効化

S3コンソール画面で作成したバケットを選択し、タブの「プロパティ」をクリック StaticWebsitehostingの設定

「Static website hosting」の項目をクリック Static website hostingの項目をクリック

「このバケットを使用してウェブサイトをホストする」にチェックをいれる。インデックスドキュメントとエラードキュメントの項にアップロードしたhtml名を入力して保存する。 StaticWebsitehostingの設定

タブの「概要」とクリックし、公開したいファイルの左にチェックをつけ上の「アクション」ボタンから「公開する」を選択します。 (この時、html以外のファイルも「公開する」で選択しなければhtmlからの読み込みができませんでした)

結果の確認

タブの「プロパティ」をクリックし先ほどの「Static website hosting」画面を表示し「エンドポイント」に記載されているURLにアクセスするとインデックスドキュメントに設定したindex.htmlの内容を見ることができます。なおURLは東京ドメインの場合「http://[バケット名].s3-website-[リージョン名].amazonaws.com」となります。 SSLの発行や独自ドメインの利用には更なる手順が必要ですが、ポートフォリオや個人サイトの公開ならこちらの方法で問題なさそうです。