teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問wagtail(Django CMS)アプリをherokuにデプロイ後、読み込みはされるものの画像が反映されない

編集履歴

質問編集履歴

3

書式改善

2021/08/18 01:11

投稿

Kazuhiro-ch
Kazuhiro-ch

スコア85

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- 大きく変更した部分や状況が変わった部分があるため、__以前の文章についてはイタリック体__、**最新のことについては太字**、以前のコードについてはコメントアウトに変更しています。**
5
+ 大きく変更した部分や状況が変わった部分があるため、__以前の文章についてはイタリック体__、**最新のことについては太字**、以前のコードについてはコメントアウトに変更しています。
6
6
 
7
7
 
8
8
 

2

コードの変更、具体的に質問したいことの追記など

2021/08/18 01:11

投稿

Kazuhiro-ch
Kazuhiro-ch

スコア85

test CHANGED
File without changes
test CHANGED
@@ -2,13 +2,27 @@
2
2
 
3
3
 
4
4
 
5
+ 大きく変更した部分や状況が変わった部分があるため、__以前の文章についてはイタリック体__、**最新のことについては太字**、以前のコードについてはコメントアウトに変更しています。**
6
+
7
+
8
+
5
9
  [リンク内容](https://ja.stackoverflow.com/questions/80707/wagtaildjango-cms%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92heroku%e3%81%ab%e3%83%87%e3%83%97%e3%83%ad%e3%82%a4%e5%be%8c-%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf%e3%81%af%e3%81%95%e3%82%8c%e3%82%8b%e3%82%82%e3%81%ae%e3%81%ae%e7%94%bb%e5%83%8f%e3%81%8c%e5%8f%8d%e6%98%a0%e3%81%95%e3%82%8c%e3%81%aa%e3%81%84)
6
10
 
7
11
 
8
12
 
13
+
14
+
9
15
  ###大まかな現状
10
16
 
11
- 様々なサイトなどをみてherokuにデプロイはできたが、mediaである画像ファイルが表示されなかった。（画像タイトルのみ表示されるので読み込まれたことは確認できる。）英語版stackoverflowにて質問したところ、S3を使用するべきだとご指摘いただいたので、実装したところcssも反映されなくなってしまった。なのでまずcssを読み込み、次にmediaを読み込む必要がある。本質問では、static/Mediaの設定でおそらく両方解決できると考えるため、一つの質問にまとめた。必要であれば分ける可能性もある。
17
+ __様々なサイトなどをみてherokuにデプロイはできたが、mediaである画像ファイルが表示されなかった。（画像タイトルのみ表示されるので読み込まれたことは確認できる。）英語版stackoverflowにて質問したところ、S3を使用するべきだとご指摘いただいたので、実装したところcssも反映されなくなってしまった。なのでまずcssを読み込み、次にmediaを読み込む必要がある。本質問では、static/Mediaの設定でおそらく両方解決できると考えるため、一つの質問にまとめた。必要であれば分ける可能性もある。__
18
+
19
+
20
+
21
+ **相変わらず、mediaファイルは読み込めていません。エラーは下記の質問と同様なものが起きており、参考にしましたが、解決には至っておりません。。S3を導入後css読み込みはされていなかったのですが、なんとか読み込まれるようになりました。しかし、ブラウザによっては反映されないという現象が起きています。例えば、firefoxは問題なし、Edgeはwagtailadmin部分のみ反映されていない、chromeはadminログイン画面のみ反映されていないなどです。ひとまずそのまま進めて、media読み込みを目標とします。**
22
+
23
+
24
+
25
+ [同様の問題](https://stackoverflow.com/questions/51920001/amazon-s3-to-store-wagtail-media-files-server-500-error-on-heroku-only)
12
26
 
13
27
 
14
28
 
@@ -30,7 +44,7 @@
30
44
 
31
45
  wagtail==2.14
32
46
 
33
- whitenoise==5.3.0
47
+ whitenoise==5.3.0 **(whitenoiseは状況によって外したりしています。)**
34
48
 
35
49
  DB == postgres
36
50
 
@@ -40,7 +54,13 @@
40
54
 
41
55
  ###こうなってしまった原因
42
56
 
43
- 主な原因はSTATIC_URLなどcssやimage周辺の設定が複雑であったため、手当たり次第に打ち込みごちゃごちゃになってしまった点にあると考えています。また以上に関する情報やデプロイに関する情報があふれており、力不足は承知しているものの自分の状況に適した選択をできなかったことが原因であると考えています。少しでも良いので教えていただけるとありがたいです。数日間止まってしまっており、一からそのあたりのことを勉強しなおしたのですが、それでも理解するのが難しかったです。
57
+ __~~主な原因はSTATIC_URLなどcssやimage周辺の設定が複雑であったため、手当たり次第に打ち込みごちゃごちゃになってしまった点にあると考えています。また以上に関する情報やデプロイに関する情報があふれており、力不足は承知しているものの自分の状況に適した選択をできなかったことが原因であると考えています。少しでも良いので教えていただけるとありがたいです。数日間止まってしまっており、一からそのあたりのことを勉強しなおしたのですが、それでも理解するのが難しかったです。
58
+
59
+ ~~__
60
+
61
+
62
+
63
+ **再度勉強しなおし、理屈はなんとなくですが把握できました。しかし、mediaファイルに関しては設定してもs3上に反映されていないので、しっかり実装されているのかなど不安点はあります。また質問のとおり、様々な問題が複雑に絡み合っている気がしないでもありません。**
44
64
 
45
65
 
46
66
 
@@ -48,7 +68,13 @@
48
68
 
49
69
  s3を実装する前はwhitenoiseにより、cssは反映されていました。（imageのみ反映されていない）
50
70
 
51
- また、現在s3にcssなどのファイルはデプロイされています。であるため、s3のファイルたちをどうにかこうにか読み込めれば、反映されるのではないかと考えています。
71
+ ~~また、現在s3にcssなどのファイルはデプロイされているため、s3のファイルたちをどうにかこうにか読み込めれば、反映されるのではないかと考えています。~~
72
+
73
+
74
+
75
+ **whitenoiseはs3の実装に伴い、不必要であるという情報を得ましたので、現在基本的に非表示にしています。（collectstaticできなくなるといった問題が生じましたが…）正直、八方塞がりになってしまい、次の一手どうすべきなのかイメージさえもわきません。もしわかる方がいましたら、教えていただきたいです。**
76
+
77
+
52
78
 
53
79
 
54
80
 
@@ -68,6 +94,10 @@
68
94
 
69
95
 
70
96
 
97
+ # aws settings
98
+
99
+ """
100
+
71
101
  AWS_ACCESS_KEY_ID = 'AKIAXXXXXXXXXXXXXXX'
72
102
 
73
103
  AWS_SECRET_ACCESS_KEY = 'XXXXXXXXXXXXXXXXXXXX'
@@ -76,17 +106,79 @@
76
106
 
77
107
  AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME
78
108
 
79
- AWS_S3_OBJECT_PARAMETERS = {
80
-
81
- 'CacheControl': 'max-age=86400',
82
-
83
- }
84
-
85
- AWS_LOCATION = 'static'
86
-
87
109
  AWS_DEFAULT_ACL = None
88
110
 
89
-
111
+ """
112
+
113
+
114
+
115
+ AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
116
+
117
+ AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
118
+
119
+ AWS_STORAGE_BUCKET_NAME = os.environ.get('AWS_STORAGE_BUCKET_NAME')
120
+
121
+ AWS_S3_CUSTOM_DOMAIN = f'XXXXXXXXXXXXX.com.s3.amazonaws.com'
122
+
123
+ AWS_URL = os.environ.get('AWS_URL')
124
+
125
+ AWS_DEFAULT_ACL = 'public-read'
126
+
127
+
128
+
129
+ # static settings
130
+
131
+ """
132
+
133
+ STATIC_ROOT = os.path.join(BASE_DIR, 'static')
134
+
135
+ STATIC_URL = "https://%s/%s/" % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION)
136
+
137
+ STATICFILES_LOCATIONS = 'static'
138
+
139
+ STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
140
+
141
+ STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
142
+
143
+ """
144
+
145
+
146
+
147
+ STATIC_ROOT = os.path.join(BASE_DIR, 'static')
148
+
149
+ STATIC_URL = 'https://{ AWS_S3_CUSTOM_DOMAIN }/static/'
150
+
151
+ STATICFILES_LOCATIONS = 'static'
152
+
153
+ STATICFILES_STORAGE = 'squjap.settings.backends.StaticStorage'
154
+
155
+
156
+
157
+ # media settings
158
+
159
+ """
160
+
161
+ MEDIA_URL = '/media/'
162
+
163
+ MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
164
+
165
+ DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
166
+
167
+ """
168
+
169
+
170
+
171
+ MEDIA_URL = 'https://{ AWS_S3_CUSTOM_DOMAIN }/media/'
172
+
173
+ MEDIAFILES_LOCATIONS = 'media'
174
+
175
+ DEFAULT_FILE_STORAGE = 'squjap.settings.backends.MediaStorage'
176
+
177
+
178
+
179
+ # 変更なし
180
+
181
+ AWS_S3_OBJECT_PARAMETERS = {'CacheControl': 'max-age=86400'}
90
182
 
91
183
  STATICFILES_FINDERS = [
92
184
 
@@ -98,26 +190,6 @@
98
190
 
99
191
 
100
192
 
101
- AWS_LOCATION = 'static'
102
-
103
- STATIC_URL = "https://%s/%s/" % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION)
104
-
105
- STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
106
-
107
- STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
108
-
109
-
110
-
111
- MEDIA_URL = '/media/'
112
-
113
- MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
114
-
115
- DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
116
-
117
-
118
-
119
- STATIC_ROOT = os.path.join(BASE_DIR, 'static')
120
-
121
193
  ```
122
194
 
123
195
 
@@ -144,22 +216,16 @@
144
216
 
145
217
 
146
218
 
147
-
219
+ """
148
220
 
149
221
  COMPRESS_OFFLINE = True
150
222
 
151
- COMPRESS_CSS_FILTERS = [
152
-
153
- 'compressor.filters.css_default.CssAbsoluteFilter',
223
+ COMPRESS_CSS_FILTERS = ['compressor.filters.css_default.CssAbsoluteFilter', 'compressor.filters.cssmin.CSSMinFilter',]
154
-
155
- 'compressor.filters.cssmin.CSSMinFilter',
156
-
157
- ]
158
-
159
-
160
224
 
161
225
  COMPRESS_CSS_HASHING_METHOD = 'content'
162
226
 
227
+ """
228
+
163
229
 
164
230
 
165
231
  ALLOWED_HOSTS = ['*']
@@ -168,11 +234,11 @@
168
234
 
169
235
 
170
236
 
171
- 以上のファイルがwhitenoise実装時、mediaを反映させようとトライしたとき、s3実装時にごちゃごちゃになってしまいました。ルートやURLがどこを示すべきなのか、ストレージもs3なのかwhitenoiseなのかといったように情報が様々あり、どれが適当なものであるのかの判断がつきません。
237
+ ~~以上のファイルがwhitenoise実装時、mediaを反映させようとトライしたとき、s3実装時にごちゃごちゃになってしまいました。ルートやURLがどこを示すべきなのか、ストレージもs3なのかwhitenoiseなのかといったように情報が様々あり、どれが適当なものであるのかの判断がつきません。~~
172
-
173
-
174
-
238
+
239
+
240
+
175
- またある記事では以下のものが必要であると考えたので作成しました。
241
+ __またある記事では以下のものが必要であると考えたので作成しました。__
176
242
 
177
243
 
178
244
 
@@ -182,9 +248,9 @@
182
248
 
183
249
  from storages.backends.s3boto3 import S3Boto3Storage
184
250
 
185
-
251
+ from django.conf import settings
252
+
186
-
253
+ """
187
-
188
254
 
189
255
  class MediaStorage(S3Boto3Storage):
190
256
 
@@ -192,16 +258,54 @@
192
258
 
193
259
  file_overwrite = False
194
260
 
261
+ """
262
+
263
+ class StaticStorage(S3Boto3Storage):
264
+
265
+ location = settings.STATICFILES_LOCATIONS
266
+
267
+ file_overwrite = False
268
+
269
+
270
+
271
+ class MediaStorage(S3Boto3Storage):
272
+
273
+ location = settings.MEDIAFILES_LOCATIONS
274
+
195
275
  ```
196
276
 
197
277
 
198
278
 
199
- 付け焼き刃であることは否めませんが、何卒宜しくご協力お願い致します。
279
+ __~~付け焼き刃であることは否めませんが、何卒宜しくご協力お願い致します。~~__
200
280
 
201
281
 
202
282
 
203
283
  ###追記：わかったこと
204
284
 
205
- 自作アプリの部分ではcssやjsのリンクがs3のものではなく、プロジェクトフォルダ内のものにしてしまっていたことが原因であることが判明しました。指定先を変更することでしっかりとstaticが反映されました。
285
+ __自作アプリの部分ではcssやjsのリンクがs3のものではなく、プロジェクトフォルダ内のものにしてしまっていたことが原因であることが判明しました。指定先を変更することでしっかりとstaticが反映されました。
206
-
286
+
207
- しかし、外部ライブラリであるwagtailなどのcssは変更してもデプロイできないようです。このあたりの指定変更方法などがあれば教えてほしいです。（当然自分でも調べます。）また、mediaについてはまだ何もわかっていません。引き続きよろしくお願いいたします。
287
+ しかし、外部ライブラリであるwagtailなどのcssは変更してもデプロイできないようです。このあたりの指定変更方法などがあれば教えてほしいです。（当然自分でも調べます。）また、mediaについてはまだ何もわかっていません。引き続きよろしくお願いいたします。__
288
+
289
+
290
+
291
+ ###質問したいこと
292
+
293
+ **おそらく結局何が質問したいんだと思われるはずなので、わかるものだけでも構いません。教えていただきたいことを箇条書きしておきます。すべてこちらの質問に絡むものです。**
294
+
295
+
296
+
297
+ 0. mediaファイルはs3上にアップしておく必要があるか
298
+
299
+ 0. whitenoiseとs3の両方を使う必要は本当にないのか？（STATICFILES_STORAGEの同時記載の要不要）
300
+
301
+ 0. コードなどおかしい部分
302
+
303
+ 0. ブラウザによって反映に違いがあることはあるのか
304
+
305
+ 0. mediaを表示させる方法（大雑把ですが、思いつく場合は教えていただけると嬉しいです）
306
+
307
+
308
+
309
+ ###さいごに
310
+
311
+ **先人の皆様のお力をなんとかお借りしたいです。数日同じエラーに向き合っており、想像力に限界がきつつあります。もちろん今後もしっかりと考えて、トライアンドエラーを繰り返すつもりですがヒントだけでも教えていただけると助かります。どうぞよろしくお願いいたします。**

1

わかったこと

2021/08/15 07:10

投稿

Kazuhiro-ch
Kazuhiro-ch

スコア85

test CHANGED
File without changes
test CHANGED
@@ -197,3 +197,11 @@
197
197
 
198
198
 
199
199
  付け焼き刃であることは否めませんが、何卒宜しくご協力お願い致します。
200
+
201
+
202
+
203
+ ###追記：わかったこと
204
+
205
+ 自作アプリの部分ではcssやjsのリンクがs3のものではなく、プロジェクトフォルダ内のものにしてしまっていたことが原因であることが判明しました。指定先を変更することでしっかりとstaticが反映されました。
206
+
207
+ しかし、外部ライブラリであるwagtailなどのcssは変更してもデプロイできないようです。このあたりの指定変更方法などがあれば教えてほしいです。（当然自分でも調べます。）また、mediaについてはまだ何もわかっていません。引き続きよろしくお願いいたします。