いきなりですが、AWS基盤で独自のwebサイトを作りたいと思っています。
HTMLやCSSなどフロントのコンテンツは別のサービスを使っていい感じに作るとして、AWSを使うメリットはバックエンドがいい感じにできることです。
登竜門となるのが、s3といったストレージサービスに格納したファイルをいかにしてCloudFrontに乗っけるのか、という部分になると思います。
雑なイメージですが、AWSであれば以下のような構成にすることでいい感じに作れます。
詳しい作り方は、ぜひAWS公式のハンズオンなどを見てみてください。
個人的にハマリポイントがいくつかあったので、そういった点について備忘録として乗っけます。
うまく設定しないと、URLにアクセスしても「AccessDenied」のページとなってしまいます。
CloudFrontには、s3パケットのHTMLファイルURLをそのままコピペしてもうまくいかない
以下のように、s3にindex.htmlをインポートした後、オブジェクトURLをCloudFrontに貼り付けると思います。
そのやり方では上手く行かなくて、CloudFrontのOriginには以下の形式でDomain nameを登録する必要があります。
{your-bucket-name}.s3-website-{your-bucket-region}.amazonaws.com
この辺の書き方は、以下の記事を参考にしました。
CloudFront×S3で403 Access Deniedが出るときに確認すべきこと - Qiita
Orign Pathにも、/index.htmlを登録する必要はありません。
Origin IDは特に変える必要はありません。
s3の権限は特にいじる必要はない
公開設定がうんぬん、などありますが、特に権限周りは変えなくてもうまくいきました。
わからなければ公開設定にして、成功次第絞るやり方でよいと思われます。