Django-storageでs3v4を使うとcssが表示されない時の解決方法

GAEで動画や画像をアップロードすると最大リクエストが32M Bしか通信ができず、アップロード ができない。解決策としてクラウドストレージサービスにある署名付きURLを発行して直接アップロードさせてしまえばいいと書いてあったので、django-storagesのAWS S3を使って署名付きのURLを発行させてもらうことにした。

django-storagesをインストールすれば楽にdjangoとAWSを繋げることができるし、AWS_S3_SIGNATURE_VERSION = ‘s3v4’ を設定すれば、勝手に署名付きurlを発行できる至れり尽くせりなものらしいです。早速やってみようとして下記のリンクを見ながら導入してみたら、ユーザーモデルとつながっている画像は反応するが、ロゴなどの元々あった画像やcssが一切無効化されていたので、理由が分からずしばらく彷徨っていたので、忘れないためにもメモとして残します。cssの表示は一応成功しています。結局画像などのアップロードする際のdjango-storagesは、ファイルを閲覧する分にはブラウザから署名付きのURLダイレクトにアップロードするのではなく一回サーバーを経由してからアップロード行うためGAEなどのサーバーの環境次第では、GB級の大きなファイルの送信はできないです。

[ブラウザ] --(アップロード)-|-> [SERVER] --> [CloudStorage]
[ブラウザ] <----------------------------------- [CloudStorage]

こういう感じになっています。 ダイレクトにアップロードするにはdjango-restfreworkなどを使って署名付きURLを作成してブラウザからJAVAScriptを利用してブラウザから直接アップロードする手段がありますがまだまだその方法が確立していないので別記事に記入させていただきます。

Django-storagesの導入方法

そもそもこの問題に悩む人は一通りS3やdjango-storagesをインストールやS3の設定は完了していると思うのですが確認として・・・

AWSの設定は下記の動画を参考にすればわかりやすいと思います。(英語ですが)こちらではざっくりとした解説になっております。

django-storageをインストールするには、ターミナルを開いて下記のコマンドを入力する

pip install django-storages
pip install boto3

Project作成後settings.pyを開いて[INSTALLED_APPS]の項目にdjango-storagesをインストールして欲しいと指示させます。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'storages',#input

]

[INSTALLED_APPS]を記入後好きな場所で構いませんのでどこのストレージを(今回はAWS S3)使うのか指示します。Staticの近くに書いておくとどこにあるのかわかりやすいので、そこの近くに書くのがおすすめです。

#Use AWS S3-STORAGE
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
DEFAULT_FILE_STORAGE = 'video.backends.MediaStorage'
AWS_ACCESS_KEY_ID = env('AWS_UPLOAD_KEY')
AWS_SECRET_ACCESS_KEY =env('AWS_SECRET_KEY')
AWS_STORAGE_BUCKET_NAME = env('AWS_BUCKET_NAME')
AWS_LOCATION = 'static'
AWS_S3_SIGNATURE_VERSION = 's3v4'
AWS_DEFAULT_ACL = None

#Use Google Cloud Storage
#DEFAULT_FILE_STORAGE = 'storages.backends.gcloud.GoogleCloudStorage' 
...
#Use AZURE STORAGE
#DEFAULT_FILE_STORAGE = 'storages.backends.azure_storage.AzureStorage'
#STATICFILES_STORAGE = 'custom_storage.custom_azure.PublicAzureStorage'
....

AWS_S3_SIGNATURE_VERSIONでバージョンを指定して署名付きのURLを作成するのですがどうもAWSの認証関係にエラーがあったので、django-storagesの公式サイトを確認したところどうもリージョンネームを設定しなくてはいけないらしく(理由としてはリージョンの中にはV4に対応していないところがあるとかなんとか)東京(ap-northeast-1)は対応しています。

最終的にはこんな感じで書けばいいかと思います。

DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
DEFAULT_FILE_STORAGE = 'project_name.backends.MediaStorage'
AWS_ACCESS_KEY_ID = env('AWS_UPLOAD_KEY')
AWS_SECRET_ACCESS_KEY =env('AWS_SECRET_KEY')
AWS_STORAGE_BUCKET_NAME = env('AWS_BUCKET_NAME')
AWS_LOCATION = 'static'
AWS_S3_SIGNATURE_VERSION = 's3v4'
AWS_S3_REGION_NAME = 'ap-northeast-1'
AWS_DEFAULT_ACL = None

これでCSSファイルやJavaScriptファイルをAWSにアップロードしていないなら [python manage.py collectstatic]を入力すればCSSやJAVAscriptが表示されると思います。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA