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

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

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

Gunicorn (Green Unicorn)は、Rubyのunicornをベースに開発されたUNIX向けのPython製HTTPサーバです。他のライブラリとの依存関係がないため、容易にインストールして使用できます。

Django

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

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

Q&A

受付中

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

arron
arron

総合スコア30

Gunicorn

Gunicorn (Green Unicorn)は、Rubyのunicornをベースに開発されたUNIX向けのPython製HTTPサーバです。他のライブラリとの依存関係がないため、容易にインストールして使用できます。

Django

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

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

1回答

0グッド

0クリップ

348閲覧

投稿2022/11/03 14:04

前提

  • 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

1# \Django_eighthPJ\eighthPJ\settings.py 2 3from pathlib import Path 4import os 5 6# Build paths inside the project like this: BASE_DIR / 'subdir'. 7BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 8 9# SECURITY WARNING: keep the secret key used in production secret! 10SECRET_KEY = '...' 11 12# SECURITY WARNING: don't run with debug turned on in production! 13DEBUG = True 14 15ALLOWED_HOSTS = ['VPS アドレス', 'localhost'] 16 17# Application definition 18 19INSTALLED_APPS = [ 20 'blog.apps.BlogConfig', 21 'django.contrib.admin', 22 'django.contrib.auth', 23 'django.contrib.contenttypes', 24 'django.contrib.sessions', 25 'django.contrib.messages', 26 'django.contrib.staticfiles', 27] 28 29MIDDLEWARE = [ 30 'django.middleware.security.SecurityMiddleware', 31 'django.contrib.sessions.middleware.SessionMiddleware', 32 'django.middleware.common.CommonMiddleware', 33 'django.middleware.csrf.CsrfViewMiddleware', 34 'django.contrib.auth.middleware.AuthenticationMiddleware', 35 'django.contrib.messages.middleware.MessageMiddleware', 36 'django.middleware.clickjacking.XFrameOptionsMiddleware', 37] 38 39ROOT_URLCONF = 'eighthPJ.urls' 40 41TEMPLATES = [ 42 { 43 'BACKEND': 'django.template.backends.django.DjangoTemplates', 44 'DIRS': [os.path.join(BASE_DIR, 'templates')], 45 'APP_DIRS': True, 46 'OPTIONS': { 47 'context_processors': [ 48 'django.template.context_processors.debug', 49 'django.template.context_processors.request', 50 'django.contrib.auth.context_processors.auth', 51 'django.contrib.messages.context_processors.messages', 52 'eighthPJ.context_processors.common', 53 ], 54 }, 55 }, 56] 57 58WSGI_APPLICATION = 'eighthPJ.wsgi.application' 59 60 61# Database 62# https://docs.djangoproject.com/en/3.2/ref/settings/#databases 63 64DATABASES = { 65 'default': { 66 'ENGINE': 'django.db.backends.sqlite3', 67 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), 68 } 69} 70 71 72# Password validation 73# https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators 74 75AUTH_PASSWORD_VALIDATORS = [ 76 { 77 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', 78 }, 79 { 80 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', 81 }, 82 { 83 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', 84 }, 85 { 86 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', 87 }, 88] 89 90 91# Internationalization 92# https://docs.djangoproject.com/en/3.2/topics/i18n/ 93 94LANGUAGE_CODE = 'ja' 95 96TIME_ZONE = 'Asia/Tokyo' 97 98USE_I18N = True 99 100USE_L10N = True 101 102USE_TZ = True 103 104 105# Static files (CSS, JavaScript, Images) 106# https://docs.djangoproject.com/en/3.2/howto/static-files/ 107 108MEDIA_ROOT = os.path.join(BASE_DIR, 'staticfiles', 'media_root') 109MEDIA_URL = '/media/' 110 111STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles', 'static_root') 112STATIC_URL = '/static/' 113 114STATICFILES_DIRS = [ 115 os.path.join(BASE_DIR, 'static'), 116] 117 118# Default primary key field type 119# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field 120 121DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

nginx

1#/etc/nginx/sites-available/eighthPJ 2server { 3 listen 80; 4 'VPS アドレス'; 5 6 location = /favicon.ico { access_log off; log_not_found off; } 7 location /static/ { 8 root /home/'user_name'/Django_eighthPJ; 9 } 10 location / { 11 include proxy_params; 12 proxy_pass http://unix:/run/gunicorn.sock; 13 } 14}

試したこと

  • 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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

お疲れ様です。
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

投稿2022/11/03 16:04

traitotaku

総合スコア2

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

2022/11/04 00:02

こちらの回答が他のユーザーから「質問に対する回答となっていない投稿」という指摘を受けました。

回答へのコメント

arron

2022/11/05 08:06

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

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Gunicorn

Gunicorn (Green Unicorn)は、Rubyのunicornをベースに開発されたUNIX向けのPython製HTTPサーバです。他のライブラリとの依存関係がないため、容易にインストールして使用できます。

Django

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

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。