Djangoで画像をS3にアップしたいのですがエラーが出てしまいます

Question

前提・実現したいこと

Djangoで画像と動画をAWSのS3にアップしたい。

Djangoで画像と動画を投稿できるサイトを作成してます。

無事、AWSにアップしてデプロイが完了しました。
S3の設定をする前まではサイト表示は問題なく表示されていました。

しかし画像と動画をS3にアップさせるところでサイトが表示されなくなってしまいます。

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

502 Bad Gateway nginx/1.14.0 (Ubuntu)

以下はsettings.pyです。

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '×××××××××××××××××××××××××××××××××××××××××××××'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False

ALLOWED_HOSTS = ['motuni.xyz']


# Application definition

INSTALLED_APPS = [
    'accounts.apps.AccountsConfig',
    'videos.apps.VideosConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'storages',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

# Djangoのキャッシュにセッションデータを保存
# SESSION_ENGINE = 'django.contrib.sessions.backends.cache'

ROOT_URLCONF = 'project4.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'project4.wsgi.application'

# ログイン後のページを指定する
LOGIN_REDIRECT_URL = '/'

# Database
# https://docs.djangoproject.com/en/2.2/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': '××××',
        'USER': '×××××',
        'PASSWORD': '×××××',
        'HOST': '×××××',
        'PORT': '',
    }
}


# Password validation
# https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/2.2/topics/i18n/

LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/




###↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓恐らく以下の設定のどこかが間違っている↓↓↓↓↓↓↓↓↓↓↓##########################################################

#STATIC_URL = '/static/'

#STATICFILES_DIRS = [
#    os.path.join(BASE_DIR, 'static')
#]

# メディアファイル関連
#MEDIA_URL = '/media/'
#MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

LOGIN_URL = 'login'


# 共通の設定
AWS_ACCESS_KEY_ID = '×××××××'
AWS_SECRET_ACCESS_KEY = '××××××××'
AWS_STORAGE_BUCKET_NAME = 'motuni'
AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME
AWS_S3_OBJECT_PARAMETERS = {
    'CacheControl': 'max-age=86400',
}
AWS_LOCATION = 'static'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]
STATIC_URL = 'https://%s/%s/' % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION)
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

DEFAULT_FILE_STORAGE = 'project4.backends.MediaStorage'






