f:id:ysmn_deus:20190331130214p:plain

どうも、靖宗です。
S3で静的ウェブサイトを公開するときにちょっと詰まったのでメモ。
最初は下記のQiita記事を参考にさせていただきました。

また、当然のことだとは思いますが、アクセス権などをいじるので、その辺は自己責任でお願いします。

基本的な方針
- バケットの作成
ファイルのアップロード
静的ウェブサイトホスティングの機能を有効にする
バケットポリシーの変更
補足

基本的な方針

基本的には

S3のバケットのルート（直下）にindex.htmlを配置する
CloudFrontは挟まない

という想定で行います。一般公開するならPVにもよるんでしょうがCloudFrontは挟んだ方が良いと思います。（Basic認証なんかもLambda使えばすぐですし。）

バケットの作成

なにはともあれバケットを作成しないことには始まりません。
S3のコンソールからバケットを作成します。

f:id:ysmn_deus:20190331130741p:plain

適当に名前を付けて次へ。
リージョンはどこでも良いと思うんですが、日本向けなら東京リージョンが良いんじゃ無いでしょうか。
プロパティとかはすっ飛ばして次へ。

f:id:ysmn_deus:20190331130855p:plain

ここで、パブリックアクセスの設定が出てきます。

f:id:ysmn_deus:20190331131104p:plain

ここでコントロールしてもいいんですが、一旦推奨設定を利用するという事で次へに行きます。
慣れてきたらここで後ほど説明する設定を適応しても良いと思います。

最後に確認画面が出てくるので問題無ければ「バケットを作成」
成功すれば一覧の所に先ほど決めた名前でバケットができてると思います。

f:id:ysmn_deus:20190331131314p:plain

ファイルのアップロード

早速ファイルをアップロードしていきます。
一応ルートディレクトリでなくてもホスティングできると思いますが、今回はルートに配置します。
適当に作ったindex.htmlを利用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>S3</title>
  <link href="" rel="stylesheet">
</head>
<body>
hoge
</body>
</html>

S3にアップロード

f:id:ysmn_deus:20190331131705p:plain

f:id:ysmn_deus:20190331131923p:plain

f:id:ysmn_deus:20190331131939p:plain

f:id:ysmn_deus:20190331131953p:plain

深いことは考えずとりあえずアップロードしました。
ここでもパブリックアクセスなどの設定で後々の手順をスキップできるのですが、今回は手順を極力分離します。

静的ウェブサイトホスティングの機能を有効にする

ホスティング機能を有効にします。S3のバケットのページからプロパティのページへ移動します。

f:id:ysmn_deus:20190331132243p:plain

Static website hostingと書かれた箇所をクリックします。

f:id:ysmn_deus:20190331132331p:plain

f:id:ysmn_deus:20190331132445p:plain

何もしなければここで記載されている「エンドポイント」がアクセスするURLになります。
独自ドメインの設定なんかはまた別の機会に。（というかぐぐれば出てくるとは思います）設定を「ウェブサイトのホスティングを無効にする」から「このバケットを使用してウェブサイトをホストする」に変更します。

f:id:ysmn_deus:20190331132549p:plain

インデックスドキュメントのところに先ほどアップロードしたindex.htmlを指定します。
たぶんhtmlとかいうディレクトリに格納してる場合はhtml/index.htmlとかでもいけるとは思います。

設定を変更したら保存を押して設定完了。

こうすると、先ほどのエンドポイントで指定したURLでウェブサイトのホスティングが

できないんですよこれが。

バケットポリシーの変更

S3のバケットのページからアクセス権限のページへ移動します。

f:id:ysmn_deus:20190331133444p:plain

f:id:ysmn_deus:20190331133730p:plain

いままで通りにバケットを作成していれば、上記のようになっていると思います。
ここの「パブリックバケットポリシーを管理する」がFalseになっていないとバケットポリシーを変更できません。ですので、この設定と、「バケットにパブリックポリシーがある場合、パブリックアクセスとクロスアカウントアクセスをブロックする」という設定をFalseにします。二個目の奴はバケットポリシーが変更されてもアクセスをはじく設定なので消しときます。

f:id:ysmn_deus:20190331135442p:plain

f:id:ysmn_deus:20190331135455p:plain

f:id:ysmn_deus:20190331135546p:plain

これでバケットポリシーが変更できるようになりました。

お次はバケットポリシーを変更していきます。

f:id:ysmn_deus:20190331135708p:plain

ポリシーエディターでポリシーを設定します。自分は下記のように設定しましたが、ここは適宜変更して下さい（バケット名など）

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