Djangoで作成したアプリの静的ファイルをAWSのCloudFrontを使って配信したい

前提・実現したいこと

Djangoで作成したアプリの静的ファイルをAWSのCloudFrontから配信したいのですが、上手くいきません。

現状

django-storages, boto3を使用してS3からdjangoアプリの静的ファイルを配信する事は問題なく出来ています。
また、CloudFrontのディストリビューションも問題なく作成出来ています。

発生している問題・エラーメッセージ

CloudFrontから配信してほしい静的ファイルが配信されません。S3からそのまま配信されてしまいます。

該当のソースコード

djangoのsettings.pyファイル

python
1# AWS設定
2AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
3AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
4
5# スタティックファイル(S3)の設定
6STATIC_URL = '/static/'
7STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
8STATICFILES_STORAGE = 'storages.backends.s3boto.S3BotoStorage'
9AWS_STORAGE_BUCKET_NAME = 'hogehoge-fuga'
10AWS_DEFAULT_ACL = None

CloudFrontの設定

S3のバケットポリシーの設定

該当のバケットには何も書かれていませんでした。

SSL証明書

us-east-1なのでバージニア北部で取得出来ていると思います。

補足情報

おそらくsettings.pyに何か設定が必要なのではと思うのですが、よくわかりませんでした。
かなり初歩的なところでつまづいている気がします。ご教示いただけたら幸いです。

※追記
1)CloudFrontでは自ドメインから配信したいので、そのための設定(CNames)をCloudFrontとroute53でしてあります。
2)CloudFrontのSSL証明書はCertificate Managerを使って取得しております。

yu_1985

2019/12/02 03:36

CloudFrontの設定とバケットポリシーはどうなっていますか？

yasuhiro_tera

2019/12/02 07:00

ご質問ありがとうございます。追記しました。どうぞよろしくお願います。

nurari

2019/12/05 14:42

> CloudFrontから配信してほしい静的ファイルが配信されません。S3からそのまま配信されてしまいます。これは何を見てそう判断されましたか？また、Django生成されたページ内の静的ファイルのURLは***.tokyoのドメインでしょうか？

yasuhiro_tera

2019/12/05 17:35 編集

nurariさん > ご質問ありがとうございます。単純にデプロイされたサービスの静的ファイルから配信される画像を新しいタブで開いてみて、その画像のURLが以下のようにS3のものになっていたことから判断しました。 <バケット名.s3.amazonaws.com/ディレクトリ名/hoge.jp> また、Chromeのデベロッパーツールで検証ボタンからCSSの配信元を見てみても以下のようにS3からになっていました。 <link href="https://バケット名.s3.amazonaws.com:443/css/style.css> > また、Django生成されたページ内の静的ファイルのURLは***.tokyoのドメインでしょうか？上記の通りURLに含まれているのはバケット名であり、上記のドメインの***の部分はありません。また、上に掲示したCloudFrontの設定の画像の1枚目にあります黒塗りになっている「Alternate Domain Names (CNAMEs)」では、通常のドメインと区別出来るように、サブドメインとして頭に「static」を付けてstatic.domain名.tokyoとしておりますが、ここで付けたドメイン名が静的ファイルのURLに含まれていないのもそう判断したポイントの一つです。

行動規範の内容に同意します

回答2件

その画像のURLが以下のようにS3のものになっていたことから判断しました。

<バケット名.s3.amazonaws.com/ディレクトリ名/hoge.jp>

ご確認ありがとうございます。
S3へのリンクが生成されているということでDjango側の設定の問題っぽいですね。

settings.pyに下記の内容を追記するといかがでしょうか？

AWS_S3_ENDPOINT_URL = "https://static.***.tokyo/"
AWS_S3_REGION_NAME = "<バケットを作成したリージョン>"

https://django-storages.readthedocs.io/en/latest/backends/amazon-S3.html

AWS_S3_ENDPOINT_URL (optional: default is None, boto3 only)

Custom S3 URL to use when connecting to S3, including scheme. Overrides AWS_S3_REGION_NAME and AWS_S3_USE_SSL. To avoid AuthorizationQueryParametersError error, AWS_S3_REGION_NAME should also be set.

まずは上記設定を実施し、Djangoから生成されたURLが https://static.***.tokyo/*** に変わるかをお試しください。

投稿2019/12/06 01:31

nurari

総合スコア17

yasuhiro_tera

2019/12/06 12:26

nurariさんご回答いただきありがとうございました。ご指摘いただいたsettings.pyの内容を追記し、再度デプロイ、キャッシュクリア(Command + Shift + R)でスーパーリロードしても以前と同じS3からの配信先しか表示されませんでした。 AWSのマネジメントコンソール上のCloudFrontの画面からCache Statistics ReportsやCloudFront Popular Objects Reportなどいくつかのレポートを見れることに気づき、上記「CloudFrontの設定」欄に画像を追加しました。40X系のエラーで全て弾かれてしまっているように見えますが、これも思い当たる節がありません汗。何度も申し訳ありませんが、何かご存知のことがあればご教示いただければ幸いです。よろしくお願いします。

nurari

2019/12/06 13:10

> 同じS3からの配信先しか表示されませんでした。承知しました。それでは、先に追記した内容を消した上で、下記の内容を追記するとどうでしょうか。 AWS_S3_CUSTOM_DOMAIN = 'static.xxx.tokyo' うっかり見落としていたのですが、まさにCloudFrontをCDNとして使用するケースで設定するパラメータとして、公式のドキュメントに記載されています。 https://django-storages.readthedocs.io/en/latest/backends/amazon-S3.html#cloudfront > 40X系のエラーで全て弾かれてしまっているように見えますが、おそらく自動巡回のBotか何かかと思いますが、ファイル名は見覚えのないものでしょうか。

yasuhiro_tera

2019/12/07 08:29 編集

ご返答ありがとうございました。 AWS_S3_CUSTOM_DOMAIN = 'static.xxx.tokyo'と追記することで、Chromeのデベロッパーツールで検証してみたところCSSの配信元が無事に<href="https://static.ドメイン名.tokyo/css/style.css">になっていました。ところが、今度はCSSを含むそれらの静的ファイルが全く効いていない状況です。試しにこのCSSのURLに直接アクセスしてみると、 This XML file does not appear to have any style information associated with it. The document tree is shown below. <Error> <Code>AccessDenied</Code> <Message>Access Denied</Message> <RequestId>hogehoge</RequestId> <HostId> fugafuga= </HostId> </Error> とXML形式(?)の表示が出てしまいます。他の静的ファイルのURLにアクセスしてみてもこれと全く同じ権限系?のエラーでした。

行動規範の内容に同意します