S3をWebサーバーにしてコンテンツを公開する①（S3パブリック編）

S3をWebサーバーにして静的コンテンツを公開する方法を紹介します。

1. [S3パブリック編](https://qiita.com/morikaz/items/8d196844aed38d0d8d0b)　←コレ！
2. [S3署名付きURL編](https://qiita.com/morikaz/items/0d9d69e21e0863204b8e)
3. [CloudFrontパブリック編](https://qiita.com/morikaz/items/04c053ead497e2a7c86c)
4. [CloudFront署名付きURL編](https://qiita.com/morikaz/items/f3159562caa133916bce)　
5. [CloudFront署名付きCookie編](https://qiita.com/morikaz/items/741fc1073dff746f7089)

# 手順

## バケットの作成

まずはバケットを作成しましょう。

マネジメントコンソールでS3のページを開きます。
バケットを作成をクリックします。

![s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/a0698048-1503-f126-7ed0-b5c3f5135d75.png)

バケットの名前を入れて、リージョンを選択します。
バケット名は世界中のS3で一意である必要があります。

![s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/0b2e95c3-c631-4d27-6367-c1314ee01352.png)

一般公開するので、パブリックアクセスを許可する必要があるため、「パブリックアクセスをすべてブロック」のチェックを外し、「現在の設定により、・・・」にチェックを入れます。

![s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/f5593ab6-4982-61af-3ce2-a8cd9b22bb23.png)

これでバケット作成は完了です。

## HTMLの格納

作成したバケットを選択します。
そして、HTMLファイルをドラッグアンドドロップします。

![s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/c8507633-f0b0-c65c-26e1-361416f4d065.png)

設定が色々ありますが、画面最下部のアップロードを実行します。

![s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/393f9aa4-4e81-415d-bb6c-41c37ec87f2c.png)

複数ファイルやフォルダーまるごとアップロードすることも可能です。

## 公開する

公開する方法は2種類あります。

* ウェブサイトエンドポイントとして公開
* REST API エンドポイント

ウェブサイトエンドポイントと REST API エンドポイントの主な違い
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteEndpoints.html#WebsiteRestEndpointDiff

### 公開する（ウェブサイトエンドポイント）

バケットの設定画面の「プロパティ」タブを選択します。

![s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/e0766ae6-6f89-2774-0bd6-2f5388a3742b.png)

プロパティタブの一番下の「静的ウェブサイトホスティング」の「編集する」をクリックします。

![s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/9267043d-6b70-812a-4a3d-ab8ee9b8d5fa.png)

静的ウェブサイトホスティングを有効にし、インデックスドキュメントを指定します。

![s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/a4599eb3-bff5-a29b-9bc3-6b4f1958a3bb.png)

続いて、バケットの設定画面の「アクセス許可」タブを選択し、バケットポリシーに以下のJSONを指定します。（何故かコピペが使えず、一つ一つ手入力しました。。）

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::website-2721ae93/*"
        }
    ]
}
```

![s3.console.aws.amazon.com_s3_buckets_website-2721ae93_region=ap-northeast-3&tab=objects(iPad).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/711277fb-a676-e567-142d-53c1b683bf0c.png)

これで設定完了です。

アクセスURLは以下となります。
http://[バケット名].s3-website.[リージョン名].amazonaws.com/

### 公開する（REST API エンドポイント）

こちらは方法が２つあって、

* バケットポリシーで設定
* アクセスコントロールリスト（ACL）で設定

バケットポリシーで設定する方法は、先程のウェブサイトエンドポイントの手順で説明した、アクセス許可の設定だけすればOKです。

アクセスコントロールリスト（ACL）する方法は、公開したいオブジェクトを選択して、「アクション」の「公開する」を選択します。

![s3.console.aws.amazon.com_s3_buckets_website-2721ae93_region=ap-northeast-3&tab=objects(iPad) (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/2ca546fa-7bc1-520e-4141-c97d8a4635b7.png)

アクセスURLは以下となります。
https://[バケット名].s3.[リージョン名].amazonaws.com/index.html