S3で静的ウェブサイトをホスティングする

# はじめに
AWSのS3の機能である静的サイトのホスティングを使ってウェブサイトを表示します。

# S3を使用するメリット
・簡単
・コスパがいい

# 前提
AWSアカウントを所持
html、cssファイルは作成済


# 表示まで
### 1．S3バケットの作成
##### ①　S3のコンソール画面から「バケットを作成」をクリック
![スクリーンショット (1)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/4be40d58-249b-1fc7-0f56-5d2537005c1d.jpeg)

##### ②　バケット名を入力
![スクリーンショット (2)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/d2c17c62-3e7c-ef65-abc7-c0b3e16223d4.jpeg)
バケット名は世界で一意である必要があります。
バケット名は3～63文字、小文字、数字、ドット、ハイフンのみで構成など他にもルールあり。

##### ③　「パブリックアクセスをすべてブロック」のチェックを外す
![スクリーンショット (3)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/9d00c46f-d6ad-7dd9-7258-f332215ce15c.jpeg)
今回はウェブサイトの表示なので、ブロックにチェックすると、アクセス出来なくなります。

##### ④　「バケットの作成」をクリック
![スクリーンショット (4)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/67c5531d-71de-b054-bbba-989386318688.jpeg)
その他はデフォルトで大丈夫です。

### 2．ファイルのアップロード
バケットを作成するとコンソール画面にバケットが追加されています。

##### ①　この画面で新しく作成したバケット名をクリックします。
![スクリーンショット (5)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/e4b3202a-0596-bd89-60dd-bbfd8193b733.jpeg)
※　スクショの手違いでアクセスの欄が「公開」になっていますが、本来は「オブジェクトは公開することができます」と表示されます。


##### ②　S3バケットにhtmlファイルとcssファイルをアップロードします。
オブジェクトタブの「アップロード」をクリック
![スクリーンショット (29)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/551cbd04-6c26-281f-5fd7-f724df5cbcf7.jpeg)
「ファイルを追加」をクリックし、アップロードするファイルを選択
![スクリーンショット (18)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/1cabc8ce-7f47-6a1b-1732-f717cb89b64d.jpeg)

ファイルを追加すると、選択したファイルが表示されます。
追加したら、下部の「アップロード」をクリック

### 3．ホスティングの設定
##### ①　静的ウェブサイトホスティング
バケットにファイルを追加したら、プロパティを開きます
![スクリーンショット (31)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/789bff83-ef1d-8408-44ed-07ce3c8ed16b.jpeg)
静的ウェブサイトホスティングの「編集」をクリック
![スクリーンショット (19)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/a95221e2-7564-44ba-1632-edb8a38384df.jpeg)
静的ウェブサイトホスティングを「有効にする」にチェック
インデックスドキュメントにアップロードしたhtmlファイル名を入力
![スクリーンショット (20)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/b63fe7d6-af72-6f5b-9733-32dabaaf9f4e.jpeg)
「変更の保存」をクリック
![スクリーンショット (21)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/51347c71-7cd5-0784-9183-46892d388541.jpeg)

##### ②　アクセス設定
アクセス許可タブのバケットポリシーを編集
![スクリーンショット (22)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/a14d2bec-540e-8905-c8ee-46f23a72b3c7.jpeg)
ポリシーエディターに
```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Bucket-Name/*"
            ]
        }
    ]
}
```
を追加。
ResourceのBucket-Nameのところをバケット名に変更

例
```
"arn:aws:s3:::hello-aws-site/*"
```
ポリシーを入力したら、変更の保存をクリック
![スクリーンショット (25)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/3afef7bf-a10b-ac97-6d1c-15ce12cb7b8f.jpeg)

### 4．サイトの表示
全て設定が完了したら、再度プロパティタブの静的ウェブサイトホスティングに戻ると、エンドポイントが表示されています。
![スクリーンショット (27)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/2e34e6ab-b64b-fb3b-d640-7a252fac4acf.jpeg)
これをクリックすると
![スクリーンショット (26).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/79e9f8f7-43ec-b4e5-c179-c1857f8d1032.png)
ブラウザでサイトが公開されました。

CloudFrontやRoute53を使用した高速化、ルーティングは今後やりたいと思います。

以上