Posted at

AWS S3,Route53で独自ドメインの静的サイトを公開する

More than 5 years have passed since last update.

HTML,CSS,Javascriptでの静的サイトであれば、AWSのS3とRoute53を使って格安で公開できる。


Create Bucket


  • Bucket Nameは、ドメイン名に設定しないと、Route53での連携ができなくなるので注意

  • Loggingは、アクセスログをとれるようになるもの。古いログはアーカイブや削除のルールを作ることができる。
    あとでも変更できる。


Static Website Hosting

作成したBucket のProperty「Static Website Hosting」にて、

Enable website hostingを選択し、以下のようにする。

- Index Document → index.html

- Error Document → error.html

Endpointが、URLになるので記録しておく


Permissions

作成したBucket のProperty「Permissions」にて、「Add Bucket Policy」を選択。

ダイアログの下のsample bucket policyを開くと、policyのサンプルが出てくる。

「Granting Read-Only Permission to an Anonymous User」をそのままコピーして、

「examplebucket」のところをBucket Nameに書き換えて、Saveする。

{

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


Upload

Bucket Nameの部分をクリックすると、Uploadボタンが出てくるので、アップロードする。


サイト確認

EndPointからアクセスすれば、サイトがみれるようになる。

自分の場合、アップローダを使ってアップロードしたのだが、CSSがうまく反映されていなかった。

CSSのMetadataのContents-Typeをtext/cssに修正したら正常にできるようになった。


Route53での設定

1.Route53にて、「CreateHostedZone」でドメイン名を入力してゾーンを作成。

2.作成後、右のほうに出てくるDelegation Set を記録しておく。

3.私はレジストラはムームードメインを使っています。

ムームードメインにてドメイン取得して、ネームサーバを弊社サービス以外 のネームサーバに変更する。

4.ネームサーバ1〜4に先ほどのDelegation Setを入力して保存。

5.Route53に戻って、「Go To Record Set」

6.「Create Record Set」

- Typeを「A - IPv4 Address」を選択

- AliasをYesにする

- AliasTargetの欄にフォーカスを当てると、S3のEndpointが出てくるので選択

- Createする

これで、しばらくすると独自ドメインでサイトが見れるようになる。

すぐには反映されないが、自分の場合、1時間くらいで反映されてました。(もっと早いかも)