问题描述
我的 Django 项目使用 Docker、gunicorn 和 whitenoise。我最近更改了设置以准备部署,最显着的是为 AWS 托管的媒体文件添加配置。现在,当我在本地运行项目并且 collectstatic
静态文件不会在浏览器中更新。但是,我确实看到了收集静态文件的变化。
我尝试过/仔细检查的事情:
问题是由 django-storages
引起的吗?我认为以前我可以进行 SCSS 更改并通过刷新浏览器来显示它们。但事实并非如此。即使在容器内运行 collectstatic
也没有效果。
# relevant settings.py
INSTALLED_APPS = [
...
"whitenoise.runserver_nostatic","storages",...
]
MIDDLEWARE = [
"django.middleware.cache.UpdateCacheMiddleware","django.middleware.security.SecurityMiddleware","whitenoise.middleware.WhiteNoiseMiddleware",...
]
# AWS config (use in production only)
USE_S3 = env.bool("USE_S3",default=not DEBUG)
if USE_S3:
AWS_ACCESS_KEY_ID = env.str("AWS_ACCESS_KEY_ID",default="")
AWS_SECRET_ACCESS_KEY = env.str("AWS_SECRET_ACCESS_KEY",default="")
AWS_STORAGE_BUCKET_NAME = env.str("AWS_STORAGE_BUCKET_NAME",default="")
AWS_DEFAULT_ACL = None
AWS_S3_REGION_NAME = env.str("AWS_S3_REGION_NAME",default="us-east-2")
AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME
AWS_S3_OBJECT_ParaMETERS = {
'CacheControl': 'max-age=86400',}
# S3 Public Media Settings
PUBLIC_MEDIA_LOCATION = 'media'
MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{PUBLIC_MEDIA_LOCATION}/'
# S3 Private Media Settings
DEFAULT_FILE_STORAGE = 'config.storage_backends.PrivateMediaStorage'
PRIVATE_MEDIA_LOCATION = 'private'
PRIVATE_FILE_STORAGE = 'config.storage_backends.PrivateMediaStorage'
else:
MEDIA_URL = "/media/"
MEDIA_ROOT = str(BASE_DIR.joinpath("media"))
STATIC_ROOT = str(BASE_DIR.joinpath("staticfiles"))
STATIC_URL = '/static/'
STATICFILES_STORAGE = 'pipeline.storage.Pipelinestorage'
DEBUG_PROPAGATE_EXCEPTIONS = True
STATICFILES_FINDERS = (
"django.contrib.staticfiles.finders.FileSystemFinder","django.contrib.staticfiles.finders.AppDirectoriesFinder","pipeline.finders.PipelineFinder",)
PIPELINE_YUGLIFY_BINARY = "/usr/local/bin/node"
PIPELINE = {
"CSS_COMPRESSOR": "pipeline.compressors.yuglify.YuglifyCompressor","COMPILERS": (
"pipeline.compilers.sass.SASSCompiler","config.compilers.RollupCompiler",),"YUGLIFY_BINARY": str(BASE_DIR.joinpath("node_modules/.bin","yuglify")),"SASS_BINARY": str(BASE_DIR.joinpath("node_modules/.bin","sass")),"STYLESHEETS": {
"twirlmate": {
"source_filenames": ("pages/scss/styles.scss","output_filename": "css/styles.css",}
},"JS_COMPRESSOR": "pipeline.compressors.NoopCompressor",# Todo: Update this to jsmin or something better.
"ROLLUP_BINARY": str(BASE_DIR.joinpath("node_modules/.bin","rollup")),"ROLLUP_ARGUMENTS": ["--config","--configDebug","--format","iife"],"disABLE_WRAPPER": True,"JAVASCRIPT": {
"twirlmate": {
"source_filenames": (
"pages/js/core.js","pages/js/file-field.js","pages/js/lazy-loading.js","pages/js/modal.js","pages/js/navigation.js","pages/js/notifications.js","output_filename": "js/twirlmate.js",},"components": {
"source_filenames": ("pages/js/vue/components.rollup.js","output_filename": "js/components.js",}
#docker-compose.yml
version: '3.8'
services:
web:
build: .
command: gunicorn config.wsgi -b 0.0.0.0:8000
volumes:
- .:/code
ports:
- 8000:8000
depends_on:
- db
environment:
- "DJANGO_SECRET_KEY=****"
- "DJANGO_DEBUG=True"
- "DJANGO_SECURE_SSL_REDIRECT=False"
- "SECURE_HSTS_SECONDS=0"
- "SECURE_HSTS_INCLUDE_SUBDOMAINS=False"
- "SECURE_HSTS_PRELOAD=False"
- "SESSION_COOKIE_SECURE=False"
- "CSRF_COOKIE_SECURE=False"
db:
image: postgres:11
volumes:
- postgres_data:/var/lib/postgresql/data/
environment:
- "POSTGRES_HOST_AUTH_METHOD=trust"
volumes:
postgres_data:
# Dockerfile
# Pull base image
FROM python:3.8
# Set environment variables and build arguments
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1
RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -
RUN apt-get install -y nodejs build-essential
# Set working directory
workdir /code
RUN npm install sass --also=dev
RUN npm install yuglify --also=dev
RUN npm install
# Install dependencies
copY Pipfile Pipfile.lock /code/
# figure out conditional installation of dev dependencies
# Will need to remove --dev flag for production
RUN pip install pipenv && pipenv install --system --dev
copY . /code/
# Collect static files
RUN python manage.py collectstatic --noinput
项目结构
twirlmate
├── .babelrc
├── .env
├── .gitignore
├── .pylintrc
├── Dockerfile
├── Makefile
├── Pipfile
├── Pipfile.lock
├── config
│ ├── __init__.py
│ ├── asgi.py
│ ├── compilers.py
│ ├── compressors.py
│ ├── constants.py
│ ├── settings.py
│ ├── storage_backends.py
│ ├── urls.py
│ └── wsgi.py
├── docker-compose.yml
├── heroku.yml
├── manage.py
├── package-lock.json
├── package.json
├── pages
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── static
│ │ └── pages
│ │ ├── css
│ │ │ ├── styles.css
│ │ │ └── styles.css.map
│ │ ├── fonts
│ │ ├── images
│ │ ├── js
│ │ │ └── vue
│ │ │ ├── components
│ │ │ │ ├── cards
│ │ │ │ ├── inputs
│ │ │ │ ├── miniMenus
│ │ │ │ └── modals
│ │ │ ├── components.rollup.js
│ │ │ ├── data
│ │ │ ├── directives
│ │ │ ├── forms
│ │ │ ├── mixins
│ │ │ ├── services
│ │ │ ├── views
│ │ │ └── vue-store.js
│ │ └── scss
│ │ ├── 01-utilities
│ │ ├── 02-vendors
│ │ ├── 03-base
│ │ ├── 04-layout
│ │ ├── 05-components
│ │ ├── 06-pages
│ │ ├── styles.css
│ │ ├── styles.css.map
│ │ └── styles.scss
│ ├── templatetags
│ │ ├── __init__.py
│ │ ├── __pycache__
│ │ ├── css_classes.py
│ │ └── url_paths.py
│ ├── tests
│ │ ├── __init__.py
│ │ └── test_views.py
│ ├── urls.py
│ └── views.py
├── pyproject.toml
├── rollup.config.js
├── staticfiles
│ ├── admin
│ ├── debug_toolbar
│ ├── django_extensions
│ ├── pages
│ │ ├── css
│ │ │ ├── styles.css
│ │ │ └── styles.css.map
│ │ ├── fonts
│ │ ├── images
│ │ ├── js
│ │ │ └── vue
│ │ │ ├── components
│ │ │ │ ├── cards
│ │ │ │ ├── inputs
│ │ │ │ ├── miniMenus
│ │ │ │ └── modals
│ │ │ ├── components.rollup.js
│ │ │ ├── components.rollup.roll.js
│ │ │ ├── data
│ │ │ ├── directives
│ │ │ ├── forms
│ │ │ ├── mixins
│ │ │ ├── views
│ │ │ └── vue-store.js
│ │ └── scss
│ │ ├── 01-utilities
│ │ ├── 02-vendors
│ │ ├── 03-base
│ │ ├── 04-layout
│ │ ├── 05-components
│ │ ├── 06-pages
│ │ ├── styles.css
│ │ ├── styles.css.map
│ │ └── styles.scss
│ └── rest_framework
└── templates
├── 403.html
├── _base.html
├── account
│ ├── login.html
│ ├── password_change.html
│ ├── password_change_done.html
│ ├── password_reset.html
│ ├── password_reset_done.html
│ ├── password_reset_from_key.html
│ ├── password_reset_from_key_done.html
│ └── signup.html
├── emails
│ ├── duet_invitation.html
│ └── duet_invitation.txt
├── includes
│ ├── _favicons.html
│ ├── _footer.html
│ ├── _header.html
│ └── forms
│ ├── _widgets.html
│ └── attrs.html
├── index.html
├── pages
│ ├── for_coaches.html
│ ├── for_directors.html
│ └── home.html
├── registration
│ ├── account-settings.password-change-done.html
│ ├── account-settings.password-change.html
│ ├── account-settings.profile-list.html
│ └── privacy-policy.html
└── studios
├── _studio_admin_base.html
├── my_studios.html
├── staff_list.html
├── studio_create.html
├── studio_detail.admin.html
├── studio_detail.html
├── studio_join.html
├── studio_list.html
├── studio_update.html
└── team_list.html
index.html,所有其他模板都从它继承
{% load static pipeline %}
<!doctype html>
<html class="no-js" lang="en">
<head>
... other varIoUs Meta tags ...
{% stylesheet 'twirlmate' %}
<!-- the above produces the path: /static/pages/scss/styles.css -->
{% block styles %}{% endblock %}
{% block extrastyles %}{% endblock %}
</head>
<body class="{% block body-class %}{% endblock %}" {% block body-attributes %}{% endblock %}>
<div class="main-wrapper" data-target="main-wrapper">
<a class="skip-to-main" href="#main">Skip to main content</a>
{% block header %}{% endblock header %}
{% block notifications %}{% endblock notifications %}
{% block main %}{% endblock main %}
{% block footer %}{% endblock footer %}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
{% javascript 'twirlmate' %}
{% javascript 'components' %}
{% block scripts %}{% endblock scripts %}
{% block extrascripts %}{% endblock extrascripts %}
</body>
</html>
已解决
结果发现有一个重复的、陈旧的文件,具有相同的名称和相同的路径。该模板正在寻找 /static/pages/scss/styles.css
,它以更新的形式存在于我的根静态目录中,正确的位置。但在 pages/static/pages/scss/styles.css
中还有一个文件,它一定是在之前对 settings.py
的更改期间生成的。不知何故,我猜该文件被反复拉入并覆盖更新版本。一旦我删除了陈旧的文件,一切就都解决了。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)