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

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

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

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

nginx

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

Ubuntu

Ubuntuは、Debian GNU/Linuxを基盤としたフリーのオペレーティングシステムです。

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

Q&A

0回答

1357閲覧

Djangoアプリでcollectstaticを行っても静的ファイルが読みこまれない

Yu-Yokochi

総合スコア7

Django

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

nginx

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

Ubuntu

Ubuntuは、Debian GNU/Linuxを基盤としたフリーのオペレーティングシステムです。

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

0グッド

0クリップ

投稿2020/08/18 16:26

実現したいこと

Djangoアプリをデプロイしたところ、静的ファイルが反映されていないため、
collectstaticを実行しました。
しかし、

GET http://IPアドレス/static/blog/style.css net::ERR_ABORTED 404 (Not Found)

というエラーメッセージが表示されてしまい、静的ファイルは反映されないままでした。

###前提

プロジェクト名はfractalで
アプリ名はblogです。

fractal
-blog
--init.py
--admin.py
--forms.py
--models.py
--templates
--tests.py
--views.py
--pycache
--apps.py
--migrations
--static
--templatetags
--urls.py

-fractalsite
--init.py
--pycache
--settings.py
--urls.py
--wsgi.py

-fractalsite.sock

-manage.py

-static
--blog
---img
---main.js
---style.css
---style.css.map
---style.scss
--admin
---css
---fonts
---img
---js

-statics
--blog
---style.css
---style.css.map

試したこと

こちらの記事
【20分でデプロイ】AWS EC2にDjango+PostgreSQL+Nginx環境を構築してササッと公開
https://qiita.com/tachibanayu24/items/b8d73cdfd4cbd42c5b1d
を参考に、DjangoベースのアプリをAWSにデプロイさせました。

デプロイ後にブラウザを確認すると、静的ファイルが反映されていないため、
fractal/fractalsite/settings.pyを

Python

1import os 2 3# Build paths inside the project like this: os.path.join(BASE_DIR, ...) 4BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 5 6 7# Quick-start development settings - unsuitable for production 8# See https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/ 9 10# SECURITY WARNING: keep the secret key used in production secret! 11SECRET_KEY = ********************************************)' 12 13# SECURITY WARNING: don't run with debug turned on in production! 14DEBUG = False 15 16ALLOWED_HOSTS = ['13.113.115.60'] 17 18 19# Application definition 20 21INSTALLED_APPS = [ 22 'blog.apps.BlogConfig', 23 'sass_processor', 24 'django.contrib.admin', 25 'django.contrib.auth', 26 'django.contrib.contenttypes', 27 'django.contrib.sessions', 28 'django.contrib.messages', 29 'django.contrib.staticfiles', 30] 31 32MIDDLEWARE = [ 33 'django.middleware.security.SecurityMiddleware', 34 'django.contrib.sessions.middleware.SessionMiddleware', 35 'django.middleware.common.CommonMiddleware', 36 'django.middleware.csrf.CsrfViewMiddleware', 37 'django.contrib.auth.middleware.AuthenticationMiddleware', 38 'django.contrib.messages.middleware.MessageMiddleware', 39 'django.middleware.clickjacking.XFrameOptionsMiddleware', 40] 41 42ROOT_URLCONF = 'fractalsite.urls' 43 44TEMPLATES = [ 45 { 46 'BACKEND': 'django.template.backends.django.DjangoTemplates', 47 'DIRS': [], 48 'APP_DIRS': True, 49 'OPTIONS': { 50 'context_processors': [ 51 'django.template.context_processors.debug', 52 'django.template.context_processors.request', 53 'django.contrib.auth.context_processors.auth', 54 'django.contrib.messages.context_processors.messages', 55 ], 56 }, 57 }, 58] 59 60WSGI_APPLICATION = 'fractalsite.wsgi.application' 61 62 63# Database 64# https://docs.djangoproject.com/en/1.11/ref/settings/#databases 65 66DATABASES = { 67 'default': { 68 'ENGINE': 'django.db.backends.postgresql_psycopg2', 69 'NAME': 'fractal', 70 'USER': 'fractal', 71 'PASSWORD': 'fractal', 72 'HOST': 'localhost', 73 'PORT': '', 74 } 75} 76 77# Password validation 78# https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators 79 80AUTH_PASSWORD_VALIDATORS = [ 81 { 82 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', 83 }, 84 { 85 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', 86 }, 87 { 88 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', 89 }, 90 { 91 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', 92 }, 93] 94 95# Internationalization 96# https://docs.djangoproject.com/en/1.11/topics/i18n/ 97 98LANGUAGE_CODE = 'ja' 99 100TIME_ZONE = 'Asia/Tokyo' 101 102USE_I18N = True 103 104USE_L10N = True 105 106USE_TZ = True 107 108 109# Static files (CSS, JavaScript, Images) 110# https://docs.djangoproject.com/en/1.11/howto/static-files/ 111 112STATIC_URL = '/static/' 113 114STATIC_ROOT = os.path.join(BASE_DIR, 'static') 115 116SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, 'static') 117SASS_PROCESSOR_INCLUDE_FILE_PATTERN = r'^.+.(sass|scss)$' 118SASS_PRECISION = 8 119SASS_OUTPUT_STYLE = 'compressed' 120SASS_TEMPLATE_EXTS = ['.html', '.haml'] 121 122

というように

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

を設定し、

STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)

を削除しました。

その後、/etc/nginx/sites-available/fractalをvimで

nginx

1 location /static/ { 2 root /home/ubuntu/fractal/static/; 3 }

と変更しました。
この状態で
python3 manage.py collectstaticを実行すると、

144 static files copied to '/home/ubuntu/fractal/static'.

と表示され、うまくいったように見えます。
実際ディレクトリに見にいくと、前提でも示したように、静的ファイルが集められていました。

その状態でサーバーをリロードし、ブラウザに戻ってページを表示すると、css,js,imgが反映されておらず、
デベロッパツールでhead内を確認すると、

HTML

1 <head> 2 <meta charset="utf-8"> 3 <title></title> 4 <link rel="stylesheet" href="/static/blog/style.css" type="text/css"> 5 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 6 <script src="/static/blog/main.js"></script> 7 </head>

と、なり
エラーメッセージが

GET http://13.113.115.60/static/blog/style.css net::ERR_ABORTED 404 (Not Found) GET http://13.113.115.60/static/blog/main.js net::ERR_ABORTED 404 (Not Found) GET http://13.113.115.60/favicon.ico 404 (Not Found)

となっていました。

head内に記述しているパスの通りにディレクトリ内を辿ったところ、静的ファイルはしっかり存在し、損傷なども見られませんでした。

また、settings.pyのDEBUG=の部分もTRUEやFALSEにして同様に試しましたが結果は変わりませんでした。

非常に経験が浅く、周りに頼れる人もいない状態で上記の結果で途方にくれております。

お手数おかけしますが、知恵をお貸しいただけないでしょうか。

よろしくお願いします。

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

Python 3.6.9
開発環境:Mac

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問