wagtail(Django CMS)アプリをherokuにデプロイ後、読み込みはされるものの画像が反映されない

Question

いまだ問題解決にいたっておらず情報源を増やすため、下記サイトからこちらにマルチポストしました。変更などがあった際には双方にて追記していきます。

大きく変更した部分や状況が変わった部分があるため、以前の文章についてはイタリック体、最新のことについては太字、以前のコードについてはコメントアウトに変更しています。

リンク内容

###大まかな現状
様々なサイトなどをみてherokuにデプロイはできたが、mediaである画像ファイルが表示されなかった。（画像タイトルのみ表示されるので読み込まれたことは確認できる。）英語版stackoverflowにて質問したところ、S3を使用するべきだとご指摘いただいたので、実装したところcssも反映されなくなってしまった。なのでまずcssを読み込み、次にmediaを読み込む必要がある。本質問では、static/Mediaの設定でおそらく両方解決できると考えるため、一つの質問にまとめた。必要であれば分ける可能性もある。

相変わらず、mediaファイルは読み込めていません。エラーは下記の質問と同様なものが起きており、参考にしましたが、解決には至っておりません。。S3を導入後css読み込みはされていなかったのですが、なんとか読み込まれるようになりました。しかし、ブラウザによっては反映されないという現象が起きています。例えば、firefoxは問題なし、Edgeはwagtailadmin部分のみ反映されていない、chromeはadminログイン画面のみ反映されていないなどです。ひとまずそのまま進めて、media読み込みを目標とします。

同様の問題

以上が大まかな現状でした。どうぞご協力をお願いいたします。

###開発環境

python==3.7.3
Django==3.2.6
gunicorn==20.1.0
psycopg2==2.9.1
wagtail==2.14
whitenoise==5.3.0 (whitenoiseは状況によって外したりしています。)
DB == postgres
server == Heroku stack-18

###こうなってしまった原因
~~主な原因はSTATIC_URLなどcssやimage周辺の設定が複雑であったため、手当たり次第に打ち込みごちゃごちゃになってしまった点にあると考えています。また以上に関する情報やデプロイに関する情報があふれており、力不足は承知しているものの自分の状況に適した選択をできなかったことが原因であると考えています。少しでも良いので教えていただけるとありがたいです。数日間止まってしまっており、一からそのあたりのことを勉強しなおしたのですが、それでも理解するのが難しかったです。
~~

再度勉強しなおし、理屈はなんとなくですが把握できました。しかし、mediaファイルに関しては設定してもs3上に反映されていないので、しっかり実装されているのかなど不安点はあります。また質問のとおり、様々な問題が複雑に絡み合っている気がしないでもありません。

###なんとなくおもっていること
s3を実装する前はwhitenoiseにより、cssは反映されていました。（imageのみ反映されていない）
また、現在s3にcssなどのファイルはデプロイされているため、s3のファイルたちをどうにかこうにか読み込めれば、反映されるのではないかと考えています。

whitenoiseはs3の実装に伴い、不必要であるという情報を得ましたので、現在基本的に非表示にしています。（collectstaticできなくなるといった問題が生じましたが…）正直、八方塞がりになってしまい、次の一手どうすべきなのかイメージさえもわきません。もしわかる方がいましたら、教えていただきたいです。

###重要コード
おそらく以下の二つが当問題に対して最重要なのではないかと考えています。この設定が正常になれば解決できると思います。

#base.py
PROJECT_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
BASE_DIR = os.path.dirname(PROJECT_DIR)

# aws settings
"""
AWS_ACCESS_KEY_ID = 'AKIAXXXXXXXXXXXXXXX'
AWS_SECRET_ACCESS_KEY = 'XXXXXXXXXXXXXXXXXXXX'
AWS_STORAGE_BUCKET_NAME = 'XXXXXXXXXXXXXXX'
AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME
AWS_DEFAULT_ACL = None
"""

AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
AWS_STORAGE_BUCKET_NAME = os.environ.get('AWS_STORAGE_BUCKET_NAME')
AWS_S3_CUSTOM_DOMAIN = f'XXXXXXXXXXXXX.com.s3.amazonaws.com'
AWS_URL = os.environ.get('AWS_URL')
AWS_DEFAULT_ACL = 'public-read'

# static settings
"""
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = "https://%s/%s/" % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION)
STATICFILES_LOCATIONS = 'static'
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
"""

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = 'https://{ AWS_S3_CUSTOM_DOMAIN }/static/'
STATICFILES_LOCATIONS = 'static'
STATICFILES_STORAGE = 'squjap.settings.backends.StaticStorage'

# media settings
"""
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
"""

MEDIA_URL = 'https://{ AWS_S3_CUSTOM_DOMAIN }/media/'
MEDIAFILES_LOCATIONS = 'media'
DEFAULT_FILE_STORAGE = 'squjap.settings.backends.MediaStorage'

# 変更なし
AWS_S3_OBJECT_PARAMETERS = {'CacheControl': 'max-age=86400'}
STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]

#production.py
from __future__ import absolute_import, unicode_literals
import dj_database_url

import os
from .base import *


SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')

"""
COMPRESS_OFFLINE = True
COMPRESS_CSS_FILTERS = ['compressor.filters.css_default.CssAbsoluteFilter', 'compressor.filters.cssmin.CSSMinFilter',]
COMPRESS_CSS_HASHING_METHOD = 'content'
"""

ALLOWED_HOSTS = ['*']

以上のファイルがwhitenoise実装時、mediaを反映させようとトライしたとき、s3実装時にごちゃごちゃになってしまいました。ルートやURLがどこを示すべきなのか、ストレージもs3なのかwhitenoiseなのかといったように情報が様々あり、どれが適当なものであるのかの判断がつきません。

またある記事では以下のものが必要であると考えたので作成しました。

#backends.py
from storages.backends.s3boto3 import S3Boto3Storage
from django.conf import settings
"""
class MediaStorage(S3Boto3Storage):
    location = 'media'
    file_overwrite = False
"""
class StaticStorage(S3Boto3Storage):
    location = settings.STATICFILES_LOCATIONS
    file_overwrite = False

class MediaStorage(S3Boto3Storage):
    location = settings.MEDIAFILES_LOCATIONS

付け焼き刃であることは否めませんが、何卒宜しくご協力お願い致します。

###追記：わかったこと
自作アプリの部分ではcssやjsのリンクがs3のものではなく、プロジェクトフォルダ内のものにしてしまっていたことが原因であることが判明しました。指定先を変更することでしっかりとstaticが反映されました。
しかし、外部ライブラリであるwagtailなどのcssは変更してもデプロイできないようです。このあたりの指定変更方法などがあれば教えてほしいです。（当然自分でも調べます。）また、mediaについてはまだ何もわかっていません。引き続きよろしくお願いいたします。

###質問したいこと
おそらく結局何が質問したいんだと思われるはずなので、わかるものだけでも構いません。教えていただきたいことを箇条書きしておきます。すべてこちらの質問に絡むものです。

1. mediaファイルはs3上にアップしておく必要があるか
2. whitenoiseとs3の両方を使う必要は本当にないのか？（STATICFILES_STORAGEの同時記載の要不要）
3. コードなどおかしい部分
4. ブラウザによって反映に違いがあることはあるのか
5. mediaを表示させる方法（大雑把ですが、思いつく場合は教えていただけると嬉しいです）

###さいごに
先人の皆様のお力をなんとかお借りしたいです。数日同じエラーに向き合っており、想像力に限界がきつつあります。もちろん今後もしっかりと考えて、トライアンドエラーを繰り返すつもりですがヒントだけでも教えていただけると助かります。どうぞよろしくお願いいたします。

Answer 1

Cacheの問題らしく、再度以下のサイトを参考にやり直してみると正常に稼働しました。
しかし、サイトにはアクセスポリシーについて触れられていませんが当然のことながら自分で設定する必要はあります。

リンク内容