Как прописать в docker-compose для VUEJS авторестарт при изменении файлов?

Question

[domanskiy]

Настроил docker-compose.yml. Запускается БД на постгресе и внешней папкой с сохранением данных БД
Бэкенд на пайтоне на фреймворке FastAPI. Запускается, работает как надо. Авторестарт при изменении локальных (не в контейнере) файлов.

Проблема настроить Vue js. Всё запускается, но при изменении файлов, в примантированной папке к контейнеру, изменения не отражаются в запущенном.
Что я делаю не так?
Как заставить реагировать контейнер с VUE на изменения в локальных файлах?

Структура проекта:
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 для 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 1

[domanskiy]

Нашел решение. 3 дня потратил
источник
и еще

environment:
      - CHOKIDAR_USEPOLLING=true

в папке pprint_vue есть файл

.dockerignore

.gitignore
.git
.idea
node_modules

В итоге выглядит следующим образом.

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 npm@latest
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

Т.к. поменял стандартный порт для VUE. package.json немного изменён

package.json

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

Comments

[Anton Kuzmichev]

Вопрос можно править, для этого не надо ответов создавать.
Как в vue авторелоад реализовывается в принципе?

[domanskiy]

Anton Kuzmichev, Если локально на пк проект запускаю через npm run serve то при изменении в локальных файлах, сервер рестартится и браузер показывает автоматом новую версию файлов.

Как я уже написал
Для FastAPI у меня всё работает.
Так же делал для Flask

Но с VyeJS не получается

[Anton Kuzmichev]

domanskiy, мда, странно, на первый взгляд всё ок, кроме разве что строки COPY package*.json ./ - кажется, что этот файл и так уже есть в рабочей папке исходников, вы его в себя же копируете? Но едва ли это влияет, а нормально в vue я не разбираюсь.

[domanskiy]

Anton Kuzmichev, package*.json это для того что бы разом package.json и package-lock.json копировал

Добавил в докерфайл RUN npm install @vue/cli -g
А в докеркомпосе
environment:
- CHOKIDAR_USEPOLLING=true

И всё заработало