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

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時間くらいで反映されてました。（もっと早いかも）