Django Wagtail Deployment Static File Server

Question

After deployment today, for some reason, the project no longer shows style from items that would have been collected during the collectstatic process. I have full access to the files from any browser. I have checked all permissions. I have browsed to the site from the development server, and other machines to eliminate software\\font possibilities. No idea what's going on here.

I serve the files from a different server. Other django projects are unaffected. No other django projects use anything like wagtail though. Pulling my hair out at this point and probably just missing something simple. What am I missing?

base.py config

STATIC_ROOT = '/var/www/html/static.xxxxxx.net'
STATIC_URL = 'http://static.xxxxxx.net/'

MEDIA_ROOT = '/var/www/html/media.xxxxxx.net'
MEDIA_URL = 'http://media.xxxxxx.net/'

Checking for file existence on server:

-rw-rw-r-- 1 xxxxxx xxxxxx 13648 Aug 24 09:18 /var/www/html/static.xxxxxx.net/wagtailadmin/css/userbar.3d5222a7eba2.css

Checking CSS relative references

-rw-rw-r-- 1 xxxxxx xxxxxx 68812 Aug 24 09:18 /var/www/html/static.xxxxxx.net/wagtailadmin/css/../../wagtailadmin/fonts/opensans-regular.45f80416d702.woff2

Django Debug Toolbar shows 4 static files used for both the production and development environments. Everything is identical.

In the chrome inspect view, if I replace a relative CSS stylesheet link in the development environment with a link from the file server, it breaks the same way.

From:

/static/wagtailadmin/css/userbar.css

To:

http://static.xxxxxx.net/wagtailadmin/css/userbar.css

Again, I can stick that address in my browser, any browser, and I see the stylesheet. I really have no idea how my file server could be stopping browsers from processing CSS, but that's what it's starting to look like.

Update: in the chrome inspect view, if I remove a css reference that uses a stylesheet from my fileserver, the page loses all the style\\colors\\etc. If I reapply the link to my server, it applys the styles again. It seems to apply all the style except icons\\glyphs.

Update 2: If I change to STATIC_URL = '/static/' I get the styles... Until I turn debug back off :-/

Answer 1

Wagtail's recommended setup for STATIC_ROOT , STATIC_URL , MEDIA_ROOT , and MEDIA_URL is typically much simpler and the ..._URL declarations are typically not absolute references. I set things up in base.py like this:

PROJECT_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
BASE_DIR = os.path.dirname(PROJECT_DIR)

STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]

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

STATICFILES_DIRS = [
    os.path.join(os.path.join(BASE_DIR, directory_structure_down_to..., 'static'),
    --- include as many lines like above as necessary here ---
]

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Answer 2

If you use wagtail-react-streamfield , update it. The font wagtail.woff is duplicated there and it gets picked up first (before wagtail's original one) by Django's static subsystem when collecting statics.