Home » vue » docker-compose Vue Connection Reset Error

docker-compose Vue Connection Reset Error

Posted by: admin November 26, 2021 Leave a comment

Questions:

I am trying to start my Vue.js and Django Application with docker-compose. I can access the Django server, but the Vue frontend answers with Error: The connection was reset. Here are my Files:

Dockerfile-django:

FROM alpine:latest

RUN apk add --update python3 py3-pip

WORKDIR /app/backend
COPY . .

RUN pip3 install -r requirements.txt

RUN python3 manage.py makemigrations
RUN python3 manage.py migrate

EXPOSE 8000

CMD [ "python3", "manage.py", "runserver", "0.0.0.0:8000" ]

Dockerfile-vue:

FROM alpine:latest

RUN apk add --update nodejs npm

WORKDIR /app/frontend
COPY . .

RUN npm install --save axios @vue/cli bootstrap-vue v-tooltip @popperjs/core jquery @vue/test-utils jest
RUN npm audit fix

RUN npm run build

EXPOSE 8080

CMD [ "npm", "run", "dev" ]

docker-compose.yml:

version: "3.8"
services:
  django-server:
    build:
      context: "./backend"
      dockerfile: "Dockerfile-django"
    ports:
      - "8000:8000"
    container_name: app-backend
  vue-ui:
    build:
      context: "./frontend"
      dockerfile: "Dockerfile-vue"
    ports:
      - "8080:8080"
    container_name: app-ui

Both containers start fine and as I said, I can access the Django server just fine. Only the frontend seems to be the problem.

Answers:

I fixed this issue by changing the HOST parameter in webpack.dev.conf.js from const HOST = process.env.HOST to const HOST = '0.0.0.0'. I can now access the frontend after starting the containers with docker-compose up. Now to fix communication between the containers!