Контейнер Docker не перезагружает приложение Angular

У меня есть проблема с ng serve в моем контейнере докеров, запущенном docker-compose.

Dockerfile

FROM node:7.1

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json /usr/src/app
RUN npm install
RUN npm install -g angular-cli
COPY . /usr/src/app

EXPOSE 4200

CMD [ "npm", "start" ]'

И мой docker-compose.yml

web:
    build: .
    ports:
        - '8089:4200'
    volumes:
        - .:/usr/src/app/
    environment:
        - NODE_ENV=dev
    command: bash -c "npm start"

Все работает отлично, когда я запускаю его, но файл редактирования не вызывает перезагрузки приложения. Файл изменен, я уверен, потому что я проверяю его по ssh-соединению и редактируется файл в контейнере. Когда контейнер снова перезапускается, каждое изменение применяется. Я подумал, что когда я переключаюсь со строительным изображением только докеров, чтобы составить это, исчезнет, ​​но не делайте этого.

Когда я вызываю touch файл из docker exec webpack, перезагружайте весь файл, и он работает без перезагрузки контейнера.

У кого-то есть решение?

Ответы

Ответ 1

Я нашел решение для обеих проблем:

  • inotify → просто отредактируйте package.json в "scripts" раздел этой строки: "start": "ng serve --host 0.0.0.0 --poll", требуемый только для хоста Windows,

  • горячая перезагрузка → добавить expose 49153 в Dockerfile и порты - '49153:49153' в docker-compose.yml, как упомянуто @kstromeiraos.

Ответ 2

В Webpack используется порт для активной перезагрузки приложения. По умолчанию этот порт 49153.

Вы должны открыть и привязать этот порт в контейнере к хост-порту, и это должно решить вашу проблему.

Итак, добавьте это в свой Dockerfile.

FROM node:7.1

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json /usr/src/app
RUN npm install
RUN npm install -g angular-cli
COPY . /usr/src/app

EXPOSE 4200 49153

CMD [ "npm", "start" ]'

И это на ваш docker-compose.yml.

web:
    build: .
    ports:
        - '8089:4200'
        - '49153:49153'
    volumes:
        - .:/usr/src/app/
    environment:
        - NODE_ENV=dev
    command: bash -c "npm start"

Ответ 3

Мое решение с использованием узла: тонкий.

Нет необходимости копировать данные в контейнеры. Просто используйте тома.

Dockerfile:

ПРИМЕЧАНИЕ: --poll 1

FROM node:slim

RUN npm install @angular/[email protected] -g

RUN mkdir -p /home/boilerplate

WORKDIR /home/boilerplate

EXPOSE 4200

CMD ng serve --port 4200 --host 0.0.0.0 --poll 1

Написать:

  project:
    image: project
    build:
      context: .
      dockerfile: projectdir/Dockerfile
    volumes:
    - ./projectdir:/home/boilerplate
    ports:
    - 4200:4200

Ответ 4

Другое решение без опроса.

Справочная информация:

Я работаю над большими проектами Angular и React, опрос даже каждые 10 секунд (--poll 10000) генерирует много сетевого трафика (в диспетчере задач вы можете проверить производительность интерфейса docker nat). А это, в свою очередь, приводит к высокой загрузке процессора.

Решение:

Если вы используете phpStorm/другой продукт Intellij или код VS, вы можете добавить наблюдатели файлов. Я написал следующий скрипт, который помогает мне в этом:

#!/bin/bash

image="${*:1:1}"
file="${*:2}"
machine=$(docker ps --filter ancestor="$image" --format "{{.ID}}")

if [ -n "$machine" ]
  then
    docker exec "$machine" touch "$file"
fi

После этого я добавил следующий File Watcher (обратите внимание, что триггер отключен при внешних событиях): enter image description here

Примечания: Важно, чтобы ваш docker exec не имел параметра -it, поскольку tty или интерактивные параметры требуют использования winpty (находится там, где установлен git bash). Также это решение не специфично для Angular, оно более специфично для docker, работает одинаково для любого приложения webpack-dev-server.

Кроме того, phpStorm периодически показывает диалог File Cache Conflict о различии файлов. Чтобы отключить эту подсказку, можно отключить синхронизацию файлов. fooobar.com/questions/369001/...

Ответ 5

это работало отлично. Спасибо, это сводило меня с ума

Ответ 6

Решением может быть обертка chokidar, которая является зависимостью от angular упаковки. Я не знаю, был ли это статус в 2017 году. Вам не нужно выставлять какие-либо дополнительные порты. Просто используйте переменную окружения в вашем docker-compose.

Базовая конфигурация:

Dockerfile

CMD ng serve --host 0.0.0.0

докер-compose.yml

environment:
  - CHOKIDAR_USEPOLLING=true

Это должно перезагрузить ваш браузер. Проверено на Chrome и Angular 8

Пакет для дальнейшего изучения: https://github.com/paulmillr/chokidar