CODEWITHSUNDEEP
djangovue.jsnginx
darkpool
darkpool

Reputation: 14641

Serving Django and Vue with Nginx

I have a website which uses Django for the API and Vue for the frontend. Currently when I deploy the site I do the following:

By doing the above, Nginx in production simply serves up the Django app using gunicorn and everything works.

However I would prefer to have Nginx serve up the Vue index.html and static files. For example / will serve the Django app and /spa will serve the Vue app which will itself call the api.

Here is my current Nginx config:

upstream appserver_wsgi_app {
  server localhost:8000 fail_timeout=0;
}

server {
  listen 80;
  server_name www.example.com;
  rewrite ^(.*) https://$server_name$1 permanent;
}

server {
    server_name www.example.com;
    listen 443 ssl;
    ...
    ...
    ...
    location /static {
        autoindex on;
        alias /home/user/static_django_files/;
    }

    location /media {
        autoindex on;
        alias /home/user/media_django_files/;
    }

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_redirect off;
            if (!-f $request-filename) {
                proxy_pass http://appserver_wsgi_app;
                break;
            }
    }
}

What needs to be changed in Nginx so that it will serve the Vue index.html and static files as well as the Django app? Also, does anything need to change on the Vue side since im currently just calling the api as follows:

axios.post("/api/dosomething/", data)

EDIT

I have added the following to my nginx config and uploaded the Vue dist folder:

    location /spa {
        autoindex on;
        alias /path/to/dist/;
        try_files $uri $uri/ /index.html;
    }

I have also added the following to vue.config.js:

baseUrl: '/spa'

And to my Vue Router: mode: history

When restarting nginx, the index.html page for the vue app attempts to load in the browser but it cannot find the css and js files which it tries to find at:

www.example.com/spa/js/...
www.example.com/spa/css/...

Upvotes: 6

Views: 3830

Answers (1)

Adnan
Adnan

Reputation: 182

I have a similar setup where I run the Django REST backend with uwsgi on port 8090 and serve the production build of angular 4 frontend via nginx. Here is my nginx.conf

server {
    listen      80;
    server_name **url**;
    rewrite     ^   https:// **url** $request_uri? permanent;
}

server {
    listen       443 ssl;
    server_name  **url**;
    ssl_certificate **.pem;
    ssl_certificate_key **.key;

    root *path to your vue production build folder where index.html resides*;
    index index.html;

    error_page 502 /gateway.html;

    location /assests {
        autoindex on;
        alias *path to you Django assets *;
    }
    location /static {
        autoindex on;
        alias *path to you static files both django static files and vue related static files*;
    }

    // this to server the django admin
    location /manage/ {
        proxy_pass http://127.0.0.1:8090/manage/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    // this is for the REST backend
    location /api/{
        proxy_pass http://127.0.0.1:8090;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

I think similar setup should work for Django + Vue.js project. Let me know if it works.

** EDIT for your second issue create another location with '/spa/static' in nginx.conf similar to the '/static'.

Upvotes: 2

Related Questions