S3＋Rout53＋独自ドメインで静的サイトをホスティングする方法

静的なサイトをS３のホスティングと独自ドメインで構築する方法です。
今回は、awsの登録や、ドメインの購入は完了済みということを前提にしています。

また、ドメインは、仮にexample.com としてありますので、ご自分で取得したドメインに読み替えて読み進めてください。

• S3 の設定
  • バケットの作成
  • バケットの設定
    • Permissions
    • Static Website Hosting
  • www.examle.comからのリダイレクト
    • www.examle.comバケットの作成
    • www.examle.comバケットの設定
      • Static Website Hostingの設定
• Rout53
  • Hoste Zoneの設定
  • Aレコードを作成
  • サブドメインには、CNAMEレコードを作成
• レジストラの設定
  • ネームサーバーの変更
• 確認

S3 の設定

バケットの作成

ホスティングでメインとなるバケットを作成します。
簡単ですが、作成手順は以下になります。

• S3 > [Create Bucket] ボタンをクリック
• Bucket Name　に ドメイン名[example.com]を指定して、[Create]ボタンをクリック

Bucket Name: example.com
Region: Tokyo

バケットの設定

上記で、バケットの作成が完了したら、propertyから以下を変更します。

Permissions

Edit bucket policy に以下を追加します。

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

バケットポリシーの詳細はこちらから確認してください。

Static Website Hosting

• Enable website hosting に チェックをいれます。

表示されるフォームに以下のように設定します。

Index Document: index.html
Error Document: 404.html

Indexページは、たいていindex.htmlになると思いますが、errorページに関しては、error.html 等、自分のサイトのエラーページに合わせて変更してください。

www.examle.comからのリダイレクト

今回は、サブドメインなしの、examle.com でアクセスをすることを想定していますが、
もし、www.examle.com でurlが来た時に、examle.comにリダイレクトするように、別途バケットを作成しておきます。

www.examle.comバケットの作成

examle.comと同様に、
* S3 > [Create Bucket] ボタンをクリック
* Bucket Name　に ドメイン名[www.example.com]を指定して、[Create]ボタンをクリック

www.examle.comバケットの設定

上記手順で、バケットの作成が完了したら、propertyから以下を変更します。

Static Website Hostingの設定

Redirect all requests to another host name にチェック。

Redirect all requests to にリダイレクト先のホスト名を入力する。

今回の例では、以下を指定します。

examle.com

以上で、S３でのバケットの設定は終わりになります。

Rout53

続いて、Route53を使って、DNSの設定をしていきます。

Hoste Zoneの設定

• Rout53 > Hosteed Zone > [Create Hosted Zone]をクリック
• Domain Name と Comment と Type を入力して [create] ボタンをクリック。

今回 Domain Nameには、example.com を入力。
Commentには任意のコメントを設定してください。

無事に設定が終わると、Name Serversが設定されるので、これを後でレジストラに設定します。

Aレコードを作成

続いて、Aレコードを作成していきます。

• 今 作成した、HostZoneを選択して、[Go to Record Sets]をクリック
• [Create Record Set] ボタンをクリック

設定は以下のように行う。

Name: example.com.
Type: A - IPv4 address
Alias: Yes
Alias Target: 作成したS３のバケットを指定
Routing Policy: Simple

サブドメインには、CNAMEレコードを作成

www.example.comを作成した場合、下記のように設定してください。
また、テスト環境 (test.example.com)のような環境を作成した場合も同様の手順で対応可能です。

Name: www.example.com.
Type: CNAME
TTL 300
Value: www.example.com.s3-website-ap-northeast-1.amazonaws.com
Routing Policy: Simple

これで、DNSの設定は以上です。

レジストラの設定

今回、お名前.com での設定になります。
先ほど、生成されたName Serverをレジストラに設定して行きます。

ネームサーバーの変更

• ドメイン設定タブのネームサーバーの設定 > ネームサーバーの変更
• 他のネームサーバーを利用タブを選択
• ネームサーバー情報を入力のフォームが表示されるのでそこに、Route53で生成された、NameServerの宛先を入力して来ます。

以下のような値を一個づつ入力して、確認画面に進む > 登録

ns-9999.awsdns-99.co.uk
ns-999.awsdns-99.com
ns-999.awsdns-99.net
ns-999.awsdns-99.org

確認

example.comのバケットに index.htmlを配置して ブラウザでhttp://example.comでアクセス。
ちゃんと設定できていれば、表示されることを確認してください。