質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.36%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 263

score 5

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

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

リンク内容

大まかな現状

様々なサイトなどをみて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を表示させる方法(大雑把ですが、思いつく場合は教えていただけると嬉しいです)

さいごに

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

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

リンク内容

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る