Serving Django and Vue with Nginx

Question

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:

Create a production build of the Vue app (npm run build)
Copy the Vue dist folder into a specific folder within the Django app
One of the Django urls is setup as a TemplateView which serves up the Vue index.html

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/...

The Vue files are just static files. You can do exactly the same thing as you have already done for /static and /media. — Daniel Roseman
– Daniel Roseman, Commented Oct 3, 2019 at 14:01
Thank you for your comment. I've made a little progress, it seems to almost be working. Please could you look at the EDIT in my post with the current issue. — darkpool
– darkpool, Commented Oct 3, 2019 at 15:19

Adnan · Accepted Answer · 2019-10-03 15:42:48Z

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'.

Collectives™ on Stack Overflow

Serving Django and Vue with Nginx

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related