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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

Q&A

解決済

1回答

2584閲覧

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

nre

総合スコア35

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

0グッド

0クリップ

投稿2020/10/13 03:44

編集2020/10/13 04:13

前提・実現したいこと

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

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

発生している問題

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

該当のソースコード

django

1#プロジェクト/setting.py 2 3DEBUG = False 4 5ALLOWED_HOSTS = ['*'] 6 7 8# Application definition 9 10INSTALLED_APPS = [ 11  #省略 12 'storages', #aws s3 13] 14 15 16STATIC_URL = '/static/' 17STATICFILES_DIRS = ( 18 [ 19 os.path.join(BASE_DIR, "static"), 20 ] 21) 22 23 24LOGIN_URL = 'register:login' 25LOGIN_REDIRECT_URL = 'register:top' 26LOGOUT_REDIRECT_URL = 'register:top' 27 28EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' 29 30MEDIA_ROOT = os.path.join(BASE_DIR, 'media') 31MEDIA_URL = '/media/' 32 33 34#aws-s3設定郡 35AWS_ACCESS_KEY_ID = 'hogehoge' 36AWS_SECRET_ACCESS_KEY = 'hogehoge' 37AWS_STORAGE_BUCKET_NAME = 'hogehoge' 38AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME 39AWS_S3_OBJECT_PARAMETERS = { 40 'CacheControl': 'max-age=86400', 41} 42AWS_LOCATION = 'static' 43AWS_DEFAULT_ACL = None 44STATIC_URL = 'https://%s/%s/' % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION) 45STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage' 46 47 48MEDIA_URL = "https://%s/" % AWS_S3_CUSTOM_DOMAIN 49MEDIA_ROOT = os.path.join(BASE_DIR, 'media') 50 51DEFAULT_FILE_STORAGE = 'mysite.storage_backends.MediaStorage' 52DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage' 53STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage' 54

django

1#プロジェクト/storage_backends.py 2 3from storages.backends.s3boto3 import S3Boto3Storage 4 5# 画像は同ファイル名での上書きを許さない 6class MediaStorage(S3Boto3Storage): 7 location = 'media' 8 file_overwrite = False 9

html

1 2<div class="text-center"> 3<img class="detail_top_image mt-3" src="{{ user.top_image.url }}">#ここで画像を表示させていました。 4<div class="detail_name"><h4>{{ user.nick_name }}</h4></div> 5<div class="detail_name"><h6>{{ user.last_name }} {{ user.first_name }}</h6></div> 6</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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

django

1#setting.py 2 3#aws-s3設定郡 4AWS_ACCESS_KEY_ID = 'AKIARDZQVJXGT54HZZ5W' 5AWS_SECRET_ACCESS_KEY = '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' 6AWS_STORAGE_BUCKET_NAME = 'django-for-s3' 7AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME 8AWS_S3_OBJECT_PARAMETERS = { 9 'CacheControl': 'max-age=86400', 10} 11AWS_LOCATION = 'static' 12AWS_DEFAULT_ACL = None 13STATIC_URL = 'https://%s/%s/' % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION) 14STATICFILES_DIRS = ( 15 [ 16 os.path.join(BASE_DIR, "static"), 17 ] 18) 19STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage' 20 21 22MEDIA_URL = "https://%s/" % AWS_S3_CUSTOM_DOMAIN 23MEDIA_ROOT = os.path.join(BASE_DIR, 'media') 24DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage' 25

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

投稿2020/10/13 05:19

nre

総合スコア35

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問