D
D
domanskiy2021-02-25 00:05:15
Docker
domanskiy, 2021-02-25 00:05:15

How to set docker-compose for VUEJS to auto-restart when changing files?

Set up docker-compose.yml. The database is launched on postgres and an external folder with saving data from the database
Backend on python on the FastAPI framework. Runs and works as it should. Auto-restart when changing local (not in the container) files.

Problem setting up Vue js. Everything starts, but when changing files in the folder mounted to the container, the changes are not reflected in the running one.
What am I doing wrong?
How to make the container with VUE react to changes in local files?

Project structure:
docker-compose.yml

\pprint_vue\
- Dockerfile

\FastAPI\
- Dockerfile

docker-compose.yml

version: '3.7'

#настройка сети 
networks:
  static-network:
    ipam:
      driver: default
      config:
        - subnet: 10.5.0.0/16
    


services:

  database:
    image: postgres:13 # имя контейнера
    container_name: "postgres_cont"
    ports:
      - "6532:5432"
    env_file:
      - pg-env.env # configure env postgres
    volumes:
      - E:\docker\volumes\postgres:/var/lib/postgresql/data
    restart: unless-stopped #рестарт если контейнер "вылетает"
    logging: #отключаем логирование в консоли
      driver: none
    networks:
      static-network:
        ipv4_address: 10.5.0.5


  app_fastapi:
    container_name: "app_FastAPI"
    build:
       context: ./FastAPI
       dockerfile: Dockerfile
    volumes:
      - ./FastAPI:/app_fastapi
    ports:
      - 8000:8000
    depends_on:
      - database
    entrypoint: ["python", "main.py"]
    restart: unless-stopped
    networks: #принудительно задаём IP
      static-network:
        ipv4_address: 10.5.0.6


  vue_frontend:
    container_name: vue_ui
    build: 
      context: ./pprint_vue
      dockerfile: Dockerfile
    volumes:
      - ./pprint_vue:/vue_crm
      - /vue_crm/node_modules
    ports:
      - "8080:8080"
    restart: unless-stopped
    depends_on:
      - database
      - app_fastapi
    networks: #принудительно задаём IP
      static-network:
        ipv4_address: 10.5.0.10


Dockerfile for pprint_vue
FROM node:15.10.0
ARG APP_DIR=vue_crm
WORKDIR /${APP_DIR}
COPY package*.json ./
RUN npm install --no-optional
EXPOSE 8080
CMD ["npm", "run", "serve"]

Answer the question

In order to leave comments, you need to log in

1 answer(s)
D
domanskiy, 2021-02-25
@domanskiy

Found a solution. 3 days spent
source
and more

environment:
      - CHOKIDAR_USEPOLLING=true

there is a file in pprint_vue folder
.dockerignore
.gitignore
.git
.idea
node_modules

As a result, it looks like this.
Dockerfile
FROM node:lts-alpine as build

ARG APP_DIR=app
WORKDIR /${APP_DIR}
ENV PATH /app/node_modules/.bin:$PATH

COPY package.json ./
RUN npm install [email protected]
RUN npm install   --no-progress --ignore-optional
RUN npm install @vue/cli -g

EXPOSE 5000

CMD ["npm", "run", "serve"]

docker-compose.yml

version: '3.9'

#настройка сети между контейнерами.
networks:
  static-network:
    ipam:
      driver: default
      config:
        - subnet: 10.5.0.0/16
    
services:

  database:
    image: postgres:13 # имя контейнера
    container_name: "postgres_cont"
    ports:
      - "6532:5432"
    env_file:
      - pg-env.env # configure env postgres
    volumes:
      - E:\docker\volumes\postgres:/var/lib/postgresql/data
    restart: unless-stopped #рестарт если контейнер "вылетает"
    logging: #отключаем логирование в консоли
      driver: none
    networks:
      static-network:
        ipv4_address: 10.5.0.5

  pgAdmin:
    image: dpage/pgadmin4 #имя контейнера
    container_name: "pgAdmin_cont"
    ports:
      - "5555:80"
    env_file:
      - pgadmin-env.env # configure pgAdmin
    depends_on:
      - database
    volumes:
      - E:\docker\volumes\pgAdmin:/var/lib/pgadmin
    restart: unless-stopped #рестарт если контейнер "вылетает"
    logging: #отключаем логирование в консоли
      driver: none
    networks:
      static-network:
        ipv4_address: 10.5.0.8

  app_fastapi:
    # image: python:3.8
    container_name: "app_FastAPI" #имя контейнера
    build:
       context: ./FastAPI
       dockerfile: Dockerfile
    volumes:
      - ./FastAPI:/app_fastapi
    ports:
      - 8000:8000
    depends_on:
      - database
    entrypoint: ["python", "main.py"]
    restart: unless-stopped #рестарт если контейнер "вылетает"
    networks: #принудительно задаём IP
      static-network:
        ipv4_address: 10.5.0.6


  vue_frontend:
    container_name: vue_ui
    build: 
      context: ./pprint_vue
      dockerfile: Dockerfile
    stdin_open: true
    tty: true
    environment:
      - CHOKIDAR_USEPOLLING=true
    volumes:
      - ./pprint_vue:/app
      - /app/node_modules
    ports:
      - "5000:5000"
    restart: unless-stopped #рестарт если контейнер "вылетает"
    depends_on:
      - app_fastapi
    networks: #принудительно задаём IP
      static-network:
        ipv4_address: 10.5.0.10

volumes:

  pprint_vue:
    name: pprint_vue

  FastAPI:
    name: FastAPI


Because changed the standard port for VUE. package.json changed a bit
package.json

"scripts": {
        "serve": "vue-cli-service serve --port 5000",
        "build": "vue-cli-service build"
    },

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question