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

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

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

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

ファイル

ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

Amazon S3

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

AWS(Amazon Web Services)

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

Q&A

解決済

1回答

2989閲覧

AWS S3パケットを用いて静的ファイルの配信を試みると、403エラーが出て、css,js,画像ファイルなどが読み込まれない。

Yu-Yokochi

総合スコア7

Django

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

ファイル

ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

Amazon S3

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

AWS(Amazon Web Services)

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

0グッド

0クリップ

投稿2020/08/25 14:17

##実現したいこと

Djangoで作成したアプリを、AWSのEC2,nginxwを用いて本番環境にデプロイするために、静的ファイルをAWSのS3パケットから配信したい。

##前提

以下の記事「【20分でデプロイ】AWS EC2にDjango+PostgreSQL+Nginx環境を構築してササッと公開」を参考にして
https://qiita.com/tachibanayu24/items/b8d73cdfd4cbd42c5b1d
ブラウザへのIPアドレス:8000の入力でアプリが正常に表示されるところまで確認しました。
次に、settings.pyのDEBUGをFalseにし、AWS S3へ全てのstaticファイルをDeployするためにグループの権限「AmazonS3FullAccess」をもつIAMの作成およびS3パケットの作成を行いました。(このIAMIAMの作成により発行されたAccess key ID と Secret access keyは控えておきました。)
なお、このS3パケットには以下のパケットポリシーを付与しています。

{ "Version": "2012-10-17", "Statement": [ { "Sid": "AddPerm", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::パケット名/*" } ] }

また、PythonからAWSへアクセスするために以下を実行しました。

pip install boto3 pip install django-storages

そして、settings.pyを以下のように変更しました。

Python

1 2#省略 3INSTALLED_APPS = [ 4 . 5 . 6 . 7 'storages', # 追加 8] 9 10#省略 11 12# STATIC_URL = '/static/' 13STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] 14 15AWS_ACCESS_KEY_ID = 'さっき控えたアクセスキーID' 16AWS_SECRET_ACCESS_KEY = 'さっき控えたシークレットアクセスキー' 17AWS_STORAGE_BUCKET_NAME = ' パケット名' 18AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME 19AWS_S3_OBJECT_PARAMETERS = { 20 'CacheControl': 'max-age=86400', 21} 22AWS_LOCATION = 'static' 23AWS_DEFAULT_ACL = None 24STATIC_URL = 'https://%s/%s/' % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION) 25STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage' 26

この状態で

python manage.py collectstatic

を実行しAWSのS3に静的ファイルがデプロイされたことを確認しました。
最後に

python3 manage.py runserver 0.0.0.0:8000

を実行し、ブラウザにアクセスすると、静的ファイルは適用されておらず、

GET https://fractalapp.s3-ap-northeast-1.amazonaws.com/static/アプリ名/jsやcssファイル名 net::ERR_ABORTED 403 (Forbidden)

とエラーが出ていました。

##試したこと

バケットポリシーのSidを

"Sid": "AddPerm",

から

"Sid": "AllowPublicRead",

へ変更しました。

Static website hostingを有効にしました。
(「このバケットを利用してウェブサイトをホストする」にチェックを入れました)

この時インデックスドキュメントをひとまずindex.htmlとしました。
(静的ファイルのみのデプロイなのでhtmlファイルは存在していません)

イメージ説明

この状態でもう一度runserverをしても静的ファイルは読み込まれないままでした。

##なんとなくこうなんじゃないかと思っていること

403エラーはアクセス権限がないことによるエラーなので、
静的ファイルのデプロイは問題なくされているがS3パケット側の設定がよろしくないのかもしれません。
特にStatic website hostingの設定で、インデックスドキュメントに、今回でデプロイした静的ファイルのなかには存在もしない「index.html」を設定していることが特に怪しく感じています。
この状況下でインデックスドキュメントの記入欄にindex.html以外を設定するほかに、何を入力すればいいのか、調べてもわかりませんでした。

なんとか静的ファイルをAWSのS3パケットから配信するためにはどうすれば良いでしょうか。
どうかご回答のほどよろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

設定が足りないような気がしますね…。

静的ウェブサイトホスティング用に S3 バケットを設定する方法

静的ホスティングの設定とバケットポリシーの設定については言及されてますが、パブリックアクセスブロックの解除については言及がないですね。
上記ドキュメントのステップ2を確認してみてください。

また、この質問とは関係ないですが、EC2(というかAWS内部)からAWSへのリソースにアクセスする際はIAMロールを使い、IAMユーザのアクセスキー及びシークレットキーを使うのは避けましょう。

投稿2020/08/25 14:39

yu_1985

総合スコア7588

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

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

Yu-Yokochi

2020/08/25 15:27

無事解決することができました また、ご指摘も非常にためになります。 誠にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問