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

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

ただいまの
回答率

87.49%

AWSのS3にデプロイしたmediaファイルとstaticファイルが読み込めなくなってしまいました。【Django】

解決済

回答 1

投稿 編集

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

score 31

前提・実現したいこと

結論:AWSのS3にデプロイしたmediaファイルとstaticファイルをdjangoで読み込ませ、サイトに画像の表示、css制御させたいです。

現在Djangoを使ってwebサイトを開発しております。
プロジェクト直下にあるmediaファイルとstaticファイルをAWSのs3にデプロイしました。
すると今までは問題なく読み込んでいた上記2つのファイルを読み込まなくなってしまい、
cssが効かなくなり、画像が表示されなくなってしまいました。

発生している問題

mediaファイルとstaticファイルをAWSのS3にデプロイした事で
画像が読み込めなくなり、css制御できなくなりました。

該当のソースコード

#プロジェクト/setting.py

DEBUG = False

ALLOWED_HOSTS = ['*']


# Application definition

INSTALLED_APPS = [
  #省略
    'storages',  #aws s3
]


STATIC_URL = '/static/'
STATICFILES_DIRS = (
    [
        os.path.join(BASE_DIR, "static"),
    ]
)


LOGIN_URL = 'register:login'
LOGIN_REDIRECT_URL = 'register:top'
LOGOUT_REDIRECT_URL = 'register:top'

EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'


#aws-s3設定郡
AWS_ACCESS_KEY_ID = 'hogehoge'
AWS_SECRET_ACCESS_KEY = 'hogehoge'
AWS_STORAGE_BUCKET_NAME = 'hogehoge'
AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME
AWS_S3_OBJECT_PARAMETERS = {
    'CacheControl': 'max-age=86400',
}
AWS_LOCATION = 'static'
AWS_DEFAULT_ACL = None
STATIC_URL = 'https://%s/%s/' % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION)
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'


MEDIA_URL = "https://%s/" % AWS_S3_CUSTOM_DOMAIN
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

DEFAULT_FILE_STORAGE = 'mysite.storage_backends.MediaStorage'
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
#プロジェクト/storage_backends.py

from storages.backends.s3boto3 import S3Boto3Storage

# 画像は同ファイル名での上書きを許さない
class MediaStorage(S3Boto3Storage):
    location = 'media'
    file_overwrite = False
<div class="text-center">
<img class="detail_top_image mt-3" src="{{ user.top_image.url }}">#ここで画像を表示させていました。
<div class="detail_name"><h4>{{ user.nick_name }}</h4></div>
<div class="detail_name"><h6>{{ user.last_name }} {{ user.first_name }}</h6></div>
</div>

試したこと

setting.pyに
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
の追加やバケットの見直し
その他、サイトを観てファイルの書き換えなど

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

djangoのバージョンは2.2です。
サイト上から画像をアップロードする事は可能です。

下記の質問を元にstaticに関する問題は解決されました。
https://teratail.com/questions/287384

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

check解決した方法

0

#setting.py

#aws-s3設定郡
AWS_ACCESS_KEY_ID = 'AKIARDZQVJXGT54HZZ5W'
AWS_SECRET_ACCESS_KEY = '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'
AWS_STORAGE_BUCKET_NAME = 'django-for-s3'
AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME
AWS_S3_OBJECT_PARAMETERS = {
    'CacheControl': 'max-age=86400',
}
AWS_LOCATION = 'static'
AWS_DEFAULT_ACL = None
STATIC_URL = 'https://%s/%s/' % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION)
STATICFILES_DIRS = (
    [
        os.path.join(BASE_DIR, "static"),
    ]
)
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'


MEDIA_URL = "https://%s/" % AWS_S3_CUSTOM_DOMAIN
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

おそらくだが、MEDIA_URLやSTATIC_URLが初期に記述したものを消し忘れていたため、
うまく読み込まれなかったのかと…
とりあえず、この質問の回答の様に設定を行い
setting,pyの重複しているコードを削除する事で無事に画像の読み込みとcssの読み込みができるようになりました。
ただ、画像のソースコードが長くなるのと、cssをコンソール上で編集してもわざわざアップロードしなきゃなのが大変ですね。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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