【初心者向け】S3でWebページを公開するための究極完全体マニュアル


## 概要
HTML・CSS・Javascriptを本格的に学んで約1ヶ月。
なんとか架空のゲーム紹介サイトを作成できました。

今回は作成したWebページをAWS S3にアップロードして公開するために
私がS3で行ったバケットの作成と設定について説明します。

これからS3を初めて使用する方の力になれたら幸いです。

##今回の活動のゴール
**S3にてバケットを作成し、Webページを公開するために必要な設定を行う。**

##アジェンダ
・S3とは？
・S3の特徴
・S3のユースケース（使用用途）
・S3実践編(バケットの作成)
・S3実践編(バケットへの設定)
・S3実践編(オブジェクトのアップロード)
・まとめ

##S3とは？
>正式名：Simple Storage Service

>インターネット経由で利用できるオブジェクトストレージサービス(※)
>データの大きさにかかわらず、ウェブ上のどんな場所からでもいつでも保存、取得することができる

>(※)オブジェクトストレージサービスとは
　　データを「オブジェクト」単位で「バケット」に保存するストレージサービス

##S3の特徴
####・99.999999999%の耐久性
　S3に保存したデータは1つのリージョンにある
　最低3つのアベイラビリティーゾーン(AZ)の複数デバイスに冗長的に保存されます。

　全てのAZのデバイスが使用不可となる確率が0.000000001%であるため、
　S3の耐久性は 100% - 0.000000001% = 99.999999999% となります。

####・容量が無制限
　S3の容量は無制限です。
　ただし以下の点に注意してください。
　　①S3は従量課金制であるため、使った分（データを保存した分）だけ課金が発生する
　　②保存するオブジェクトは１ファイルにつき、５TBまで

####・安価な料金体系
　S3は従量課金制です。
　具体的には以下のような条件から課金額を算出しています。
　・どのストレージクラスを使用したか？
　・どれくらいのデータを保存したか？
　・どれくらいのアクセスが発生したか？

　　しかし、他のストレージサービスと比較してもS3はとても安価で利用できます。
　　(2019年4月現在ではデータ保存については0.023USD/GBの課金が発生します。
　　(S3標準ストレージクラスの場合))

####・強固なセキュリティ
　S3のバケットやオブジェクトへのアクセスはデフォルトではプライベートアクセスのみ許容します。
　(＝バケットやオブジェクトを作成したユーザのみアクセス可能)

　他のユーザがアクセスするためにはアクセスポリシーの作成が必要となります。
　→不特定多数のユーザによる不正アクセスをあらかじめ防止する設定となっています。

##S3のユースケース（使用用途）

上記のような特徴を持つS3のユースケースとしては以下のようなものが考えられます。

####・バックアップサーバー
　S3の耐久性・セキュリティに着目し、大容量かつ非公開にしたいバックアップデータを保存する
####・ログデータの退避先
　EC2で稼働するアプリケーションのログの保存先など
####・静的ウェブサイトの作成
　S3をWebサーバとしてみなし、HTML・CSS・Javascriptなどをアップロードし、
　静的Webサイトを構築する

##S3実践編(バケットの作成)

実際に作成したバケットについて説明していきます。
####・バケット作成手順
######① S3 Management Consoleを表示し、「バケットを作成する」をクリック![S3ホームページ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/2b77c33c-d40c-9f5d-fe94-e6cb9670d9e6.png)

######② `[バケットの作成 ダイアログ(名前とリージョン)]`
　　「バケット名」と「リージョン」を入力し「次へ」をクリック
![スクリーンショット 2019-04-29 16.36.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/ba42c841-60b2-6c5c-c510-ea2b775e98b7.png)

