Nginx Question posted in
The official documentation can be found here.

How to set axios baseURL for VueJS app if backend is in the same docker container – Nginx

I have the app deployed in one docker container:

  1. Frontend – VueJS (served by Nginx)
  2. Backend – Flask (gunicorn)

Dockerfile:

# Builder
FROM node:10-alpine as builder
WORKDIR /vue-ui
COPY ./frontend/package*.json ./
RUN npm install
COPY ./frontend .
RUN npm run build

#Production container
FROM nginx:alpine as production-build

WORKDIR /app
RUN apk update && apk add --no-cache python3 && 
    python3 -m ensurepip && 
    rm -r /usr/lib/python*/ensurepip && 
    pip3 install --upgrade pip setuptools && 
    if [ ! -e /usr/bin/pip ]; then ln -s pip3 /usr/bin/pip ; fi && 
    if [[ ! -e /usr/bin/python ]]; then ln -sf /usr/bin/python3 /usr/bin/python; fi && 
    rm -r /root/.cache
RUN apk update && apk add postgresql-dev gcc python3-dev musl-dev libxslt-dev libffi-dev


COPY ./.nginx/nginx.conf /etc/nginx/nginx.conf
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /vue-ui/dist /usr/share/nginx/html
COPY ./backend/requirements.txt .
COPY ./backend/requirements.txt .
RUN pip install -r requirements.txt
RUN pip install gunicorn
COPY ./backend .
ENV DB_URL_EXTERNAL=postgres://logpasstodb/maindb
#ENV DB_URL_EXTERNAL=$DB_URL_EXTERNAL
EXPOSE 80 5432
#ENTRYPOINT ["nginx", "-g", "daemon off;"]
CMD gunicorn --chdir / -b 0.0.0.0:5000 app:create_app --daemon && 
      nginx -g 'daemon off;'

When the frontend trying to send a request to the flask app, getting the following:

POST http://localhost:5000/login net::ERR_CONNECTION_REFUSED

Axios baseURL set to axios.defaults.baseURL = 'http://localhost:5000/';. Also, the same issue if its changed to docker internal host 172.17.0.2.

The main thing is if I’m running the backend on my local machine, where docker container deployed, the application (frontend) can successfully connect to it.

nginx.conf:

worker_processes 4;

events { worker_connections 1024; }

http {
    server {
        listen 80;
        server_name localhost;

        location / {
            root  /usr/share/nginx/html;
            index index.html index.htm;
            include /etc/nginx/mime.types;
            try_files $uri $uri/ /index.html;
        }
    }
}

Could you please suggest, how to set baseURL correctly or it could be the problem with Nginx confs?

Tags:

2

Answers


  1. 0

    You have exposed ports 80 and 5432, but not the port 5000 which is listened by backend application.

    Expose port 5000 and set baseUrl to :5000

    Login or Signup to reply.
  2. 0

    Alternatively, you could add extra mapping into your NGINX conf

    location /api/ {
    proxy_pass localhost:5000;
}

    And then set baseUrl to localhost:80/api/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search