ここではAWSのストレージサービスであるS3で簡単なWebサイトを構築する方法を紹介します。自己紹介ページや会社紹介ページなど、情報を提供するだけの簡単な静的WebサイトならWebサーバを立てなくても、S3だけで実現できます。
S3とは
S3とは、任意の量のデータをどこからでも保存・取得できるオブジェクトストレージです。ハードウェア的なサイズなど気にせず、利用した分だけの料金が発生します。料金が発生するといっても、1GBあたり0.023USD/月程度で、月に4円程度です。保存やコピーなどの操作アクセスにも料金は発生しますがこれは1000リクエストあたり、0.005USDと気にしなくても良いレベルです。
パブリック設定にしなければ、データが外部に公開されることはないので、社内やプロジェクトのデータ共有ストレージとして利用できます。また、パブリック設定にしてアクセス権限をしっかり設定すれば、特定の外部の人がアクセスすることも可能になります。もちろんフルオープンにして、誰でもアクセスできるようにすることもできます。
S3には静的Webサイトホスティングの機能があり、今回はこれを使って、フルオープンのS3ストレージでWebサイトを簡単に立ち上げてみます。
静的Webサーバと動的Webサーバ
静的Webサーバとは、元々サーバにあるデータを提供するだけのサーバで、よくあるコンテンツとしては、HTMLやCSS、Javascriptファイルになります。これらのファイルはブラウザにそのままダウンロードされて、ブラウザ側で処理されて表示されます。静的Webサーバの概要を図で書きます。
クライアント（ユーザ）からのリクエストに対して、指定されたファイルのデータをレスポンスとして返すだけです。
これに対して、動的Webサーバとは、サーバ側で何らかのプログラムを実行し、HTMLなどのデータを生成してそれをレスポンスとして返します。よくあるプログラムとしては、PHP、Ruby、Pythonなどがあります。動的Webサーバの概要を図で書きます。
よくある例としては、データベースや他のAPIにアクセスして取得した情報からHTMLを生成する場合です。ユーザ名に基づいてユーザ登録情報をデータベースから取得し、ユーザのニックネームを表示するというのも動的Webサーバでないとできないです。
動的Webサーバの場合、apacheやnginxなどのWebサーバを立てる必要がでてきますが、静的Webサーバであれば、S3のストレージだけで実現できます。（動的WebサーバもlambdaとAPI Gatewayを使えばサーバレスにできますが、それについては別で記載します）
S3で静的Webサイトを構築
まずS3の使い方ですが、S3ではバケットという単位でストレージを管理しています。バケットの中には任意の量のデータを放り込めるのですが、バケット単位でアクセス権などが管理できるので、何かのプロジェクト単位でバケットを分けるのが良いです。
今回も新たにひとつのバケットを作成し、それをWebサイトとして公開する手順を紹介します。イメージとしては下の絵のように、バケットの中にhtmlやcssのファイルを入れてそれを公開する形になります。バケットの中の各ファイルをオブジェクトともいい、オブジェクト単位でのアクセス管理もできるのですが、ひとつひとつ設定するのは大変なので、バケット単位で設定して公開します。
まず、バケットを作成します。これはS3のサービスにいけば「バケットを作成」というボタンがありますのでそれを押します。
このような画面がでてきて、バケット名をつけます。その他の設定項目は基本的にデフォルトのままで良いのですが、アクセス権はデフォルトだと当然公開にはなっていないので、そこだけ変更します。（作成した後からでも設定できます）
下の画面の「パブリックアクセスをすべてブロック」のチェックをはずせば公開設定になります。
作成したらバケットの中にファイルをアップロードできるようになります。試しにindex.htmlというファイルをアップロードします。index.htmlの中身はなんでも良いのですが、サンプルなのでこんな感じで作っておきます。
<html>
<head>
<title>S3 Web Server</title>
</head>
<body>
<h2> Hello from S3 Server </h2>
</body>
</html>このファイルをアップロードすると、バケット内が下記のような画面になり、index.htmlがオブジェクトとして登録されていることがわかります。
このままですと、Webサイトのようにアクセスすることはできないので、S3の「静的ウェブサイトホスティング」という機能を有効にします。
上記画面で「オブジェクト」というタブの隣に「プロパティ」というタブがありますのでそれを選択します。その中の一番下に、「静的ウェブサイトホスティング」という項目があるのでそれをクリックします。そうすると、下記のような画面になるので、「有効にする」を選択します。
インデックスドキュメントは、アップロードしたファイルの「index.html」にします。Webサイトのデフォルトページとなるファイルです。
これを設定すると、下記のように「http://」 で始まるこのWebサイトの公開URLが作成されます。
ただ、このままだとまだアクセスできないです。403 Forbidden というエラーになります。バケットのアクセス権限で「すべての人からのGETを許可する」という設定をする必要があります。最初のパブリック設定は何だったのかと思うかもしれませんが、あれはそもそも自アカウント外からもアクセスできるようにするかという設定で、その上でさらに「誰からの何を許可するか」というのはバケットポリシーで設定します。
バケットの画面から「アクセス許可」のタブを選択し、バケットポリシーを選択すると下記のような画面になります。ここにポリシーをJSON形式で書きます。
JSON部分はこのような感じになります。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::（バケット名）/*"
}
]
}（バケット名）の部分を作成したバケット名に置き換えて設定すれば、先程のURLでWebサイトがどこからでも見れるようになります。
ブラウザから静的ウェブサイトホスティングで作成されたURLにアクセスすると、index.htmlの内容が表示されます。
上記のindex.htmlの場合は、「Hello from S3 Server」が表示されたらWebサイトとして閲覧できています。
これで、サーバレスで静的Webサイトの基本が出来上がりました。あとはこのバケットにWebサイトのHTMLやCSSを置いていけば、それらもブラウザから閲覧できます。1GBぐらいのデータを置いたとしても月に4円程度のコストしかかからないため、非常に安価にWebサイトを運用できます。