######③ `[バケットの作成 ダイアログ(オプションの設定)]`
　　設定したいもののみ設定して「次へ」をクリック（一部を除き、後ほど設定できます）
　　私の場合は何も設定しませんでした。
![スクリーンショット 2019-04-30 23.40.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/68094a36-b9d6-f07c-4e41-9826be8c573a.png)
![スクリーンショット 2019-04-30 23.40.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/615a6d46-5fb7-a123-acaa-3f3d9c31ecae.png)


各設定については以下の通りです。

**・バージョニング**
　S3にアップロードしたオブジェクトのバージョン管理を行う場合は選択してください。

　バージョニングが有効な状態で同じオブジェクトをアップロードした場合、
　既にあるオブジェクトを上書きするのではなく、
　別バージョンのオブジェクトとしてアップロードされます。
　→S3内でバージョン管理が可能となる

　注意点：
　　別バージョンのオブジェクトは新規の別オブジェクトとして認識されるため、
　　ストレージの容量を使用します。

　　例：
　　　バージョニングが有効である時、既にS3にアップロードされているXオブジェクト(500KB)を
　　　更新し、再アップロードすると最新版のXオブジェクト(510KB)は
　　　新規オブジェクトとして認識されます。

　　　つまり、Xオブジェクトとしては500KB + 510KB = 1010KB分をバケットで使用します。

**・サーバーアクセスのログ記録**
　作成するバケットへのアクセスをログとして残したい場合は選択してください。
　本機能を有効にする場合、アクセスログを格納するバケット・プレフィックスを入力してください。
　
　注意点：
　　アクセスログはアクセス後即座に保存されるわけではなく、
　　保存されるまでにしばらく時間がかかります。 

**・Tags**
　コスト配分レポートにてバケットごとのストレージ使用状況を出力したい場合は選択してください。
　本機能を有効にする場合、キーと値を入力してください。

**・オブジェクトレベルのログ記録**
　CloudTrailを使用し、S3への操作ログ(API Call)を収集したい場合は選択してください。
　GetObjectなどのS3のオブジェクトに対するAPI操作をログに記録できます。 

　注意点：
　　本機能を有効にすると従量課金が発生します。(0.1USD/100,000イベント)
 
**・デフォルト暗号化**
　S3にアップロードするファイルを必ず暗号化させたい場合は選択してください。
　本機能を有効にする場合、AES-256かAWS-KMSを選択してください。

　注意点：
　　暗号化は大きいファイル(100MB以上)をアップロードする場合、
　　性能が落ちる可能性があります。　　　
　　また、本機能を有効にする前にアップロードしていたオブジェクトは暗号化されません。

**・詳細設定(オブジェクトのロック)**
　S3のオブジェクトに対して上書き・削除を禁止する場合は選択してください。
　新しいバージョンのオブジェクトをアップロードすることは可能です。
　本機能を有効にする場合、バケットの保持モード(Retention Mode)(※1)と
　保持期間(Retention period)(※2)を設定してください。

　(※1)保持モードは以下の2種類
　　①コンプライアンスモード：
　　　AWSアカウントでrootユーザを含め、すべてのユーザーによる上書き・削除を禁止する
　　②ガバナンスモード：
　　　s3:BypassGovernanceRetention権限があれば、オブジェクトの上書き・削除が可能 

　注意点：
　　本機能を有効にする場合、「バージョニング」を有効にする必要があります。
　　また、保持モードと保持期間の設定はS3バケット作成後に行います。

**・CloudWatch リクエストメトリクス**
　Amazon CloudWatchによるメトリクス管理をする場合は選択してください。
　本機能により管理されるメトリクスは以下の2種類です。
　①ストレージメトリクス：
　　1日ごとにバケット単位および、Storage Typeごとのメトリクスを管理 
　②リクエストメトリクス：
　　1分ごとにオブジェクトへのリクエスト(GetRequestsなど)のメトリクスを管理

　注意点：
　　本機能を有効にすると従量課金が発生します。(最初の10,000メトリクスは0.3USD/月)

