AWSのS3を利用し、webサイトをホスティング・公開する手順




投稿日:

AWSのS3では、staticページをwebサイトとしてホスティングする機能があります。この機能でWEBサイトを作ります。今回は独自ドメインでのホスティングを想定します。

構成としては2つ。Cloudfrontを利用するかしないかです。今回はパターン1を記載、次回にパターン2を記載します。

パターン1 :S3 のみの利用
パターン2 :S3 + CloudFrontの利用

パターン1:S3 のみの利用

S3 のみの利用

test.yourdomain.net/index.html と表示されることを目標とします。

必要な作業は、S3の設定とDNSの設定になります。



step1: S3の設定

1-1, Bucketの作成

1

左上の「Create Bucket」ボタンをクリックし、Bucketを作成します。
Bucket Nameとしては、独自ドメインで利用予定の名前「test.yourdomain.net」と設定します。
要件に合わせてログもオンにしましょう。


1-2, 「Static Website Hosting」の設定

2

S3のBucketをウェブサイトとして利用するための設定です。画面のように、「Enable website hosting」をオンにして、

Index Document: index.html
Error Document: error.html

と記入します。なおこの名前は独自で自由な設定で構いません。


1-3, 「Permissions」の設定

「Static Website Hosting」の設定を終えて、発行されたURLにアクセスしてみても、ページは403のパーミションエラーを返します。サイトの閲覧許可設定がされていない為です。その設定を入れましょう。

「Edit Buncket Policy」ボタンをクリックし、エディター画面を開きます。

3

下部の「Sample Bucket Policies」から必要なポリシーを選びます。今回は、全ての人にreadonlyの許可を与える以下で設定します。

Buncket名は自分の環境に合わせます。

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "AddPerm",
			"Effect": "Allow",
			"Principal": "*",
			"Action": "s3:GetObject",
			"Resource": "arn:aws:s3:::test.yourdomain.net/*"
		}
	]
}

ここまでの設定が完了すると、、

http://test.yourdomain.net.s3-website-ap-northeast-1.amazonaws.com/test/index.html
※ URLは環境によって異なります。

のURLが表示できるはずです。



step2: DNSの設定

独自ドメインへのアクセスによりS3のURLにリダイレクトされるようにCNAMEレコードで設定します。
bind等で設定する場合のレコード例は以下となります。もちろん、route53を利用しても可能です。

test.yourdomain.net  CNAME  test.yourdomain.net.s3-website-ap-northeast-1.amazonaws.com. 

この設定が完了すれば、以下のURLで閲覧可能です。

http://test.yourdomain.net/index.html



ここまでの設定で通常のS3からのホスティングが完了しました。慣れればあっさり可能です。

次はパターン2。Cloudfrontを間に入れてキャッシュを持たせることにします。これによりS3へのアクセスも激減して料金もぐっと安くなります。

次の記事に続きます。