AWS初心者の私がAmazon S3のStatic website hostingを利用して静的Webページをホスティングしてみました

はじめに

こんにちは。Webサービス開発グループの2019年度新入社員の熊谷です。

今回は、AWSのサービスのひとつであるAmazon S3を利用して、簡単な静的Webページを作成しました。サーバーレスで、とても間単にWebページを公開することができたので、その手順について書きたいと思います。

 

Amazon S3とは

Amazon S3は、Amazon Simple Storage Serviceの略で、保存できるデータ容量、ファイル数に制限のない耐久性の高いクラウド型のオブジェクトストレージサービスです。

ストレージサービスではありますが、Webサイトの構築も可能です。

例として今回、S3をWebサーバーのように使って、静的なページを公開する「Static website hosting」というストレージ機能を用いています。

 

Amazon S3を利用するメリットとデメリット

メリット

• 耐久性・信頼性に優れている
  • 保存したデータを同リージョン内複数個所の施設に同期的に保存しているため、万が一の事態にも備えてある。

• サーバーレス
  • 静的なサイトであれば、S3のみで公開することが可能。
  • サーバーの監視やサーバーダウンからの復旧などを気にする必要がなく、コンテンツ作りに集中できる。

• リーズナブル
  • 料金はストレージに保存されている容量＋リクエスト数＋データ転送料金となっており、実際に使用した分しか発生しない。
  • 規模によって変わりますが、最低料金設定がないため、今回のような利用方法で考えるとレンタルサーバーを借りるよりも圧倒的に安い。
  • 詳しくは、Amazon S3の料金へ。

デメリット

• S3単体ではPHPやRubyといったサーバーサイドスクリプトを処理する機能がないのでWebアプリケーションなどは作成できない。
  • LambdaやDynamoDBと組み合わせることでサーバーレスアプリケーションを作ることができるようです。

 

用語

オブジェクト

Amazon S3に格納されるファイル。

バケット

Amazon S3に格納されるオブジェクトのコンテナ。さまざまなファイルを置いておくことができます。

バケットポリシー

JSONで記述された権限情報のこと。各バケットで、誰がどんなアクセス権限を持つかなどを設定することができます。

Static website hosting

Amazon S3のストレージ機能のひとつです。日本語にすると、静的Webサイトホスティングで、名前の通り、静的Webサイトをホスティングします。

 

作成手順

大きく4つのステップで簡単に静的Webページを公開することができます。

 

1.バケットの作成

まずバケットを作成します。

Amazon S3のマネジメントコンソールから「バケットを作成する」を選択します。

 

バケット作成ダイアログ(①名前とリージョン)

バケット名、リージョンを編集します。

「次へ」を選択します。

 

ダイアログ(②オプションの設定)

バージョニングやログ記録の設定、オブジェクトタグの付与を行えます。

特に必要がなければそのまま「次へ」を選択します。

 

ダイアログ(③アクセス許可の設定)

アクセスコントロールリスト(ACL)、パケットポリシーを介してバケット、オブジェクトへのパブリックアクセスをブロックするかどうかの設定が行えます。

デフォルトではすべてブロックにチェックが入っています。

ブロックアクセス設定がオンになっていると、バケットとオブジェクトへのパブリックアクセスがブロックされてしまうので、

チェックボックスをすべて外して^(*1)「次へ」を選択します。

 

*1  今回のように全世界に公開するバケット以外はブロックパブリックアクセス設定をオフにしないようにしてください。

 

ダイアログ(④確認)

設定確認画面です。

内容に問題がなければ「バケットを作成」を選択します。

 

これで、バケットの作成が完了しました。

 

2.HTMLファイルのアップロード

実際静的Webページとして公開するHTMLファイルを新しいオブジェクトとしてバケットに保存します。

マネジメントコンソールのバケット一覧から作成したバケット名をクリックします。

「概要」から、左上の「アップロード」を選択します。

 

 

ダイアログ(①ファイルの選択)

アップロードするファイルを選択します。

HTMLファイルを選択したら「次へ」を選択します。

 

ダイアログ(②アクセス許可を設定)

アクセス許可の設定を行います。

この画面は特に設定不要なので、「次へ」を選択します。

 

ダイアログ(③プロパティを設定する)

ストレージクラスの選択をします。

この画面も特に設定不要なので、「次へ」を選択します。

 

ダイアログ(④確認)

確認画面です。

内容に問題がなければ「アップロード」を選択します。

 

アップロードしたファイルがオブジェクトリストに表示されていれば成功です。

 

 

3.バケットポリシーの設定

続いて作成したバケットのアクセス許可を管理するため、バケットポリシーの設定をします。

「アクセス権限」を選択して、そこから「バケットポリシー」を選択すると、「バケットポリシーエディター」が表示されます。

 

バケットポリシーエディター内に以下の内容を入力。

(Amazon S3 ウェブサイトアクセスに必要なアクセス許可より引用)

 

9行目の「バケット名」部分には作成したバケットの名前を入力してください。

今回の場合、

となります。

 

入力できたら、「保存」を選択して完了です。設定すると以下の内容で警告^(*2)が出ますが、今回は無視で大丈夫です。

 

*2 この警告はバケット内にあるオブジェクトがインターネット上で誰でも閲覧できる状態という事を示しています。

 

4.静的Webページのホスティング

いよいよStatic website hostingを利用して、Webページを作成します。

「プロパティ」を選択します。

表示されているストレージ機能の中から「Static website hosting」を選択します。

デフォルトでは「ウェブサイトのホスティングを無効にする」にチェックが入っているので、

「このバケットを利用してウェブサイトをホストする」にチェックを入れます。

「インデックスドキュメント」のテキストボックス内にアップロードしたファイル名を入力します。

今回の場合、

となります。

 

「保存」を選択して「Static website hosting」にチェックが入っていれば成功です。

 

 

確認

最後に実際にWebページが作成されているか確認してみます。

「プロパティ」の「Static website hosting」を選択して、「エンドポイント」にあるURLをクリックします。

 

今回作成したテスト用Webページ：

http://test-s3sample00967.s3-website-ap-northeast-1.amazonaws.com/

作成したWebページが表示されていれば成功です。

これで、Webページの公開ができました。

 

最後に

今回はお試しということで、Amazon S3のStatic website hostingを利用してシンプルなWebページを作成しました。

S3には、ほかにも便利な機能がたくさんあるのでぜひ利用してみてください。