Django&nginx&Gunicornの本番環境で画像ファイルが表示されない
解決したいこと
-
Djangoでブログアプリを作っています。
-
アプリ作成およびデプロイは以下のサイトを参考にしました。
https://medium.com/@kjmczk/blogsite-django-747046b453f9#4e27
https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu-20-04 -
デプロイ後、VPSサーバー上でアプリが動くことを確認しましたが、開発環境(127.0.0.1:8000)では表示されていたfaviconが表示されていません。
-
さらに、Djangoのsettings.pyのDebugモードをFalseに変更したところ、本番環境(Debugモード:True)では表示されていたページ内画像も表示されないエラーが発生します。
-
色々なウェブサイトを拝見したところ、おそらくDjangoとnginxのsettingの仕方に問題があるようなのですが、どうしてもうまくいきません。
-
Djangoのsettings.pyのMEDIA_ROOT、STATIC_ROOTにそれぞれ2つずつディレクトリ名が入っている理由もよくわからず。cf. MEDIA_ROOT('staticfiles', 'media_root')、STATIC_ROOT('staticfiles', 'static_root')
-
おそらく初歩的なDjangoとnginxの構造の理解が足りていないことが原因だと思いますが、自己解決しきれませんでした。
どなたか解決方法お分かりになる方いらっしゃいましたら助けてください。
よろしくお願いいたします。
発生している問題・エラー
- faviconが表示されるべきところにデフォルトの地球のようなマークが表示される
- 画像が表示されるべき場所に、写真の右下が破れたようなエラーアイコンが表示される
該当するソースコード
# \Django_eighthPJ\eighthPJ\settings.py
from pathlib import Path
import os
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '...'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = ['VPS アドレス', 'localhost']
# Application definition
INSTALLED_APPS = [
'blog.apps.BlogConfig',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
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',
]
ROOT_URLCONF = 'eighthPJ.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',
'eighthPJ.context_processors.common',
],
},
},
]
WSGI_APPLICATION = 'eighthPJ.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.2/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# Password validation
# https://docs.djangoproject.com/en/3.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/3.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/3.2/howto/static-files/
MEDIA_ROOT = os.path.join(BASE_DIR, 'staticfiles', 'media_root')
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles', 'static_root')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
# Default primary key field type
# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
#/etc/nginx/sites-available/eighthPJ
server {
listen 80;
'VPS アドレス';
location = /favicon.ico { access_log off; log_not_found off; }
location /static/ {
root /home/'user_name'/Django_eighthPJ;
}
location / {
include proxy_params;
proxy_pass http://unix:/run/gunicorn.sock;
}
}
自分で試したこと
-
nginxのlocationにcollectstaticを実行した後で表示されるpath、Djangoのsettings.pyのMEDIA_ROOT、STATIC_ROOTのディレクトリ名を入れ替えてみましたが、うまくいきませんでした。
(ご参考:collectstatic実行後のコメント)
You have requested to collect static files at the destination
location as specified in your settings:
/home/'user_name'/Django_eighthPJ/staticfiles/static_root -
下記の動画を参考にさせていただき、nginxのerrorログを確認したところ、faviconのpermission errorが出ていたのでパーミッションしたところfaviconは表示されるようになりました。(現在、なぜか再度表示されないようになっています)
https://www.youtube.com/watch?v=0RMkIX7pukU -
開発環境では問題なくアプリが立ち上がっているので、おそらくnginxの設定だと思い、下記のサイトを参考にさせていただき、nginxのlocationの設定をいろいろ変えてみましたが、うまくいきませんでした。
https://daeudaeu.com/django-staticfile/
【以下、nginxで試してみた設定です】
Option 1.
location /static/ {
root /home/'user_name'/Django_eighthPJ/static;
}
Option 2.
location /static/ {
root /home/'user_name'/Django_eighthPJ/static/;
}
Option 3.
location static/ {
root /home/'user_name'/Django_eighthPJ;
}
Option 4.
location static/ {
root /home/'user_name'/Django_eighthPJ/static;
}
Option 5.
location static/ {
root /home/'user_name'/Django_eighthPJ/static/;
}
Option 6.
location /static/ {
alias /home/'user_name'/Django_eighthPJ;
}
Option 7.
location /static/ {
alias /home/'user_name'/Django_eighthPJ/static;
}
Option 8.
location /static/ {
alias /home/'user_name'/Django_eighthPJ/static/;
}
Option 9.
location static/ {
alias /home/'user_name'/Django_eighthPJ;
}
Option 10.
location static/ {
alias /home/'user_name'/Django_eighthPJ/static;
}
Option 11.
location static/ {
alias /home/'user_name'/Django_eighthPJ/static/;
}