Using a Django project and static files in a subfolder of root

Question

I recently deployed a Django project to my DigitalOcean Droplet. I need to access it in a subfolder of root (i.e. www.domainname.com/). So far this works using the WSGI Aliasing in the apache config files. I am having trouble serving static js files though.

I am using the {% static %} tag in templates to do this. However my js files seem to always be replaced by the current page's html when I inspect them in the browser. Here are my static related settings in settings.py:

STATIC_URL = '/static/'
STATIC_ROOT = '/var/www/html/<project name>/static'

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

UPDATE 1

Here's my apache configuiration:

In sites-available/default:

<Directory /var/www/>
       Options Indexes FollowSymLinks MultiViews
       AllowOverride All
       Order allow,deny
       allow from all
</Directory>

<VirtualHost <project name>:8000>
    ServerName <project name>
    ServerAlias <domain>/<project name>
    ServerAdmin <email>

    DocumentRoot /var/www/html/<project name>
    WSGIScriptAlias /<project name>/ /var/www/html/<project name>/<project name>/wsgi.py

    ErrorLog /var/www/html/logs/error.log
    CustomLog /var/www/html/logs/custom.log combined
    WSGIPythonPath /var/www/html/<project name>
</VirtualHost>

In apache2.conf:

WSGIScriptAlias /<project name> /var/www/html/<project name>/<project name>/wsgi.py
WSGIPythonPath /var/www/html/<project name>

<Directory /var/www/html/<project name>>
   <Files wsgi.py>
       Require all granted
   </Files>
</Directory>

UPDATE 2

It appears the .js files are being requested by appending the static path to the path of the current page, i.e.

<domain name>.com/<project name>/<app name>/<page>/<project name>/static/js/<js file name>

yummies yummies · Accepted Answer · 2017-01-31T20:14:49

You need an Alias directive in your Apache configuration so your static files are served.

Unlike templates, which are rendered through Django views prior to being served, static files are generally served directly by the web server (or some separate service) for performance. After all you generally only want the file itself, so the overhead Django requires is unnecessary. This is discussed in Django's documentation here.

Without the Alias directive, the request is passed to Django for handling. Django changes the default behavior of Apache from serving files from DocumentRoot directly, to mapping URLs to views which then construct the response. So, depending on your urls.py arrangement, the static file request might result in a 404 page or a response (the HTML you're seeing) from a matching view.

To solve this, you can add

Alias /static/ /var/www/html/<project name>/static/

to your virtual host in your configuration file. This will tell Apache to serve files from your static directory when a request is made at a URI beginning with /static/.

For example, a URI of /static/index.js will cause Apache to serve the file /var/www/html/<project name>/static/index.js as a response.

Additionally you have an error in your VirtualHost. The address you're providing it is <project name>, which is not a valid option (see here). The virtual host address must be either an IP address, domain name, or the wildcard *.

Since <project name> is none of these, the virtual host is not matched to the anything, and the configuration within it is not applied. I would suggest fixing it by changing

<VirtualHost <project name>:8000>

to

<VirtualHost *:8000>

which will instead match on any host expected by the request.

Using a Django project and static files in a subfolder of root

1 Answers