######④ `[バケットの作成 ダイアログ(アクセス許可の設定)]`
　バケットのパブリックアクセスポリシーを設定します。
　デフォルトでは全て有効となっていますが、今回はパブリックアクセス設定は全てチェックを外し、
　「次へ」をクリック(チェックを外す理由や各項目については後ほど説明します)　
![スクリーンショット 2019-04-30 23.51.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/60c75b0a-0df0-c5b4-659f-633cd1f049f4.png)

**・システムのアクセス許可の管理**
　バケットに対するリクエストの詳細が記録されたサーバーアクセスログを保存する場合は、
　[Amazon S3 ログ配信グループにこのバケットへの書き込みアクセス権限を付与する] を
　選択してください。

　私の場合は
　[Amazon S3 ログ配信グループにこのバケットへの書き込みアクセス権限を付与しない]
　にしました。(デフォルトの設定です)
　
######⑤ `[バケットの作成 ダイアログ(確認)]`
　今まで設定してきた内容を確認し、問題なければ「バケットを作成」をクリック
![スクリーンショット 2019-05-01 0.03.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/5a966f22-b08f-d214-7e50-74ed53c0e8b0.png)
これでバケットの作成は完了しました！

##S3実践編(バケットへの設定)

作成したバケットに対して以下の設定を行います。
**1.パブリックアクセス(getリクエストのみ許容)の設定**
**2.静的Webサイトホスティングの設定**

####1.パブリックアクセス(getリクエストのみ許容)の設定
**最初に結論から述べますが、今回は②バケットポリシーにて設定を行いました。**

S3のバケットへのアクセスについては以下の4つでコントロールされています。
######①ユーザポリシー
　IAMユーザに対して、S3のバケットへのアクセス制限を行います。
　今回は何も設定していません。

######②バケットポリシー
　S3のバケットへのアクセス制限を行います。
![スクリーンショット 2019-05-01 14.35.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/bf091bfc-3161-ef60-1fc9-64e2d2e91375.png)



　PolicyDocumenを使用し、柔軟にアクセス設定ができます。
　今回のパブリックアクセス設定はこちらで行いました。

