[Django]-How to deploy static website connecting to Django RESTful API?

2👍

Your architecture is already clean, no need to make Django know about grunt or serve static files, and no need to use JS hacks to guess port numbers

Reverse Proxy

Use a reverse proxy like nginx or any other web server you like as a front end to both the static files and the REST API.

In computer networks, a reverse proxy is a type of proxy server that
retrieves resources on behalf of a client from one or more servers.
These resources are then returned to the client as though they
originated from the proxy server itself. (Wikipedia)

I will outline the important aspects without going into too much detail:

URL for the REST API

We make configs so that nginx will forward the API requests to Django

location /api {
    proxy_pass http://127.0.0.1:8000;  # assumes Django listens here
    proxy_set_header Host $http_host;  # preserve host info
}

So the above assumes your Django REST is mapped to /api and runs on port 8000 (e.g. you can run gunicorn on that port, or any other server you like)

http://nginx.org/en/docs/http/ngx_http_proxy_module.html

URL for our front end app

Next nginx will serve the static files that come out of grunt, by simply pointing it to the static folder

location / { alias /app/static/; }

The above assumes your static resources are in /app/static/ folder (like index.html, your CSS, JS etc). So this is primarily to load your BackboneJS app.

Django static files

Next step is not required, but if you have static files that you use with the Django app (static files that are generated with ./manage.py collectstatic, e.g. the django admin or the UI of Django REST Framework etc), simply map according to your Django settings.py STATIC_URL and STATIC_ROOT

location /static { alias /app/django_static_root/; }

/static and django_static_root being the STATIC_URL and STATIC_ROOT respectively

To sum up

So e.g. when you hit example.com/, nginx simply serves up the static files, then when a JS script makes REST call to /api, it gets trapped in the /api nginx location and gets forwarded to Django

End result is, example.com/ and example.com/api both hit the same front end web server, which proxies them to the right places

So there you have it, reserve proxying solves your ports and subdomain issues (and many others, like slow static files from Django and same-origin policies in web browsers and firewalls not liking anything besides default HTTP and HTTPS ports)

👤bakkal

Leave a comment