新米エンジニアの失敗再発防止メモ

自分そしてこの世界の皆が、同じ失敗をしないためのメモ

Twitterやってます!@rakuton_t
欲しいものリストのブタメンを送ってくれた方、ありがとうございます!

【AWS】S3 + CloudFront で サブディレクトリにアクセス時に index.html をデフォルトで表示させる

この記事を参考にしました。

qiita.com

大変助けになった記事なのですが、私の場合はこの情報だけでは解決しませんでした。
そもそも解決すべき目的が近いけど違いました。

当記事では、
http://www.example.com/hogehoge/
にアクセスしたときに、
http://www.example.com/hogehoge/index.html
が呼び出されるようになるための設定をご紹介します。

本編

AWS S3 と CloudFront を使った場合、ルートにアクセス時はindex.htmlを表示する設定は簡単かと思います。
が、サブディレクトリにアクセスしたときにも、index.htmlを表示する設定は、知らないとちょっとハマりポイントです。

上記の記事で説明が欠けている設定

AWS S3 アクセス権限の設定

ここですね。
閲覧に関しては匿名アクセスを許可する必要があるので、
まず、「新規のパブリックバケットポリシーをブロックする (推奨)」をFalseにしてください。

パケットポリシーを設定する

これコピペして一部変えてください。バケット名のところとか変える必要あります。

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "readOnlyOthers",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.hogehoge.com/*"
        }
    ]
}

「www.hogehoge.com」の部分はバケットの名前に変えてください。

解説しますね。

"Sid": "readOnlyOthers"任意の設定ID
"Effect": "Allow"何をするかの設定この場合、許可(Allow)
"Principal": "*"Effectの対象を指定、ワイルドカード「"*"」の場合は、匿名含め全員
"Action": "s3:GetObject"何の権限についてなのかを指定「"s3:GetObject"」の場合は閲覧権限。
ちなみに「"s3:PutObject"」の場合は書き込み権限についてになりますが、ワイルドカードで許可は絶対してはいけません。
"Resource": "arn:aws:s3:::www.hogehoge.com/*"アクセス対象を指定、この場合「www.hogehoge.com」という名前のバケットのファイル全て

GetObjectについての公式ドキュメントはこちらになります。
GET Object - Amazon Simple Storage Service

Static website hosting を設定する

static website hosting

Static website hosting の「このバケットを使用してウェブサイトをホストする」
を選択してください。
インデックスドキュメントはindex.htmlを入力してください。
勿論、index.html 以外が良ければ別の名前に。

CloudFront側の設定

こちらは、一番上のところで紹介した記事に書いてありますが、一応ここでも説明しときますね。

「Origins and Origin Groups」を開いてください。
static website hostingの設定

元々設定があれば編集、無ければ新規作成してください。
static website hostingの設定2

「Origin Domain Name」のところに、
S3で「Static website hosting」の設定をするときに出てくるエンドポイントを入力してください。
「http://」のところは消してください。「xxx.s3.amazonaws.com」って形式のやつです。

設定が完了したら、Statusが「Deployed」になるまで待ちましょう。
結構時間かかります。10~30分ぐらいかな?

「Deployed」なったら、完了です。サイトにアクセスしてみてください。

私の記事が役に立ったら、どうぞ何か買ってください!→ Amazon欲しいものリスト