AWS S3 CSSが反映されないとき

初めに

s3にboto3を使ってindex.html, main.js, style.cssをアップロードした。URLを開くとJavascriptが動いていることがわかった。しかしstyle.cssが反映されていなかった。

メタデータ編集

手順1
style.cssをクリックし、オブジェクトアクションをクリック

手順2
メタデータの編集をクリック

手順3
以下の"値"が"text/html"になっているので、"text/css"に編集する

編集後

手順4

オレンジ色のメタデータの編集ボタンを押す

これで反映される！！！
と思いきや反映されませんでした。
なぜ！！！

キャッシュの削除

キャッシュを削除すると反映された・・・
(･∀･)ｳﾝ!!
設定しなおした後は必ずキャッシュ削除
以下の記事を参考にした

boto3

upload.py

import boto3


def get_content_type_dict():
    content_dict = {'html': 'text/html',
                    'css': 'text/css',
                    'js': 'text/javascript',
                    'jpeg': 'image/jpeg',
                    'png': 'image/png',
                    'csv': 'text/csv',
                    'json': 'application/json',
                    'pdf': 'application/pdf'}
    return content_dict


def upload(up_file, bucket, object_name, credentials):
    session = boto3.Session(aws_access_key_id=credentials[0],
                            aws_secret_access_key=credentials[1],
                            aws_session_token=credentials[2])
    s3_client = session.client('s3')
    type_dict = get_content_type_dict()
    content_type = type_dict[os.path.splitext(object_name)[1].strip('.')]
    try:
        s3_client.upload_file(up_file, bucket, object_name,
                              ExtraArgs={'ContentType': content_type,
                                         'ACL': 'public-read'})

こんな感じで拡張子に応じてアップするときメタデータを設定すると楽かも
Content-Typeは以下の記事を参考にした
https://qiita.com/AkihiroTakamura/items/b93fbe511465f52bffaa

ExtraArgsなるものの存在は以下の記事が参考になった
https://qiita.com/jansnap/items/ecad5f20659cf138419b

疑問

main.jsはメタデータがtext/htmlでも動くこと

参考文献

ローカル環境でCSSが反映されない時に見直すべきhttpdの設定
https://hodalog.com/httpd-enablesendfile-off/

Content-Typeの一覧
https://qiita.com/AkihiroTakamura/items/b93fbe511465f52bffaa

boto3でS3にアップロードした画像が、ブラウザで表示するとダウンロードされてしまう時
https://hack-le.com/boto3-s3-browser/

Python+boto3でS3に画像をアップロードして公開する
https://qiita.com/jansnap/items/ecad5f20659cf138419b