AWS　S3を使ってホームページを公開する

## 背景
独自ドメインを取得してホームページを開設したかった。
レンタルサーバを利用しなくてもAWSのS3を利用して簡単にできるようだったので、試しにやってみる。
[参考（AWSチュートリアル）](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html
)

## 全体像
![Untitled Diagram.jpg](https://qiita-image-store.s3.amazonaws.com/0/260598/53a7fb83-15f9-aeb5-bda9-51f679cef023.jpeg)

## 作業概要
だいたいの作業手順はこんな感じです。

1. 独自ドメインの購入
2. バケット作成
4. Route53へバケットのエイリアスレコード追加

## 作業内容
### 独自ドメインの購入
AWSドキュメントに、より詳細な内容が書かれていますので参考に。[AWSドキュメント](https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/domain-register.html)

* AWSコンソールにログイン後、`サービス`から`Route53`を選択する。
* 画面真ん中あたりのテキストボックス(Type a domain name)に取得したいドメイン名を入力し、Checkボタンをクリックする。（.com以外のドメインが欲しい場合は右隣のリストボックスから選択すること）
 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/260598/50172024-5e2c-6505-4434-cd099de0d12c.png)

* `Add to cart`をクリックし、欲しいドメインをカートに加える。
 （画像は`getsampleapp.com`をカートに加えた後のキャプチャです）
 画面を下にスクロールして`continue`ボタンをクリックする。
 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/260598/7636bc39-1583-475e-83ab-73c8f87af410.png)

* ドメインの詳細情報を入力します。
 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/260598/3695c831-3fe9-3724-712c-527de4191840.png)

* 購入します。
 以下の作業を行うと、`Complete Purchase`
 * 真ん中あたりあるチェックボックス「I have read and agree...」 にチェックを入れる
 * 登録したメールアドレスにAWSから確認用メールが届くので、メール内のリンクにアクセスする。
 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/260598/e82d8dff-e9be-dfb5-9d84-f6c096797f5f.png)

作成が完了するとroute53のRegistered domainsに出現します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/260598/77b91a37-45f0-2ef1-794f-066c96c4034d.png)

### バケットの作成

AWSサービスの中からS3を選択し、バケットを作成する。
ホスティングするウェブサイトと同じ名前のバケットを作成すること（[AWSチュートリアル参考](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html#root-domain-walkthrough-add-arecord-to-hostedzone)）。

#### バケットポリシーを設定する
画面下のポリシージェネレータを利用すると簡単にjsonを生成することができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/260598/96d58605-6f8a-155b-080c-b53ec2abcd30.png)
こんな感じで良いかと思います（ARNは作成したS3バケットのARNを設定してください）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/260598/01525d28-7402-34e9-5235-2742dd8d2ba5.png)
`Generate Policy`ボタンをクリックし、画面に表示されたポリシーをコピペして貼り付けてください。
※バケットの`パブリックアクセス設定`内の`新規のパブリックバケットポリシーをブロックする (推奨)`にチェックが入っているとポリシーの保存ができないので要注意です（そりゃそうか...って感じですが）。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/260598/3631caca-bea8-4fd6-48c4-e9de02f8b2a8.png)

#### ウェブサイトのホストとして設定する
[AWSチュートリアル](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html#root-domain-walkthrough-s3-tasks)を参考に、S3のバケットをウェブサイトのホストとして利用する設定をします。    
 ひとまず簡単なindex.htmlを作成してホスティングの設定をするのが良いかと思います。 

#### S3エンドポイントへアクセスしてみる  
 設定がうまくいっていればエンドポイントへアクセスできるはずなのでお試ししてみてください。
 AccessDenyエラーが出るときはバケットのアクセス権限周りの設定を再確認してみると良いかもしれません。

### Route53へエイリアスレコードの追加
AWSチュートリアルの[エイリアスレコードを追加する](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html#root-domain-walkthrough-add-arecord-to-hostedzone)を参考に、エイリアスレコードを設定します。
`Name`と同じ名前でないと`Alias Target`として表示されないので注意です。同じ名前のバケット名を作成したのはそのためか。と一人で納得しました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/260598/04d3d791-126e-683b-03f6-6106e8512d23.png)

作成後、`http://xxxx.com`(xxxxは購入したドメイン名)にアクセスすると、いい感じにアクセスできます。

## 詰まったところ
全体的にあまりつまるところはなかったけど、地味にちょこちょこ引っかかってしまいました...  

#### バケットポリシーが保存できない
 S3アクセス権限の「パブリックアクセス設定」  `新規のパブリックバケットポリシーをブロックする`にチェックが入ってた。チェックを外して保存できた

#### S3のエンドポイントにアクセスしてもコンテンツが表示されない
 S3アクセス権限の「パブリックアクセス設定」  `バケットにパブリックポリシーがある場合、パブリックアクセスとクロスアカウントアクセスをブロックする` にチェックが入ってた。チェックを外してアクセスできた

#### エイリアスターゲットにS3のバケットが表示されない
 バケット名のスペルが誤っていた。正しい名前（Route53レコード追加画面の`Name`と同じ名前）のバケット名を作成したらエイリアスターゲットとして選択することができた

## 今後の課題と感想

ACMとCloudFrontを利用してHTTPS化したい。文書を書くのに途中で力尽きてしまって急に適当になってしまいがちなので、なんとか工夫したい...段々雑になってごめんなさい...