　パブリックアクセス(getリクエストのみ許容)の設定内容は以下の通り

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::【バケット名】/*”
        }
    ]
}
```

　設定内容の説明
　**・Version：**
　　　ポリシー言語のバージョン。
　　　2008-10-1(旧バージョン)と2012-10-17(現行バージョン)があります。
　　　今回は最新版の`2012-10-17`を設定しています。
　**・Statement :**
　　　この中にステートメントのポリシーを記載します。
　**・Sid :**
　　　ステートメント識別子。
　　　ポリシー内で一意になるように設定します。
　　　今回は`AddPerm`を設定しています。
　**・Effect :**
　　　条件を満たすアクセスを許可(Allow)するのか拒否(Deny)するのかを設定。
　　　今回はアクセスを許可させるため、`Allow`を設定しています。
　**・Principal：**
　　　ステートメントの内容はどのユーザを対象とするのかを設定。
　　　今回はパブリックアクセス＝全てのユーザに対して適用させるため、`*`を設定しています。
　**・Action：**
　　　許可or拒否されるバケットへのアクション内容を設定。
　　　今回はs3バケットへのgetリクエストのみ許可するため、[s3:GetObject]を設定しています。
　**・Resource：**
　　　対象のリソースを指定。
　　　今回はs3のバケットであるため、`arn:aws:s3:::【バケット名】`を設定しています。

######③アクセスコントロールリスト(ACL)
　各バケット/オブジェクトごとに付与され対象のアクセス設定を行えます。
![スクリーンショット 2019-05-01 0.46.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/07cdb6dd-b4ab-d7a2-2d56-a2e7050c7f55.png)

　前述のバケットポリシーやユーザポリシーよりも優先度が低い(※)ため、
　基本的には特定のケースのみ使用するものと認識しています。
　
　特定のケース
　　①違うアカウントが所有するオブジェクトのアクセス許可を管理する → オブジェクトACL
　　②S3のログ配信グループに、バケットへのアクセスログの書き込み許可を付与する → バケットACL

　今回は①・②にバケットポリシーを設定しているため、ACLは設定していません。

　(※)ACLとバケットポリシーの優先度についてはこちらの記事をご参考にしております。
　　[【AWS】S3のBucket-ACLとObject-ACLとバケットポリシーどれが強いのか？](https://qiita.com/chokuzin/items/9637a6ce48c0ebb10b31)


######④パブリックアクセスポリシー
　バケット作成時にも出てきたパブリックアクセス設定のことです。
![スクリーンショット 2019-05-01 0.43.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/57ea9cd7-8e86-75fc-fe82-4a8c826dc390.png)


　パブリックアクセスポリシーとはアカウントレベル・バケットレベルで
　あらかじめ意図せずバケットがパブリックアクセスになるのを抑制するものです。
　＝ACL・バケットポリシー・ユーザポリシーの誤った設定によりパブリックアクセスが
　　有効となることを防ぎます。

　パブリックアクセスポリシーには以下の4つの項目があります。
　今回はWebサイトの公開(＝パブリックアクセスを許可)することが目的ですので、
　バケット作成時に全て無効化しています。

　**・新規のパブリック ACL と、パブリックオブジェクトのアップロードをブロックする (推奨)**
　　作成したバケットのACLにて以下の設定を禁止します。
　　・「オブジェクトへのアクセス」
　　・「このバケットのACLへのアクセス」　　
　　　![スクリーンショット 2019-04-30 11.57.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/53281830-e83c-ede2-344e-8bd9b5a89d15.png)
![スクリーンショット 2019-04-30 11.59.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/597b1946-1f41-d75f-7c7c-77b545932f86.png)
　　また、オブジェクトの公開も禁止します。

　**・パブリック ACL を通じて付与されたパブリックアクセスを削除する (推奨)** 
　　オブジェクトのアップロード時に「パブリックアクセス許可を管理する」にて
　　「このオブジェクトにパブリック読み取りアクセス権限を付与する」を選択すると、
　　アップロードは成功しますがパブリックACLは付与されません。
　　![スクリーンショット 2019-04-30 12.11.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/ca737a1a-bda8-a004-4f9a-774156cff604.png)


　**・新規のパブリックバケットポリシーをブロックする (推奨)** 
　　パブリックバケットポリシー（"Principal": "*"）の設定を禁止します。
![スクリーンショット 2019-04-30 12.20.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/16eca925-05f4-b0aa-e1bd-348d262ab4eb.png)
![スクリーンショット 2019-04-30 12.23.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/fa97ad1a-b68a-497d-04f5-df49ff0ef1f7.png)


　**・バケットにパブリックポリシーがある場合、
　　パブリックアクセスとクロスアカウントアクセスをブロックする (推奨)**
　　パブリックバケットポリシーにてパブリックアクセス・クロスアカウントアクセスの
　　設定を行っている場合、パブリックアクセス・クロスアカウントアクセスをブロックします。
　
####2.静的Webサイトホスティングの設定
S3はストレージとしての機能だけでなく、Webページをホスティングする機能もあります。
今回はこちらの機能でWebサーバとしてWebページの公開を行いました。

静的Webサイトホスティングの設定手順は以下の通り
**①生成したバケットにてバケットポリシーの設定を行う**
**②バケットの「プロパティ」から「Static website hosting」の設定を行う**

①については1-②にて行いました。
②については以下の通り設定します。

　・「このバケットを使用してウェブサイトをホストする」を選択
　・インデックスドキュメントに「エンドポイント」へアクセスされた際に表示するページを指定する
　　→入力必須であるため、今回はindex.htmlを設定しています。
　・エラードキュメントにエラー発生時に遷移するページを指定する
　　→任意入力であるため、今回は設定していません。
　・リダイレクトルールに特定のコンテンツのウェブページへのリクエストを
　　自動的にリダイレクトするように設定できるルールを設定する
　　→任意入力であるため、今回は設定していません。
　　
　　最後に「保存」をクリック
![スクリーンショット 2019-04-30 17.00.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/82e0af8b-a5b4-a590-3cbc-d3ff1419336c.png)

これでエンドポイント(http://【バケット名】.s3-website-ap-northeast-1.amazonaws.com)
からアクセスした際、index.htmlが表示されるようになりました！
　
**以上でS3のバケットの設定は完了しました！**

##S3実践編(オブジェクトのアップロード)

これまでの手順を一通り行えばWebページ公開に向けたバケットの準備は完了です。
あとはバケットにオブジェクトをアップロードしていくだけです。

####オブジェクトのアップロード手順

######①作成したバケットのマネジメントコンソールにて「概要タブ」を選択し、「アップロード」をクリック
![スクリーンショット 2019-05-01 13.32.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/0587216a-6720-25a8-c76a-d03585ec2167.png)

######② `[アップロード ダイアログ(ファイルの選択)]`
　アップロード対象のファイル・フォルダを選択し、「次へ」をクリック
　(ファイル・フォルダは複数選択可)
　私は初めてのアップロードは「index.html」のみ行いました。
![スクリーンショット 2019-05-01 13.34.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/a52ccc17-8d16-3caf-5521-500bf7216bb2.png)
![スクリーンショット 2019-05-01 13.57.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/b83f6b0f-033a-b502-293c-31f288738da1.png)

######③ `[アップロード ダイアログ(アクセス許可を設定する)]`
　アップロードするオブジェクトへのアクセス許可を設定できます。
　今回は特に何も変更せずに、「次へ」をクリック
　(ここで設定するのはACL(アクセスコントロールリスト)の設定ですので、今回は不要です。
　また、後ほどアクセス許可の設定は変更できます、)
![スクリーンショット 2019-05-01 14.02.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/7437ba37-32dc-46ca-1af1-c854da153cb4.png)

######④ `[アップロード ダイアログ(プロパティを設定する)]`
　アップロードするオブジェクトが使用するストレージクラス、暗号化のタイプ、メタデータを
　設定できます。

　今回はWebページを公開することが目的(=頻繁にアクセスされる)ですので、
　ストレージクラスはスタンダード　を選択しました。
　また、暗号化はアップロード時点ではデフォルトの「なし」にしています。
　(「なし」を選択した場合、バケット作成時の「デフォルト暗号化」の設定に従うみたいです)
　内容を確認し、「次へ」をクリック　
![スクリーンショット 2019-05-01 14.13.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/79a6ebb3-b072-09fa-1fe7-6ed97613338a.png)
![スクリーンショット 2019-05-01 14.14.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/729f3914-e9b2-a92d-76e2-a0d3172f144f.png)

######⑤ `[アップロード ダイアログ(確認)]`
　アップロード内容とオブジェクトの設定内容を確認し、「アップロード」をクリック

![スクリーンショット 2019-05-01 14.24.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/1cf0df5a-9a1a-2483-4fb6-741a1c2a246e.png)

作成したバケットのマネジメントコンソールにて「概要タブ」を選択し、「index.html」が表示され、
画面下部に「オペレーション　1成功」と表示されています。

無事アップロードが完了しました!

![スクリーンショット 2019-05-01 14.27.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/b35639c3-fc41-18a7-8cd4-32de296196a5.png)

##まとめ

初めてS3にてWebページを公開したときはS3の設定内容がよくわからず、
かなり時間がかかりました。
ここに記載していることを実施すれば、私のようにS3でWebページを公開することができます！
初心者でも簡単な設定でWebページが公開できますので、皆さんもぜひ試してみてください!