Vue dev server doesn't start inside a docker container

Question

I want to make dev-configuration for my Dockerized Django(+gunicorn+db)+Vue+Nginx project, where i don't have to rebuild the frontend everytime and use vue dev server instead, specifically "vue-cli-service serve". Nginx listens on localhost:80 and will proxy "/api" requests to upstream django on port 8000 and the rest to upstream vue server on port 8080. Docker succesfully builds 4 containters, but then vue service dies instantly. that's what i get

Here is its Dockerfile:

FROM node:12-alpine   
WORKDIR /frontend
COPY package*.json .
RUN npm install
COPY . .
RUN ls -al
EXPOSE 8080
CMD ["npm", "run", "serve"]

(If i use RUN instead of CMD as a final command then the server gets built and the terminal hangs after webpack welcome message, but "docker-compose ps" from another tab shows no containers are up)

Here is a part of docker-compose.yml:

  frontend:
    build: ./frontend
    restart: on-failure
    container_name: vue
    expose:
       - 8080    
    volumes:
      - ./frontend:/home/frontend       
      - ./.env.dev:/home/frontend/.env:ro

project tree, if it helps

Makarov Pavel Makarov Pavel · Accepted Answer · 2020-09-14T11:32:04

I figured out what the problem was

i noticed that docker-composer ps and docker stats return different results. docker stats showed my node container, but it wasn't accessible neither through nginx, nor through 8080/8081.
I added a network to include all of my containers and node container became accessible. i made changes to .env and docker-compose.yaml.

networks:
  service_net:
    ipam:
      driver: default
      config:
        - subnet: ${PROJECT_NET}.0/24

for node service:

networks:

service_net:
ipv4_address: ${PROJECT_NET}.100

Vue dev server doesn't start inside a docker container

1 Answers