Django(Wagtail)のStaticファイルをMinIOに格納したものの、表示できない

Question

前提・実現したいこと

Wagtail（Django）の静的ファイルをAmazon S3互換のオブジェクトストレージ、MinIOに格納しようとしています。

python manage.py collectstatic で静的ファイルをMinIOに格納したあと、Djangoをpython manage.py runserverで立ち上げた際に静的ファイルが表示されません。

発生している問題・エラーメッセージ

ブラウザのコンソールを見ると、返ってきた静的ファイルのMIME typeがtext/htmlであると表示されています。

ブラウザのエラーメッセージその1

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:9090/minio/wagtail/wagtail/css/huidetang.css".

ブラウザのエラーメッセージその2

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost:9090/minio/wagtail/wagtail/css/huidetang.css with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

CSSのURLに直リンクで飛ぶとMinIOのHTMLインターフェイスが表示されています。

該当のソースコード

リポジトリはhuideyeren/huidetangにあります。

localhost.py（抜粋）

if "AWS_STORAGE_BUCKET_NAME" in os.environ:
    # Add django-storages to the installed apps
    INSTALLED_APPS = INSTALLED_APPS + [
        "storages",
        "wagtail_storages",
    ]

    # https://docs.djangoproject.com/en/stable/ref/settings/#default-file-storage
    DEFAULT_FILE_STORAGE = "storages.backends.s3boto3.S3Boto3Storage"

    AWS_STORAGE_BUCKET_NAME = os.environ["AWS_STORAGE_BUCKET_NAME"]

    # Disables signing of the S3 objects' URLs. When set to True it
    # will append authorization querystring to each URL.
    AWS_QUERYSTRING_AUTH = False

    # Do not allow overriding files on S3 as per Wagtail docs recommendation:
    # https://docs.wagtail.io/en/stable/advanced_topics/deploying.html#cloud-storage
    # Not having this setting may have consequences such as losing files.
    AWS_S3_FILE_OVERWRITE = False

    # Default ACL for new files should be "private" - not accessible to the
    # public. Images should be made available to public via the bucket policy,
    # where the documents should use wagtail-storages.
    AWS_DEFAULT_ACL = "private"

    # We generally use this setting in production to put the S3 bucket
    # behind a CDN using a custom domain, e.g. media.llamasavers.com.
    # https://django-storages.readthedocs.io/en/latest/backends/amazon-S3.html#cloudfront
    if "AWS_S3_CUSTOM_DOMAIN" in os.environ:
        AWS_S3_CUSTOM_DOMAIN = os.environ["AWS_S3_CUSTOM_DOMAIN"]

    # When signing URLs is enabled, the region must be set.
    # The global S3 endpoint does not seem to support signed URLS.
    # Set this only if you will be using signed URLs.
    if "AWS_S3_REGION_NAME" in os.environ:
        AWS_S3_REGION_NAME = os.environ["AWS_S3_REGION_NAME"]

    # This settings lets you force using http or https protocol when generating
    # the URLs to the files. Set https as default.
    # https://github.com/jschneier/django-storages/blob/10d1929de5e0318dbd63d715db4bebc9a42257b5/storages/backends/s3boto3.py#L217
    AWS_S3_URL_PROTOCOL = os.environ.get("AWS_S3_URL_PROTOCOL", "https:")

    AWS_S3_ENDPOINT_URL = os.environ["AWS_S3_ENDPOINT_URL"]

    AWS_LOCATION = "wagtail"

    AWS_S3_USE_SSL = False
    AWS_S3_SECURE_URLS = False

    STATICFILES_STORAGE = "storages.backends.s3boto3.S3StaticStorage"
    STATIC_URL = "http://localhost:9090/minio/wagtail/%s/" % (AWS_LOCATION)

docker-compose.yml

version: '3.7'
services:
  nginx:
    image: nginx:latest
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
    ports:
      - 80:80
    depends_on:
      - backend
      - frontend
  postgres:
    image: postgres:12
    restart: always
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: password
    ports:
      - '5432:5432'
    volumes:
      - db-data:/var/lib/postgresql/data:cached
  backend:
    build:
      context: backend
      dockerfile: Dockerfile
    volumes:
      - ./backend:/app/:cached
    environment:
      PYTHONPATH: .
      DATABASE_URL: 'postgresql://postgres:password@postgres:5432/postgres'
      AWS_S3_CUSTOM_DOMAIN: 'localhost:9090/minio/wagtail'
      AWS_S3_ENDPOINT_URL: 'http://minio:9000/'
      AWS_STORAGE_BUCKET_NAME: 'wagtail'
      AWS_ACCESS_KEY_ID: 'huidetang'
      AWS_S3_REGION_NAME: 'us-east-1'
      AWS_SECRET_ACCESS_KEY: 'jsYIDsqqIt9JShu'
      AWS_S3_URL_PROTOCOL: 'http:'
    depends_on:
      - "postgres"
      - "minio"
  frontend:
    build:
      context: frontend
      dockerfile: Dockerfile
    stdin_open: true
    volumes:
      - './frontend:/app:cached'
      - './frontend/node_modules:/app/node_modules:cached'
    environment:
      - NODE_ENV=development
  minio:
    image: minio/minio:latest
    ports:
      - 9090:9000
    volumes:
      - ./minio/data:/data
      - ./minio/export:/export
      - ./minio/config:/root/.minio
      - ./minio/policies:/policies
    environment:
      MINIO_ACCESS_KEY: 'huidetang'
      MINIO_SECRET_KEY: 'jsYIDsqqIt9JShu'
    entrypoint:
      - /bin/sh
      - -c
    command:
      - "mkdir -p /data/.minio.sys/buckets; cp -r /policies/* /data/.minio.sys/; cp -r /export/* /data/; /usr/bin/minio server /data"
  createbuckets:
    image: minio/mc
    depends_on:
      - minio
    entrypoint: >
      /bin/sh -c "
      until (/usr/bin/mc config host add wagtail http://minio:9000 huidetang jsYIDsqqIt9JShu) do echo '...waiting...' && sleep 1; done;
      /usr/bin/mc mb wagtail/wagtail;
      /usr/bin/mc admin user add wagtail wagtail jsYIDsqqIt9JShu;
      exit 0;
      "
volumes:
  db-data:

policy.json（MinIO）

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowUserManageBucket",
      "Effect": "Allow",
      "Principal": "*",
      "Action": [
        "s3:ListBucket",
        "s3:GetBucketLocation",
        "s3:ListBucketMultipartUploads",
        "s3:ListBucketVersions"
      ],
      "Resource": "arn:aws:s3:::wagtail"
    },
    {
      "Sid": "AllowUserManageBucketObjects",
      "Effect": "Allow",
      "Principal": "*",
      "Action": [
        "s3:GetObject",
        "s3:PutObject",
        "s3:DeleteObject"
      ],
      "Resource": "arn:aws:s3:::wagtail/*"
    }
  ]
}

試したこと

静的ファイルの設定は最初以下のようにしていました。

STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

補足情報（FW/ツールのバージョンなど）

Docker ComposeとVS CodeのdevContainerで動かしています。

Answer 1

自己解決しました。

docker-compose.ymlで指定したAWS_S3_CUSTOM_DOMAINが違っていたのが原因です。

AWS_S3_CUSTOM_DOMAIN: 'localhost:9090/minio/wagtail'の場合、MinIOのウェブインターフェースにアクセスしてしまいます。

この設定を以下のように書き換えることで動作しました。
AWS_S3_CUSTOM_DOMAIN: 'localhost:9090/wagtail'