```ここに言語名を入力
Python Django

以下はurls.pyです。

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
from django.views.generic import RedirectView
from storages.backends.s3boto import S3BotoStorage

urlpatterns = [
path('admin/', admin.site.urls),
path('videos/', include('videos.urls')),
path('accounts/', include('accounts.urls')),
path('accounts/', include('django.contrib.auth.urls')),
path('', RedirectView.as_view(url='/videos/')),
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

StaticRootS3BotoStorage = lambda: S3BotoStorage(location='static')
MediaRootS3BotoStorage = lambda: S3BotoStorage(location='media')

以下はbackends.pyです。backends.pyはsettings.pyと同じ階層（ディレクトリ）に置いてあります。

from storages.backends.s3boto3 import S3Boto3Storage

class MediaStorage(S3Boto3Storage):
location = 'media' # /media というURLで配信
file_overwrite = False # 同名ファイルは上書きせずに似た名前のファイルに

### 試したこと


主に以下のサイトを参考にAWSのS3の設定とDjango側の設定をしました。

[参考サイト](https://narito.ninja/blog/detail/27/)


### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

以下はnginxログ(ログの一番下)の抜粋です。

error.log

2019/10/25 11:43:50 [crit] 3863#3863: *1 connect() to unix:/home/ubuntu/project4/project4.sock failed (2: No such file or directory) while connecting to upstream, client: IPアドレス, server: motuni.xyz, request: "GET / HTTP/1.1", upstream: "http://unix:/home/ubuntu/project4/project4.sock:/", host: "motuni.xyz"

error.log.1

2019/10/25 06:00:53 [crit] 978#978: *15 connect() to unix:/home/ubuntu/project4/project4.sock failed (2: No such file or directory) while connecting to upstream, client: 52.41.225.107, server: motuni.xyz, request: "GET / HTTP/1.1", upstream: "http://unix:/home/ubuntu/project4/project4.sock:/", host: "motuni.xyz"

access.log

IPアドレス - - [25/Oct/2019:11:43:50 +0000] "GET / HTTP/1.1" 502 584 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36"

access.log.1

159.203.201.77 - - [25/Oct/2019:05:07:03 +0000] "GET / HTTP/1.1" 200 396 "-" "Mozilla/5.0 zgrab/0.x"
52.41.225.107 - - [25/Oct/2019:06:00:53 +0000] "GET / HTTP/1.1" 502 182 "-" "Go-http-client/1.1"

問題がある可能性があるための補足です。


sudo pip install django-storages　コマンドを打つと以下のエラーが出ました。

WARNING: The directory '/home/ubuntu/.cache/pip/http' or its parent directory is not owned by the current user and the cache has been disabled. Please check the permissions and owner of that directory. If executing pip with sudo, you may want sudo's -H flag.
WARNING: The directory '/home/ubuntu/.cache/pip' or its parent directory is not owned by the current user and caching wheels has been disabled. check the permissions and owner of that directory. If executing pip with sudo, you may want sudo's -H flag.
Requirement already satisfied: django-storages in /usr/local/lib/python3.6/dist-packages (1.7.2)
Requirement already satisfied: Django>=1.11 in /usr/local/lib/python3.6/dist-packages (from django-storages) (2.2.6)
Requirement already satisfied: sqlparse in /usr/local/lib/python3.6/dist-packages (from Django>=1.11->django-storages) (0.3.0)
Requirement already satisfied: pytz in /usr/local/lib/python3.6/dist-packages (from Django>=1.11->django-storages) (2019.3)

sudo pip install boto3　コマンドを打つと以下の同じようなコードが出ます。

WARNING: The directory '/home/ubuntu/.cache/pip/http' or its parent directory is not owned by the current user and the cache has been disabled. Please check the permissions and owner of that directory. If executing pip with sudo, you may want sudo's -H flag.
WARNING: The directory '/home/ubuntu/.cache/pip' or its parent directory is not owned by the current user and caching wheels has been disabled. check the permissions and owner of that directory. If executing pip with sudo, you may want sudo's -H flag.
Requirement already satisfied: boto3 in /usr/local/lib/python3.6/dist-packages (1.10.1)
Requirement already satisfied: jmespath<1.0.0,>=0.7.1 in /usr/local/lib/python3.6/dist-packages (from boto3) (0.9.4)
Requirement already satisfied: botocore<1.14.0,>=1.13.1 in /usr/local/lib/python3.6/dist-packages (from boto3) (1.13.1)
Requirement already satisfied: s3transfer<0.3.0,>=0.2.0 in /usr/local/lib/python3.6/dist-packages (from boto3) (0.2.1)
Requirement already satisfied: python-dateutil<3.0.0,>=2.1; python_version >= "2.7" in /usr/local/lib/python3.6/dist-packages (from botocore<1.14.0,>=1.13.1->boto3) (2.8.0)
Requirement already satisfied: urllib3<1.26,>=1.20; python_version >= "3.4" in /usr/lib/python3/dist-packages (from botocore<1.14.0,>=1.13.1->boto3) (1.22)
Requirement already satisfied: docutils<0.16,>=0.10 in /usr/local/lib/python3.6/dist-packages (from botocore<1.14.0,>=1.13.1->boto3) (0.15.2)
Requirement already satisfied: six>=1.5 in /usr/lib/python3/dist-packages (from python-dateutil<3.0.0,>=2.1; python_version >= "2.7"->botocore<1.14.0,>=1.13.1->boto3) (1.11.0)

Comments

[yu_1985]

画面上でもログファイルでもいいのでどこかにエラーメッセージは出ていないですか？

[motuni]

エラーはサイトに表示される（502 Bad Gateway）以外、とくに見当たらないです。

何か参考サイト（https://narito.ninja/blog/detail/27/）以外で設定しなければならないことや、削除しなければならない(NginxやGunicornなどのファイルのコード)があるのでしょうか？
それかAWS側でデータベースを構築しなければならないとかでしょうか？
それとも現在、使用しているPostgreSQLの方でやらなければならないことがあるとか。

エラー（502 Bad Gateway nginx/1.14.0 (Ubuntu)）はsettings.pyに上記を記入すると出てきます。settings.pyに記述した項目に誤りがあるのでしょうか？原因がわかりません。

[yu_1985]

nginxのログはどうですか？

[motuni]

server {
listen 80;
server_name motuni.xyz;

location = /favicon.ico {access_log off; log_not_found off;}
location /static/ {
root /home/ubuntu/project4;
}
location /media/ {
root /home/ubuntu/project4;
}
location /static/admin {
root /home/ubuntu/py36/lib/python3.6/site-packages/django/contrib/admin;
}

location / {
include proxy_params;
proxy_pass http://unix:/home/ubuntu/project4/project4.sock;
}
}

yu_1985さんありがとうございます。

これのことでしょうか？このファイルを修正しなければならないのでしょうか？

[motuni]

追記です。
以下の記述をAWSのIAMユーザーのところに記載しなければならないのでしょうか？

どこに記載すればいいかわかりませんでしたが、参考サイトはこちら（https://github.com/codingforentrepreneurs/Guides/blob/master/all/s3_staticfiles_django.md）です。

{
"Statement": [
{
"Effect": "Allow",
"Action": [
"s3:ListBucket",
"s3:GetBucketLocation",
"s3:ListBucketMultipartUploads",
"s3:ListBucketVersions"
],
"Resource": "arn:aws:s3:::<your_bucket_name>"
},
{
"Effect": "Allow",
"Action": [
"s3:*Object*",
"s3:ListMultipartUploadParts",
"s3:AbortMultipartUpload"
],
"Resource": "arn:aws:s3:::<your_bucket_name>/*"
}
]
}

[yu_1985]

それはnginxのログではなくて設定ファイルです。

使用しているクレデンシャルにS3を操作する権限がないのであればそこが原因の可能性が高いので、キーを発行したIAMユーザに必要な権限を割り当ててください。
EC2から動かすのであればキーではなくインスタンスのIAMロールの権限を使って欲しいところですが、一旦は割愛します。

[motuni]

yu_1985さんありがとうございます。
IAMユーザに必要な権限は参考サイト（https://narito.ninja/blog/detail/27/）の通りにやりました。
以下は行った手順です。

1、IAMの画面に移動してユーザーを追加。
2、ユーザー名（taro）を入れ、「プログラムによるアクセス」にチェックを入れ、「次のステップ:アクセス権限」を押す。
3、「グループの作成」ボタンを押す。
4、グループ名を入れ、「AmazonS3FullAccess」にチェックを入れて、「グループの作成」をする。
5、今作ったグループが表示されるので、チェックを入れて「次のステップ：確認」に進む。
6、確認画面になるので、「ユーザーの作成」を押す。
7、アクセスキーと、シークレットアクセスキーをメモしておく。終わったら、右下の「閉じる」ボタンで終了する。

■次にS3のページに行き、「バケットを作成」する
1、バケット名（motuni）
リージョン（アジアパシフィック東京）

2、ブロックパブリックアクセス（バケット設定）
パブリックアクセスをすべてブロックのチェックを外す。すべての項目にチェックしないでオフにする。

3、「このバケットにパブリック読み取りアクセス権限を付与する」を選択し、次へ、そしてバケットを作成する。

以上がIAMユーザー作成とS3バケット作成です。
権限の割り当てなど、間違っていそうな箇所はありますでしょうか？

今、いったんサイト（motuni.xyz）を見られる状態（S3に設定する前）に戻してあります。
よろしければご確認いただけると幸いです。→　motuni.xyz

やはりDjango側ではなく、IAMユーザー又はバケット作成時に間違っている可能性が高いでしょうか？
それとも、、、、。nginxでしょうか？

[yu_1985]

そもそもですが、情報が少なくて原因の特定が難しいので必要な情報を探さないといけないです。

nginxのログはデフォルトなら/var/log/nginxの配下にアクセスログとエラーログがあるので、エラーが発生した時に何が出力されるかを確認してみてください。
nginxがエラーを出しているのでnginxのログを見れば何らかの手がかりがあるかもしれません。
Bad Gatewayだけだと原因が特定できません。

IAMの権限が足りないことはなさそうな気がしますが、画像や動画のアップロード自体はできていますか？

あと、細かいですが記載しているのは質問に記載しているのはHTMLじゃなくてpythonのファイルだと思うので修正したほうがよいかと思います。

[motuni]

画像や動画のアップロードはS3設定前（現時点）はできています。ただ先ほどアップロードしましたら、アップして表示されるものと表示されない画像や動画があります。理由は今のところはっきりわかりません。

長いログですが、何卒よろしくお願いいたします。

[yu_1985]

こちらだと非常に見づらいので本文に追記してほしいのと、全部ではなくてエラーを再現させたときに出力されたものだけ抜粋してほしいです。IPとかは多分見えないほうがいいです。

[motuni]

本文に追記したのでエラーは削除依頼を出しました。

Answer 1

解決いたしました！自分の質問ですが以下の通りにやりました。
DjangoでAWSのS3の設定をすると動画投稿サイトがInternal Server Errorになる

Answer 2

しばらくチェックできないので一旦現時点でログをざっと見て考えられるところを書くと、ソースの配置先がubuntuユーザのホームディレクトリになっているのでnginxの実行ユーザが必要なファイルを読み取れてないのでは、という気がします。
適切な場所に配置して実行し直すか、該当のディレクトリに適切な権限を振ってください。
ちなみにWEBサイトのソースは一般的には/var/www配下に置くことが多いです。

Comments

[motuni]

「エラーを再現させたときに出力されたものだけ抜粋」と「本文に追記」の件、了解しました。

■「ubuntuユーザのホームディレクトリになっているのでnginxの実行ユーザが必要なファイルを読み取れてない」について

ubuntu@ip-10-0-10-10:/var/log/nginx$ cd /var/www/
ubuntu@ip-10-0-10-10:/var/www$ ls
html
ubuntu@ip-10-0-10-10:/var/www$ cd html
ubuntu@ip-10-0-10-10:/var/www/html$ ls
index.nginx-debian.html

/var/www以下には、htmlディレクトリがあり、その中にはindex.nginx-debian.htmlがある構成になっています。/var/www/ にDjangoで作ったフォルダをアップロードすればいいということでしょうか？（参考サイトにはそのような記述はなかったため）

長々とお付き合い下さりありがとうございました。
また時間があるときによろしくお願いいたします。

[yu_1985]

実のところはどこに置いても自由です。きちんと読み取れればいいだけなので。
nginxを使っているならnginxでルートディレクトリを定義してやればいいだけです。

nginxのユーザが今の配置ディレクトリのファイルを読み取れればいいので権限振るだけでも動くような気はしますが…。

[motuni]

いろいろと調べてやってみましたが、ダメでした。
残念ですが今回はS3無しでサイトを運営しようと思います。

yu_1985さんへ、貴重なお時間を頂きましてありがとうございました。

[motuni]

今、デプロイを始めからやり直して、AWSのインスタンスにIAMロールの権限を割り当てたところ、サイトのエラー表示が「Internal Server Error」に変わりました。

解決できそうな予感がします。

[motuni]

解決しました！ありがとうございました！