実現したいこと
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
あなたの回答
tips
プレビュー