Route 53 で独自ドメインをホストして、Amazon s3で静的ウェブサイトを公開

#今回の目的
- AWSのアカウントを使ってウェブサイト公開をしたい
- Amazon s3で静的ウェブサイトを公開したい
- 独自ドメインをRoute 53で取得して公開したい

#AWSのメリット
Route 53もs3もAWSのサービスです。

- AWSではRoute 53のドメインのみサブドメインなしの利用が可能
- s3のアカウントを作成すると、最初の１年間は無料利用枠が自動的に適応される（ただしRoute 53での独自ドメイン取得は適用外）
- ドメインにこだわりがなければ、s3の料金だけで（初年度無料利用枠あり）静的ウェブサイト公開可能
- ウェブサイト公開、独自ドメイン反映が早い

など

> 料金：https://aws.amazon.com/jp/s3/pricing/

#手順１：Route 53で独自ドメイン購入（取得）
まずは独自ドメインを取得（Route 53では購入する必要があります）してから、公開作業に入ります。

※ 今回はあくまでも全てAWSのサービスのみで独自ドメインも取得、静的ウェブサイト公開を目的としていますが、Route 53以外で独自ドメインを取得する場合でも、独自ドメイン取得は先に済ませる必要があります。理由はウェブサイト公開手順（s3使用時）に書きます。

- AWSのアカウントにログイン
- Console Home 画面で以下画像のように`Route 53`で検索
![Screen Shot 2017-07-24 at 3.12.54.png](https://qiita-image-store.s3.amazonaws.com/0/178773/a8572fdd-c8f1-4152-7bab-b322d238a29f.png)

- 独自ドメインを取得する。以下画像の`Register Domain`で希望するドメイン名が使用可能かチェック。`.com`はAWSでは$12するが、差し障りがなければ`.de`や`.uk`は他のドメインよりは安く、$9。（2017年7月現在）
![Screen Shot 2017-07-24 at 3.16.34.png](https://qiita-image-store.s3.amazonaws.com/0/178773/de43f2ee-c0b2-526e-5ea9-6029ef2ad748.png)

- 希望するドメイン名の右横の`Add to cart`をクリック。右横の`Shopping Cart`に選んだドメイン名と価格が表示されるので、確認したら`Continue`をクリック
![Screen Shot 2017-07-24 at 3.28.22.png](https://qiita-image-store.s3.amazonaws.com/0/178773/6592e16a-a9a5-3510-ce33-8a2d030babd9.png)

- ドメイン管理者情報入力画面になるので、記入。記入が済んだら`Continue`をクリック
![Screen Shot 2017-07-24 at 3.35.54.png](https://qiita-image-store.s3.amazonaws.com/0/178773/cade7a7f-2fe5-3095-aae5-c80582519f2b.png)

- `Terms and Conditions`でチェックを入れ、`Complete Purchase`をクリック
- Route 53のConsole画面に戻ると`Alerts`でドメインが申請中であることが確認できる。`Status`が画像のように`Domain registration successful`となっていれば反映されたということになる
![Screen Shot 2017-07-24 at 3.42.19.png](https://qiita-image-store.s3.amazonaws.com/0/178773/abe9f0b5-4dfe-affb-305d-009bafde86ca.png)


反映されたらAWSからメールが届きます。私の場合は`.de`でドメイン取得を申請しましたが、１時間未満で反映されました。

#手順２：s3で静的ウェブサイトを公開する設定をする

- Home Console画面から`s3`と検索
- `Create Bucket`をクリック
![Screen Shot 2017-07-24 at 3.57.35.png](https://qiita-image-store.s3.amazonaws.com/0/178773/d0506f22-9972-241f-8d77-0e5cb09ed012.png)

- `Bucket Name`は、必ずRoute 53で取得した独自ドメインにする。理由は、Bucket名がドメイン名と異なる場合、ウェブサイト公開に反映されないため。`Region`は日本人向けなら`Tokyo`。
※ `kaki-kukeko.com`なら`.com`まで記入
![Screen Shot 2017-07-24 at 3.59.10.png](https://qiita-image-store.s3.amazonaws.com/0/178773/ceeb7564-9c0d-c488-2f8e-9e97cd3d4ef6.png)

- `Review`の項目まで`Next`をクリックして`create bucket`をクリック
- 新しく追加されたBucketをクリックして開く
- `Properties`タブを開いて`Static website hosting`を選択
![Screen Shot 2017-07-25 at 2.18.21.png](https://qiita-image-store.s3.amazonaws.com/0/178773/0f22263a-7f25-6c4e-a383-1549161e4c21.png)

- `Use this bucket to host a website`にチェックを入れ、以下の図のハイライトの箇所に`index.html`と記入して`save`
![Screen Shot 2017-07-25 at 2.21.38.png](https://qiita-image-store.s3.amazonaws.com/0/178773/1dbe692e-8de8-837b-d164-f41c265f7fae.png)

- `Permissions`タブから`Bucket policy`を開き、以下画像でハイライトしてある箇所にJSONをコピペ（画像下のJSONをコピペしてください）
![Screen Shot 2017-07-25 at 2.25.10.png](https://qiita-image-store.s3.amazonaws.com/0/178773/ca23fb04-121e-d62a-80fe-1f1bd3d72c5b.png)


```json:bucketPolicyJSON
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::ここにドメイン名と同じBucket名*"
        }
    ]
}
```
- `Overview`タブに戻り、`UPload`をクリックして`index.html`のファイルをアップロード
- `Properties`タブ→`Static website hosting`より上部にある`Endpoint`のURLでブラウザ表示確認

#手順３：AレコードAliasを登録して、独自ドメインをアクティベートする

文字通り、先ほどRoute 53で購入した独自ドメインからアクセスできるようにします。

- Route 53のコンソールから`Hosted zones`をクリック
- 該当のドメイン名をクリックして、`Create Record Set`をクリック
![Screen Shot 2017-07-25 at 2.47.30.png](https://qiita-image-store.s3.amazonaws.com/0/178773/38005aa3-8761-48fa-a065-a9fe61d5bcc3.png)

- `Name`にサブドメイン名を設定したい場合は`www`など記入（独自ドメインでアクセスしたときに、ドメイン名と同じBucket名が見当たりませんとブラウザで表示される場合はここを空白にして、サブドメインなしにすると表示される）
- `Alias`は`Yes`で`Enter Target Name`をクリックして画像でハイライトになっているように、s3で公開するBucketのエンドポイントを選択
![Screen Shot 2017-07-25 at 2.50.30.png](https://qiita-image-store.s3.amazonaws.com/0/178773/2e72c2e1-90cd-9c3c-72cc-8c87557f744f.png)


- `Create`をクリックして、独自ドメインでブラウザに反映されているか確認できれば成功

> 参考記事： https://aws.amazon.com/jp/getting-started/tutorials/get-a-domain/

**備考**
Dot TKでは独自ドメインが、ドメインによっては無料で取得できます。ただ、アクセス数が一定数を下回る場合は削除されたり、`.com`などメジャーなドメインは有料だったりします。とりあえず静的ウェブサイトをホストしたい場合はs3だけで終わらせると、最初の一年は無料でホストできます。

> 参考記事： http://qiita.com/Ichiro_Tsuji/items/8471fe0b3d4d17cde146#a%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89alias%E3%81%AE%E7%99%BB%E9%8C%B2