Как настроить `ng serve`, чтобы поймать изменения в приложении dockersized Angular 2?

Я 'dockersizing' (надеюсь, это правильный термин), существующее приложение Angular 2, работающее на angular-cli (1.0.0-beta.31).

Я пытаюсь найти способ сделать ng serve catch когда я обновляю файл в своем рабочем каталоге и, следовательно, обновляю свое приложение (как обычно). В противном случае мне нужно docker-compose up --build каждый раз, когда я меняю файл...

EDIT. Идея, которую я изучаю, заключается в добавлении тома.

Здесь мой Dockerfile:

# Dockerizing Angular 2 Client App
# @link: https://scotch.io/tutorials/create-a-mean-app-with-angular-2-and-docker-compose

# Create image based on the official Node 7 image from dockerhub
FROM node:7

# Create a directory where our app will be placed
RUN mkdir -p /usr/src/app

# Change directory so that our commands run inside this new directory
WORKDIR /usr/src/app

# Copy dependency definitions
COPY package.json /usr/src/app

# Install dependecies
RUN npm install

# Get all the code needed to run the app
# **EDIT**: comment out this, so I can set-up a volume
# COPY . /usr/src/app

# Expose the port the app runs in
EXPOSE 4200

# Serve the app
CMD ["npm", "start"]

Здесь мой docker-compose.yml:

# specify docker-compose version
version: '2'

# Define the services/containers to be run
services:
  angular2app: # name of the service
    build: ./ # specify the directory of the Dockerfile
    ports:
      - "4200:4200" # specify port forewarding
    # **EDIT**: Setting-up the volume here
    volumes:
      - .:/usr/src/app

РЕДАКТИРОВАТЬ: без конфигурации тома - приложение собирается и запускается успешно. После настройки громкости выводится сообщение об ошибке:

Building angular2app
Step 1/7 : FROM node:7
 ---> b3a95b94bd6c
Step 2/7 : RUN mkdir -p /usr/src/app
 ---> Using cache
 ---> 2afb01ffe055
Step 3/7 : WORKDIR /usr/src/app
 ---> Using cache
 ---> 44d08fdb4a19
Step 4/7 : COPY package.json /usr/src/app
 ---> Using cache
 ---> 87bb4f71c13c
Step 5/7 : RUN npm install
 ---> Using cache
 ---> ba88a0e1e480
Step 6/7 : EXPOSE 4200
 ---> Using cache
 ---> 4fddacae8486
Step 7/7 : CMD npm start
 ---> Using cache
 ---> c5ac29bf85fc
Successfully built c5ac29bf85fc
Creating minterface_angular2app_1

ERROR: for angular2app  Cannot start service angular2app: Mounts denied: closed
ERROR: Encountered errors while bringing up the project.

Как настроить ng serve, чтобы уловить изменения в моем текущем рабочем каталоге и перестроить мое приложение Angular 2?

PS: Я с docker-compose версией 1.11.1 (сборка 7c5d5e4), работающей на Mac (Sierra 10.12.3) через Docker для Mac.

Ответы

Ответ 1

Вы можете использовать этот пакет npm: https://www.npmjs.com/package/supervisor Просто запустите процесс, используя этот процесс диспетчера, и укажите, какие папки он должен смотреть -w для изменений и перезапуска.

Надеюсь, что это поможет!

Ответ 2

Возможно, это не тот ответ, который вам нужен, но мы решаем эту проблему в нашем рабочем процессе dev:

  • Не запускайте ng serve в докере. Запустите его на своем хосте. Таким образом, вы избегаете всех ошибок обмена файлами с докером. И вы наверняка поразите их, есть известные проблемы с изменениями файлов на хосте, распространяющимся на Docker VM.

  • Установите обратный прокси-сервер в docker-compose, который проксирует запросы к вашему серверу и проекту angular. Скорее всего, вы уже это делаете.

    web:
  image: nginx
  ports:
    - "80:80"
  links:
    - backend
  extra_hosts:
    - "frontend:192.168.99.1"

    Обратите внимание, что вместо ссылки на frontend мы указываем extra_hosts для указания на наш IP-адрес хоста.

  • Добавьте IP-адрес в свой интерфейс lo0 на хосте, чтобы он был доступен из внутренней док-станции VM.

    sudo ifconfig lo0 inet 192.168.99.1/32 add

    Этот параметр не сохраняется при перезагрузке, поэтому вы снова это сделаете.

Единственное, что нужно позаботиться, это выбрать правильный IP-адрес, чтобы избежать конфликтов с локальной сетью и любым программным обеспечением VPN, которое вы можете использовать.

Надеюсь, что это поможет.

Ответ 3

У меня была аналогичная проблема. Webpack не следил за изменениями. См. https://webpack.js.org/configuration/watch/

Внутри webpack.common.js вы можете добавить

watchOptions: {
   poll: 1000, // a poll interval in milliseconds
},