S3 に保存した拡張子を取り除いた html コンテンツが閲覧ができない事象の対処

タダです.

CloudFront と S3 の構成で静的ファイルの配信をすることになり,継続的なコンテンツの更新があるし GitHub Actions でコンテンツをアップロードするようにしました.その際に,静的ファイルの中で html ファイルを拡張子取り除いてアップロードしたものがいくつかあったのですが,アクセスしてみたら拡張子を取り除いたファイルは閲覧できずダウンロードされてしまいました.この記事でこの事象の対応をまとめていきます.

ダウンロードされたファイルの状況

ダウンロードされたファイルを見て見ると content-type が binary/octet-stream になっていました.本来 text/html の content-type で閲覧したいので,アップロードする時に意図したcontent-type にします.

curl -I https://example.com/hoge
HTTP/2 200
content-type: binary/octet-stream

GitHub Actions の処理

該当の処理の部分だけ抜粋したのが下記の GitHub Actions です.拡張子を取り除いたファイルとその他の除外したいファイル以外を s3 sync でアップロードし,拡張子を取り除いたファイルは aws s3 cp --content-type text/html を指定してアップロードします.

- name: Remove html file extension
   run: |
     mv hoge.html hoge
- name: Upload contents to S3
   run: |
      aws s3 sync . ${{ secrets.S3_BUCKET }}  --exclude '*.git*' --exclude "README.md" --exclude "hoge" 
      aws s3 cp --content-type text/html hoge ${{ secrets.S3_BUCKET }}

関連情報

docs.aws.amazon.com

ダウンロードされたファイルに再度アクセスした結果

再度アクセスしてみると今度は text/html になりレスポンスが返ってきて意図したコンテンツの閲覧ができました.

curl -I https://example.com/hoge
HTTP/2 200
content-type: text/html

まとめ

GitHub Actions 経由でアップロードしたファイルを閲覧した時に静的ページではなくコンテンツのダウンロードが発生したのでその対処をまとめました.同じ事態になった際の参考になれば嬉しいです.