Serving Django and Vue with Nginx - django

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

Answer 1

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