S3 + CloudFront での静的Webサイト配信への気持ち

デフォルトルートオブジェクトを定義しても、ディストリビューションのサブディレクトリに対するエンドユーザーリクエストはデフォルトルートオブジェクトを返しません。例えば、index.html がデフォルトルートオブジェクトであり、CloudFront が CloudFront ディストリビューション下の install ディレクトリに対するエンドユーザーリクエストを受け取ったと仮定します。

https://d111111abcdef8.cloudfront.net/install/

index.html のコピーが install ディレクトリ内にあっても、CloudFront はデフォルトルートオブジェクトを返しません。

これは昨今のフロントエンドフレームワークのSSGと大層食べ合わせが悪い。

S3とCloudFrontの組み合わせ

S3に/has-index-document/index.htmlというキーのオブジェクトが置いてある状態で、CloudFrontのオリジンとしてS3バケットを指定した場合こうなる。

https://d6v5w007h85or.cloudfront.net/
- デフォルトルートオブジェクトが効くので/index.htmlが表示される
https://d6v5w007h85or.cloudfront.net/has-index-document/
- 解決されず、エラーする
https://d6v5w007h85or.cloudfront.net/has-index-document/index.html
- 存在するオブジェクトへのアクセスなので/has-index-document/index.htmlが表示される

同様にオリジンにS3の静的Webサイトホスティングのドメインを指定した場合はこうなる。この動きを期待したい。

これらはいずれもS3の静的Webサイト機能がいい感じに解決してくれる。

が、HTTPでコンテンツが配信されてしまう。

http://static-web-hosting-patterns-aws-cloudfront-s3-static-web.s3-website-ap-northeast-1.amazonaws.com/

これを「生理的に受け付けられない」という話。

参考

↑を構築しているリポジトリ
- GitHub - 7474/static-web-hosting-patterns
AWSの提示サンプルリポジトリ
- GitHub - aws-samples/amazon-cloudfront-secure-static-site: Create a secure static website with CloudFront for your registered domain.

じゃぁどうするのか？

とりあえず「CloudFrontのオリジンとしてS3バケットを指定」して、index.htmlに解決されたいキーにindex.htmlをコピーすることを試している。

通常のファイルシステムの上では「/sub_dir」ディレクトリと「/sub_dir」ファイルは両立しないが、S3では「/sub_dir」というオブジェクトのみになるので成立する。

GitHub Actionsのワークフローでこんな感じ。

      - run: aws s3 sync ./out s3://XXXX
      - name: Fix route
        run: |
          cd ./out && find ./ -type f -name '*.html' | while read HTMLFILE; do
            BASENAME=${HTMLFILE#*/};
            FILENAME=${BASENAME%.*};
            if [[ "$FILENAME" != "index" ]];
            then
              aws s3 cp s3://XXXX/${BASENAME} s3://XXXX/${FILENAME};
            fi
          done
      - run: aws cloudfront create-invalidation --distribution-id XXXX--paths "/*"