Configuring Axios for django-vuejs-nginx-docker

Question

I'm using the stack described in the title and everything is fine in my dev environment so far. I used to have Docker containers both for my backend and my frontend with hot reload for developing.

But I'm now currently preparing preprod environment with Nginx. It works, I have Nginx serving my built frontend.

But with my previous environment, I had Axios configured to point directly at the backend container for the requests. Thus, when I enter an URL in my browser, it's Nginx who logs the request and serves my Vue SPA. But after that, it's the Vue SPA that make requests directly to the backend container and Nginx doesn't see anything.

I guess I should make Axios point to the Nginx server itself (so itself since Axios is used in the Vue SPA which is served by the Nginx container), with a location like location /api/ or something similar so that Nginx sees all these request and proxy_pass them to the backend container ?

The 1st question is :

In a multi-container configuration

• Nginx serving vue built SPA
• Django backend API

Should Axios be pointing to Nginx directly to have a centralized point of logging ? And also Nginx would handle ALL queries rather than only the one typed directly in the browser URL bar.

The 2nd question is :

From a logging perspective. Should Nginx only be aware of requests coming from the browser ? Thus should I let it as is and instead gather logging of the requests made by the Vue SPA (axios) in gunicorn and/or Django ?

Thanks in advance.

Answer 1

I finally ended up by targeting my Nginx server in pre-production mode, while in development mode, Axios requests are targeting my backend container directly. Like so, Nginx handles every requests possible and is responsible of routing the requests to the proper container/service/...

This can be done like so :

import axios from 'axios'

const axiosInstance = axios.create({
  baseURL: process.env.NODE_ENV === 'production'
    ? 'http://localhost/api/'
    : 'http://localhost:8001/api/',
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json'
  }
})

export default axiosInstance