Django＆nginx&Gunicornの本番環境で画像ファイルが表示されない

Question

前提

• 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サーバー上でアプリが動くことを確認しましたが、開発環境では表示されていた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の構造の理解が足りていないことが原因だと思いますが、自己解決しきれませんでした。

どなたか解決方法お分かりになる方いらっしゃいましたら助けてください。
よろしくお願いいたします。

実現したいこと

• DebugモードFalseでも画像を表示するようにする

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

- 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

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

• 開発環境でfaviconが保存されている場所

\Django_eighthPJ\static\img\favicon.ico

• 開発環境で画像ファイルが保存されている場所

\Django_eighthPJ\staticfiles\media_root\post_content_images
\Django_eighthPJ\staticfiles\media_root\post_images

Answer 1

お疲れ様です。
STATIC_ROOTはデプロイしたときにcollect staticで作成されたディレクトリを見るパスになります。
ローカルでデバッグモードをFalseにして画像が見れるのであればGunicornかNginxの権限の問題っぽいですね。

試せること。
①デプロイしたDjangoアプリブラウザで表示してください。
②表示されない画像のファイルを検証モードで開きファイルパスを開き、何が出るか見てください。
③アクセスする権限がありません、というようなエラーの場合は下記の原因が考えられます。

NiginxかGunicornにファイルのアクセス権限が与えられていない。
Ubuntuの場合。
ls -l /path/to/file　でファイルの持ち主が見れます。
chmod のコマンドで変更する。

詳しい記事と動画を作ってるのでよかったら見てください。
https://asameshicode.com/how-to-deploy-django-with-ubuntu/
https://www.youtube.com/watch?v=0RMkIX7pukU

Comments

[arron]

早速のご回答ありがとうございました。
YouTubeの動画を参考に、nginxのerror logを確認したところ、favicon.icoのPermission deniedが表示されていましたので、gpasswdでユーザーに権限付与したところ、faviconは表示されるようになりました。ありがとうございました。
ただ、画像ファイルは引き続き表示されないままです。やはりDjangoとnginxの静的ファイルのsettingに問題があるのでしょうか。。
また、コメントにいただいた「画像のファイルを検証モードでファイルパスを開く」、という部分が良くわかりませんでした。chromeの検証モードで開発者ウィンドウの中にエラー表示みたいなものは特に見られませんでした。一番下に"問題"という表示のあるボックスの中に書いてあるのはchromeやcookieの関連のコメントらしく、サイトに関係ありそうなコメントではありませんでした。
もし、まだ試せそうなことがありましたら教えていただけると大変助かります。