teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

書式改善

2021/08/18 01:11

投稿

Kazuhiro-ch
Kazuhiro-ch

スコア85

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,6 @@
1
1
  いまだ問題解決にいたっておらず情報源を増やすため、下記サイトからこちらにマルチポストしました。変更などがあった際には双方にて追記していきます。
2
2
 
3
- 大きく変更した部分や状況が変わった部分があるため、__以前の文章についてはイタリック体__、**最新のことについては太字**、以前のコードについてはコメントアウトに変更しています。**
3
+ 大きく変更した部分や状況が変わった部分があるため、__以前の文章についてはイタリック体__、**最新のことについては太字**、以前のコードについてはコメントアウトに変更しています。
4
4
 
5
5
  [リンク内容](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
6
 

2

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

2021/08/18 01:11

投稿

Kazuhiro-ch
Kazuhiro-ch

スコア85

title CHANGED
File without changes
body CHANGED
@@ -1,10 +1,17 @@
1
1
  いまだ問題解決にいたっておらず情報源を増やすため、下記サイトからこちらにマルチポストしました。変更などがあった際には双方にて追記していきます。
2
2
 
3
+ 大きく変更した部分や状況が変わった部分があるため、__以前の文章についてはイタリック体__、**最新のことについては太字**、以前のコードについてはコメントアウトに変更しています。**
4
+
3
5
  [リンク内容](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)
4
6
 
7
+
5
8
  ###大まかな現状
6
- 様々なサイトなどをみてherokuにデプロイはできたが、mediaである画像ファイルが表示されなかった。(画像タイトルのみ表示されるので読み込まれたことは確認できる。)英語版stackoverflowにて質問したところ、S3を使用するべきだとご指摘いただいたので、実装したところcssも反映されなくなってしまった。なのでまずcssを読み込み、次にmediaを読み込む必要がある。本質問では、static/Mediaの設定でおそらく両方解決できると考えるため、一つの質問にまとめた。必要であれば分ける可能性もある。
9
+ __様々なサイトなどをみてherokuにデプロイはできたが、mediaである画像ファイルが表示されなかった。(画像タイトルのみ表示されるので読み込まれたことは確認できる。)英語版stackoverflowにて質問したところ、S3を使用するべきだとご指摘いただいたので、実装したところcssも反映されなくなってしまった。なのでまずcssを読み込み、次にmediaを読み込む必要がある。本質問では、static/Mediaの設定でおそらく両方解決できると考えるため、一つの質問にまとめた。必要であれば分ける可能性もある。__
7
10
 
11
+ **相変わらず、mediaファイルは読み込めていません。エラーは下記の質問と同様なものが起きており、参考にしましたが、解決には至っておりません。。S3を導入後css読み込みはされていなかったのですが、なんとか読み込まれるようになりました。しかし、ブラウザによっては反映されないという現象が起きています。例えば、firefoxは問題なし、Edgeはwagtailadmin部分のみ反映されていない、chromeはadminログイン画面のみ反映されていないなどです。ひとまずそのまま進めて、media読み込みを目標とします。**
12
+
13
+ [同様の問題](https://stackoverflow.com/questions/51920001/amazon-s3-to-store-wagtail-media-files-server-500-error-on-heroku-only)
14
+
8
15
  以上が大まかな現状でした。どうぞご協力をお願いいたします。
9
16
 
10
17
  ###開発環境
@@ -14,17 +21,23 @@
14
21
  gunicorn==20.1.0
15
22
  psycopg2==2.9.1
16
23
  wagtail==2.14
17
- whitenoise==5.3.0
24
+ whitenoise==5.3.0 **(whitenoiseは状況によって外したりしています。)**
18
25
  DB == postgres
19
26
  server == Heroku stack-18
20
27
 
21
28
  ###こうなってしまった原因
22
- 主な原因はSTATIC_URLなどcssやimage周辺の設定が複雑であったため、手当たり次第に打ち込みごちゃごちゃになってしまった点にあると考えています。また以上に関する情報やデプロイに関する情報があふれており、力不足は承知しているものの自分の状況に適した選択をできなかったことが原因であると考えています。少しでも良いので教えていただけるとありがたいです。数日間止まってしまっており、一からそのあたりのことを勉強しなおしたのですが、それでも理解するのが難しかったです。
29
+ __~~主な原因はSTATIC_URLなどcssやimage周辺の設定が複雑であったため、手当たり次第に打ち込みごちゃごちゃになってしまった点にあると考えています。また以上に関する情報やデプロイに関する情報があふれており、力不足は承知しているものの自分の状況に適した選択をできなかったことが原因であると考えています。少しでも良いので教えていただけるとありがたいです。数日間止まってしまっており、一からそのあたりのことを勉強しなおしたのですが、それでも理解するのが難しかったです。
30
+ ~~__
23
31
 
32
+ **再度勉強しなおし、理屈はなんとなくですが把握できました。しかし、mediaファイルに関しては設定してもs3上に反映されていないので、しっかり実装されているのかなど不安点はあります。また質問のとおり、様々な問題が複雑に絡み合っている気がしないでもありません。**
33
+
24
34
  ###なんとなくおもっていること
25
35
  s3を実装する前はwhitenoiseにより、cssは反映されていました。(imageのみ反映されていない)
26
- また、現在s3にcssなどのファイルはデプロイされています。であるため、s3のファイルたちをどうにかこうにか読み込めれば、反映されるのではないかと考えています。
36
+ ~~また、現在s3にcssなどのファイルはデプロイされているため、s3のファイルたちをどうにかこうにか読み込めれば、反映されるのではないかと考えています。~~
27
37
 
38
+ **whitenoiseはs3の実装に伴い、不必要であるという情報を得ましたので、現在基本的に非表示にしています。(collectstaticできなくなるといった問題が生じましたが…)正直、八方塞がりになってしまい、次の一手どうすべきなのかイメージさえもわきません。もしわかる方がいましたら、教えていただきたいです。**
39
+
40
+
28
41
  ###重要コード
29
42
  おそらく以下の二つが当問題に対して最重要なのではないかと考えています。この設定が正常になれば解決できると思います。
30
43
 
@@ -33,31 +46,54 @@
33
46
  PROJECT_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
34
47
  BASE_DIR = os.path.dirname(PROJECT_DIR)
35
48
 
49
+ # aws settings
50
+ """
36
51
  AWS_ACCESS_KEY_ID = 'AKIAXXXXXXXXXXXXXXX'
37
52
  AWS_SECRET_ACCESS_KEY = 'XXXXXXXXXXXXXXXXXXXX'
38
53
  AWS_STORAGE_BUCKET_NAME = 'XXXXXXXXXXXXXXX'
39
54
  AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME
40
- AWS_S3_OBJECT_PARAMETERS = {
41
- 'CacheControl': 'max-age=86400',
42
- }
43
- AWS_LOCATION = 'static'
44
55
  AWS_DEFAULT_ACL = None
56
+ """
45
57
 
46
- STATICFILES_FINDERS = [
47
- 'django.contrib.staticfiles.finders.FileSystemFinder',
58
+ AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
48
- 'django.contrib.staticfiles.finders.AppDirectoriesFinder',
59
+ AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
60
+ AWS_STORAGE_BUCKET_NAME = os.environ.get('AWS_STORAGE_BUCKET_NAME')
61
+ AWS_S3_CUSTOM_DOMAIN = f'XXXXXXXXXXXXX.com.s3.amazonaws.com'
62
+ AWS_URL = os.environ.get('AWS_URL')
49
- ]
63
+ AWS_DEFAULT_ACL = 'public-read'
50
64
 
65
+ # static settings
66
+ """
51
- AWS_LOCATION = 'static'
67
+ STATIC_ROOT = os.path.join(BASE_DIR, 'static')
52
68
  STATIC_URL = "https://%s/%s/" % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION)
69
+ STATICFILES_LOCATIONS = 'static'
53
70
  STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
54
71
  STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
72
+ """
55
73
 
74
+ STATIC_ROOT = os.path.join(BASE_DIR, 'static')
75
+ STATIC_URL = 'https://{ AWS_S3_CUSTOM_DOMAIN }/static/'
76
+ STATICFILES_LOCATIONS = 'static'
77
+ STATICFILES_STORAGE = 'squjap.settings.backends.StaticStorage'
78
+
79
+ # media settings
80
+ """
56
81
  MEDIA_URL = '/media/'
57
82
  MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
58
83
  DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
84
+ """
59
85
 
86
+ MEDIA_URL = 'https://{ AWS_S3_CUSTOM_DOMAIN }/media/'
87
+ MEDIAFILES_LOCATIONS = 'media'
88
+ DEFAULT_FILE_STORAGE = 'squjap.settings.backends.MediaStorage'
89
+
90
+ # 変更なし
60
- STATIC_ROOT = os.path.join(BASE_DIR, 'static')
91
+ AWS_S3_OBJECT_PARAMETERS = {'CacheControl': 'max-age=86400'}
92
+ STATICFILES_FINDERS = [
93
+ 'django.contrib.staticfiles.finders.FileSystemFinder',
94
+ 'django.contrib.staticfiles.finders.AppDirectoriesFinder',
95
+ ]
96
+
61
97
  ```
62
98
 
63
99
  ```python
@@ -71,34 +107,50 @@
71
107
 
72
108
  SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
73
109
 
74
-
110
+ """
75
111
  COMPRESS_OFFLINE = True
76
- COMPRESS_CSS_FILTERS = [
77
- 'compressor.filters.css_default.CssAbsoluteFilter',
112
+ COMPRESS_CSS_FILTERS = ['compressor.filters.css_default.CssAbsoluteFilter', 'compressor.filters.cssmin.CSSMinFilter',]
78
- 'compressor.filters.cssmin.CSSMinFilter',
79
- ]
80
-
81
113
  COMPRESS_CSS_HASHING_METHOD = 'content'
114
+ """
82
115
 
83
116
  ALLOWED_HOSTS = ['*']
84
117
  ```
85
118
 
86
- 以上のファイルがwhitenoise実装時、mediaを反映させようとトライしたとき、s3実装時にごちゃごちゃになってしまいました。ルートやURLがどこを示すべきなのか、ストレージもs3なのかwhitenoiseなのかといったように情報が様々あり、どれが適当なものであるのかの判断がつきません。
119
+ ~~以上のファイルがwhitenoise実装時、mediaを反映させようとトライしたとき、s3実装時にごちゃごちゃになってしまいました。ルートやURLがどこを示すべきなのか、ストレージもs3なのかwhitenoiseなのかといったように情報が様々あり、どれが適当なものであるのかの判断がつきません。~~
87
120
 
88
- またある記事では以下のものが必要であると考えたので作成しました。
121
+ __またある記事では以下のものが必要であると考えたので作成しました。__
89
122
 
90
123
  ```python
91
124
  #backends.py
92
125
  from storages.backends.s3boto3 import S3Boto3Storage
93
-
126
+ from django.conf import settings
94
-
127
+ """
95
128
  class MediaStorage(S3Boto3Storage):
96
129
  location = 'media'
97
130
  file_overwrite = False
131
+ """
132
+ class StaticStorage(S3Boto3Storage):
133
+ location = settings.STATICFILES_LOCATIONS
134
+ file_overwrite = False
135
+
136
+ class MediaStorage(S3Boto3Storage):
137
+ location = settings.MEDIAFILES_LOCATIONS
98
138
  ```
99
139
 
100
- 付け焼き刃であることは否めませんが、何卒宜しくご協力お願い致します。
140
+ __~~付け焼き刃であることは否めませんが、何卒宜しくご協力お願い致します。~~__
101
141
 
102
142
  ###追記:わかったこと
103
- 自作アプリの部分ではcssやjsのリンクがs3のものではなく、プロジェクトフォルダ内のものにしてしまっていたことが原因であることが判明しました。指定先を変更することでしっかりとstaticが反映されました。
143
+ __自作アプリの部分ではcssやjsのリンクがs3のものではなく、プロジェクトフォルダ内のものにしてしまっていたことが原因であることが判明しました。指定先を変更することでしっかりとstaticが反映されました。
104
- しかし、外部ライブラリであるwagtailなどのcssは変更してもデプロイできないようです。このあたりの指定変更方法などがあれば教えてほしいです。(当然自分でも調べます。)また、mediaについてはまだ何もわかっていません。引き続きよろしくお願いいたします。
144
+ しかし、外部ライブラリであるwagtailなどのcssは変更してもデプロイできないようです。このあたりの指定変更方法などがあれば教えてほしいです。(当然自分でも調べます。)また、mediaについてはまだ何もわかっていません。引き続きよろしくお願いいたします。__
145
+
146
+ ###質問したいこと
147
+ **おそらく結局何が質問したいんだと思われるはずなので、わかるものだけでも構いません。教えていただきたいことを箇条書きしておきます。すべてこちらの質問に絡むものです。**
148
+
149
+ 0. mediaファイルはs3上にアップしておく必要があるか
150
+ 0. whitenoiseとs3の両方を使う必要は本当にないのか?(STATICFILES_STORAGEの同時記載の要不要)
151
+ 0. コードなどおかしい部分
152
+ 0. ブラウザによって反映に違いがあることはあるのか
153
+ 0. mediaを表示させる方法(大雑把ですが、思いつく場合は教えていただけると嬉しいです)
154
+
155
+ ###さいごに
156
+ **先人の皆様のお力をなんとかお借りしたいです。数日同じエラーに向き合っており、想像力に限界がきつつあります。もちろん今後もしっかりと考えて、トライアンドエラーを繰り返すつもりですがヒントだけでも教えていただけると助かります。どうぞよろしくお願いいたします。**

1

わかったこと

2021/08/15 07:10

投稿

Kazuhiro-ch
Kazuhiro-ch

スコア85

title CHANGED
File without changes
body CHANGED
@@ -97,4 +97,8 @@
97
97
  file_overwrite = False
98
98
  ```
99
99
 
100
- 付け焼き刃であることは否めませんが、何卒宜しくご協力お願い致します。
100
+ 付け焼き刃であることは否めませんが、何卒宜しくご協力お願い致します。
101
+
102
+ ###追記:わかったこと
103
+ 自作アプリの部分ではcssやjsのリンクがs3のものではなく、プロジェクトフォルダ内のものにしてしまっていたことが原因であることが判明しました。指定先を変更することでしっかりとstaticが反映されました。
104
+ しかし、外部ライブラリであるwagtailなどのcssは変更してもデプロイできないようです。このあたりの指定変更方法などがあれば教えてほしいです。(当然自分でも調べます。)また、mediaについてはまだ何もわかっていません。引き続きよろしくお願いいたします。