Setting up Django, Nuxt, with Nginx and docker - django

Question

I am trying to create a docker image for all of the above services. I was able to get django set-up with a database and Nginx, but I am having a lot of trouble adding Nuxt to the mix and cannot get the Nuxt app to run properly and it is giving me constant errors that do not occur if I manually start the node server. I suspect that most of the issues are from auth and/or improper routing in Nginx, likely stemming from incorrectly setting up the appropriate files. Any advise on how to set-up these configuration files would be greatly appreciated!
My folder structure is as follows. The dockerfile inside the app directory corresponds to the django app
WebsiteProject/
├── app/
│ ├── frontend-nuxt/
| | ├──Dockerfile
| | └──nuxt.config.js
│ ├── nginx/
| | ├──Dockerfile
| | └──nginx_local.conf
| └──Dockerfile
└── docker-compose.yml
docker-compose.yml
version: '3.7'
services:
web:
build: ./app
command: gunicorn webapp.wsgi:application --bind 0.0.0.0:1339 --reload
entrypoint: ./entrypoint.sh
volumes:
- ./app/:/usr/src/app/
- static_volume:/usr/src/app/static
- media_volume:/usr/src/app/media
expose:
- 1339
env_file:
- ./.env.dev
depends_on:
- db
# - redis
frontend:
build: ./app/frontend-nuxt
volumes:
- ./app/frontend-nuxt/:/user/src/app/
expose:
- 3000
ports:
- 3000:3000
depends_on:
- web
command: npm run dev
db:
image: postgres:12-alpine
volumes:
- postgres_data:/var/lib/postgresql/data/
environment:
- POSTGRES_USER=webapp
- POSTGRES_PASSWORD=webapp
- POSTGRES_DB=webapp_dev
nginx:
build: ./app/nginx
volumes:
- static_volume:/usr/src/app/static
- media_volume:/usr/src/app/media
ports:
- 8085:80
depends_on:
- web
volumes:
postgres_data:
static_volume:
media_volume:
nginx_local.conf
upstream webapp {
server web:1339;
}
upstream frontend {
server frontend:3000;
}
server {
listen 80 default_server;
listen [::]:80 default_server;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
server_name webapp.com localhost:8085;
location / {
proxy_pass http://frontend;
proxy_redirect off;
proxy_buffering off;
proxy_set_header Host $host:8085;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
proxy_set_header X-Forwarded-Proto $scheme;
}
location ~ /(api|admin|static|account-auth|accounts|api-auth)/ {
proxy_pass http://webapp;
proxy_redirect off;
proxy_buffering off;
proxy_set_header Host $host:8085;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
proxy_set_header X-Forwarded-Proto $scheme;
}
location /static/ {
alias /usr/src/app/static/;
}
location /media/ {
alias /usr/src/app/media/;
}
}
Nuxt Dockerfile
FROM node:11.13.0-alpine
ENV HOST 0.0.0.0
ADD . /app
WORKDIR /app
EXPOSE 3000
RUN npm rebuild node-sass
nuxt.config.js auth and axios settings
axios: {
baseURL: 'http://localhost:8085/',
},
auth: {
strategies: {
local: {
endpoints: {
login: {
url: 'account-auth/token/login/',
method: 'post',
propertyName: 'auth_token',
},
logout: { url: 'account-auth/token/logout/', method: 'post' },
user: {
url: 'api/data/',
method: 'get',
propertyName: false,
},
},
tokenType: 'Token',
tokenName: 'Authorization',
},
},
redirect: {
login: '/accounts/login',
logout: '/',
callback: '/accounts/login',
home: '/'
},
},