独自ドメインを使ってAmazon S3で静的Webサイトをホストする

#**概要**
##何ができるのか
![Direct Hosting Pattern.png](https://qiita-image-store.s3.amazonaws.com/0/80392/61244eed-9497-eb3c-93f8-c6ae1f190350.png)

* S3バケットをまるごとWeb公開することができます
* Web公開できるのは静的コンテンツに限ります
* 独自ドメインも使用可能です。ただしZone Apex(サブドメインなし)の利用はドメインをRoute 53でホストしてる場合のみ可能です
* LinuxなどでWebサーバを立てる場合のように、サイジングやサーバ運用を行う必要はありません
* ある程度までのスパイクには耐えますが、xx砲[^1]対策などには[CloudFrontを併用](https://qiita.com/Ichiro_Tsuji/items/38592e737257cb45ca13)しましょう

[^1]: 不倫謝罪程度のことではびくともしないようです

＜公式ドキュメント＞
http://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/hosting-websites-on-s3-examples.html
＜分かりやすいスライド＞
http://www.slideshare.net/horiyasu/amazon-s3web-27138902

##前提条件
* AWSアカウントをもっていること
* レコードを編集可能な独自ドメインを保有していること<BR>
※ もっていない場合は無料で取ってしまおう！<BR>
http://qiita.com/Ichiro_Tsuji/items/8471fe0b3d4d17cde146

##料金
S3の料金のみでWeb公開が利用できます。
また、サインアップ後1年間の無料利用枠があります。
https://aws.amazon.com/jp/s3/pricing/

#**S3 BacketをWeb公開する**
* Web公開に使用する独自ドメインを用いたFQDNを決めておく<BR>
ex) s3.jaws-ug.tk
* AWSにサインインする
* S3コンソールを開く<BR>
※ 英語画面で説明するので日本語表示になっている場合は、画面左下の言語選択を「English」に変更する 
![AWS Management Console 2017-06-24 10-38-08.png](https://qiita-image-store.s3.amazonaws.com/0/80392/7143a065-6fd5-ac87-3f35-0bd027d56148.png)
<BR><BR>
* [+ Create bucket]をクリックする
* 上記独自ドメインのFQDNを[Backet Name]に入力する。独自ドメインをもっていない場合は、任意のバケット名でOK。リージョンはお好みで良いが、日本人向けサイトであれば東京リージョンが最もパフォーマンスが良い<BR>
※ **独自ドメインでWeb公開する場合、バケット名=FQDNでなければならない**
* [Next]をクリックする
![S3 Management Console 2017-06-24 10-42-43.png](https://qiita-image-store.s3.amazonaws.com/0/80392/0e3037b5-5baf-7ae6-9fdf-a9fc29746dd4.png)
<BR><BR>
* [Next]を2回クリックする
* 今回はWeb公開(パブリックアクセスを許可)するので[Block all public access]のチェックを外し、[I acknowledge...]にチェックを入れ、[Next]をクリックする<BR>
![スクリーンショット 2020-05-26 17.31.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80392/c3cd5c15-458d-604c-cbb2-5b085d7421e2.png)
<BR>
* [Create Backet]をクリックしてバケットを作成する<BR>
![S3 Management Console 2017-06-24 10-47-34.png](https://qiita-image-store.s3.amazonaws.com/0/80392/9b72e411-f585-7680-dc20-34a88b786691.png)
<BR><BR>
* 作成したバケットを開く<BR>
![スクリーンショット 2017-06-24 10.56.13.png](https://qiita-image-store.s3.amazonaws.com/0/80392/16eb1f50-299d-ae38-192b-f21e29849c77.png)
<BR><BR>
* [Properties]タブを開き[Staticwebsite hosting]を展開する
* [Use this bucket...]を選択する
* [Index document]に**`index.html`**を入力する
* [Save]をクリックする
![S3 Management Console 2017-06-24 11-07-00.png](https://qiita-image-store.s3.amazonaws.com/0/80392/9032d4f1-bf24-810e-3c99-eacf92a3349f.png)
<BR><BR>
* [Permission]タブを開き[Bucket Policy]をクリックする
* 画像下のJSONをコピペする。バケット名(s3.jaws-ug.tk)は修正すること
* [Save]をクリックする
![S3 Management Console 2017-06-24 11-28-06.png](https://qiita-image-store.s3.amazonaws.com/0/80392/c268731a-3d6b-8cef-1323-4ab83e0b78ed.png)
<BR><BR>

```json:BucketPolicy
{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::s3.jaws-ug.tk/*"]
    }
  ]
}
```
* 何か文字(文字化けしないよう、英文が無難)を書き込んだテキストファイルを**`index.html`**の名前で作成し、Web公開するバケットにファイルをアップロードする
![S3 Management Console 2017-06-24 12-40-52.png](https://qiita-image-store.s3.amazonaws.com/0/80392/2ed3da0c-e98b-8f3b-03a0-42a86bc49530.png)
<BR><BR>
* Endpointのリンクをクリックして先ほどTXTファイルに書き込んだ文字が表示されたら成功<br>
![S3 Management Console 2017-06-24 12-46-12.png](https://qiita-image-store.s3.amazonaws.com/0/80392/31da82d8-a51b-63c7-43bf-90aed0fe6c8b.png)
![スクリーンショット 2020-05-27 9.02.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80392/86644be3-f755-70ba-d590-c5d0a9c72c8a.png)


#**独自ドメインでアクセスできるようにする**
##独自ドメインをRoute 53でホストしている場合
あらかじめ決めておいたFQDNでAレコードAliasを登録する
http://qiita.com/Ichiro_Tsuji/items/8471fe0b3d4d17cde146#aレコードaliasの登録
##独自ドメインをRoute 53 以外のDNSでホストしている場合
あらかじめ決めておいたFQDNでDNSにCNAMEレコードを作成し、先ほどクリックしたS3バケットのEndpointを登録する

#**APIアクセス用のKeyを作成する**
**他のアプリケーションからS3バケットにAPIでアクセスするために、IAM Access Keyを作成します**
今回作成するのは下表のユーザーおよびそれにひも付くKeyです。**画像内の入力文字列はサンプル**ですので、説明文で指定した文字列を入力してください。

| ユーザー名 | アクセス権 |
|----------|----------|
| s3 | AmazonS3FullAccess |

* AWSに[サインイン](https://console.aws.amazon.com/)する
* Identity and Access Management(IAM)コンソールを開く<BR>※ 英語画面で説明するので日本語表示になっている場合は、画面左下の言語選択を「English」に変更する<BR>
![AWS Management Console 2017-02-05 15-21-17.png](https://qiita-image-store.s3.amazonaws.com/0/80392/1cb88cc2-a86a-b9d7-7414-97354a338df6.png)
<BR><BR>
* 「s3」というUser nameでProgrammatic accessユーザーを作成する<BR>
![IAM Management Console 2017-02-05 15-25-26.png](https://qiita-image-store.s3.amazonaws.com/0/80392/dc7adb2c-e039-d6f3-12f7-b6b3cf0fb61f.png)
<BR><BR>
![IAM Management Console 2017-02-05 15-27-19.png](https://qiita-image-store.s3.amazonaws.com/0/80392/8aec525c-52a5-89fc-d3c5-1d18882bd145.png)
<BR><BR>
* [Attach existing policies directly]をクリックし、[s3]で検索して、[AmazonS3FullAccess]にチェックを入れる
* [Next: Review]をクリックする<BR>
![IAM Management Console 2017-02-05 15-36-54.png](https://qiita-image-store.s3.amazonaws.com/0/80392/b93985ae-201f-6730-71bf-7024b038b2e0.png)
<BR><BR>
* [Create user]をクリックする<BR>
![IAM Management Console 2017-02-05 15-38-24.png](https://qiita-image-store.s3.amazonaws.com/0/80392/9dcbdfed-df8c-6b0d-c63b-0e36607e0087.png)
<BR><BR>
* 認証情報の書かれたCSVをダウンロードし、[Close]をクリックする<BR>
![IAM Management Console 2017-02-05 15-41-43.png](https://qiita-image-store.s3.amazonaws.com/0/80392/a3c29183-8437-e796-d71e-31289c89af54.png)

#**参考**
S3バケットのコンテンツを管理するには、専用アプリを利用すると便利です。バケットへのアクセスには先ほど作成したIAM Access Keyを使用します。
＜Mac用＞
Cyberduck
https://cyberduck.io/index.ja.html?l=ja

＜Windows用＞
WinSCP
https://forest.watch.impress.co.jp/library/software/winscp/

CloudBerry Explorer
http://www.cloudberrylab.com/free-amazon-s3-explorer-cloudfront-IAM.aspx