Serve Django and Angular with same nginx config

Question

I am trying to setup Django and Angular app with Uwsgi and nginx

My config :

upstream django {
    server unix:///home/deepankar/stuff/proj/server/project/mysite.sock; # for a file socket
}

# configuration of the server
server {
    # the port your site will be served on
    listen      80; 
    # the domain name it will serve for
    server_name _; # substitute your machine's IP address or FQDN
    charset     utf-8;

    # max upload size
    client_max_body_size 75M;   # adjust to taste

    # Django media
    location /media  {
        alias /path/to/your/mysite/media;  # your Django project's media files - amend as required                                             
    }   


    location / { 
        root /home/deepankar/stuff/proj/client/build; # your Django project's static files - amend as required
        try_files $uri $uri/ /index.html;
    }   

    # Finally, send all non-media requests to the Django server.
    location /api {
        uwsgi_pass  django;
        include     /etc/nginx/uwsgi_params; # the uwsgi_params file you installed
    }

How do I make sure that all /api gets routed to the uwsgi django server and / should get routed to the angular application which is compiled under the build folder.

Right now Everything gets routed to the angular app

Govind Sharma · Accepted Answer · 2019-05-18 05:59:54Z

I have integrated Django and Angular both together.

# Angular with Django nginx

upstream app_server {
    server unix:/home/<user>/run/gunicorn.sock fail_timeout=0;
}

server {
    listen 80;

    # add here the ip address of your server
    # or a domain pointing to that ip (like example.com or www.example.com)
    server_name <server_ip>;

    root /home/<user>/angular_project/dist/angular_project;
    index index.html;

    keepalive_timeout 5;
    client_max_body_size 4G;

    access_log /home/<user>/logs/nginx-access.log;
    error_log /home/<user>/logs/nginx-error.log;

    location /static/ {
        alias /home/<user>/django_project/static/;
    }

    location / { 
        try_files $uri $uri/ /index.html;
    }  

    location ~^/(admin|api) {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Forwarded-Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      add_header P3P 'CP="ALL DSP COR PSAa PSDa OUR NOR ONL UNI COM NAV"';
      proxy_redirect off;
      proxy_pass http://app_server;
    }
}

ohrstrom · Accepted Answer · 2016-06-13 08:27:31Z

1

Nginx tries the locations from 'top to down'. So you have to change the ordering so that /api comes before /:

location /api {
    uwsgi_pass  django;
    include     /etc/nginx/uwsgi_params; # the uwsgi_params file you installed
} 

location / { 
    root /home/deepankar/stuff/proj/client/build; # your Django project's static files - amend as required
    try_files $uri $uri/ /index.html;
}

answered Jun 13, 2016 at 8:27

ohrstrom

3,0003 gold badges22 silver badges34 bronze badges

Collectives™ on Stack Overflow

Serve Django and Angular with same nginx config

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related