web-dev-qa-db-fra.com

Le conteneur Docker ne recharge pas Angular app

J'ai un problème avec ng serve dans mon conteneur Docker exécuté par 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" ]'

Et mon docker-compose.yml

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

Tout fonctionne très bien lorsque je l'exécute mais le fichier d'édition n'augmente pas le rechargement de l'application. Le fichier est changé, je suis sûr car je le vérifie par connexion ssh et le fichier dans le conteneur est édité. Lorsque le conteneur est redémarré à nouveau, chaque modification est appliquée. Je pensais que lorsque je passerais à la construction d'une image uniquement par docker pour composer, cela disparaîtrait, mais ce n'est pas le cas.

Lorsque j'appelle, touchez un fichier de docker execwebpack recharger tous les fichiers et cela fonctionne sans redémarrer le conteneur.

Quelqu'un a une solution?

angulardockerdocker-composecontainers
17
gargi258

J'ai trouvé une solution aux deux problèmes:

  1. inotify -> juste éditer package.json dans "scripts" sectionnez cette ligne: "start": "ng serve --Host 0.0.0.0 --poll", requis uniquement pour l'hôte Windows,

  2. rechargement à chaud -> ajouter expose 49153 dans Dockerfile et ports - '49153:49153' dans docker-compose.yml comme @kstromeiraos mentionné.

20
gargi258

Webpack utilise un port pour effectuer un rechargement en direct de l'application. Ce port est 49153 par défaut.

Vous devez exposer et lier ce port du conteneur au port hôte et cela devrait résoudre votre problème.

Alors, ajoutez ceci à votre 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" ]'

Et ceci à votre docker-compose.yml.

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

Ma solution utilisant node: slim.

Pas besoin de copier les données dans des conteneurs. Utilisez simplement des volumes.

Dockerfile:

NOTE : --poll 1

FROM node: slim 
 
 RUN npm install @ angular/cli @ latest -g 
 
 RUN mkdir -p/home/kettleplate 
 
 WORKDIR /home/boilerplate réf. ______________________ _______________________________________ EXPOSE 4200 
 
 CMD ng serve --port 4200 --Host 0.0.0.0 --poll 1

Composer:

 projet: 
 image: projet 
 build: 
 contexte:. 
 dockerfile: projectdir/Dockerfile 
 volumes: 
 - ./projectdir:/home/boilerplate
 ports: 
 - 4200: 4200
9
quasipolynomial

Une autre solution sans interrogation.

Contexte:

Je travaille sur de grands projets Angular et React, l'interrogation même toutes les 10 secondes (--poll 10000) produit beaucoup de trafic réseau (dans le gestionnaire de tâches, vous pouvez vérifier les performances de l'interface nat du docker). Et à son tour, il produit une charge CPU élevée.

Solution:

Si vous utilisez phpStorm/d'autres produits Intellij ou du code VS, vous pouvez ajouter des observateurs de fichiers. J'ai écrit le script suivant qui m'aide avec ça:

#!/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

Après cela, j'ai ajouté File Watcher suivant (notez que le déclencheur est désactivé sur les événements externes): enter image description here

Remarques: Il est important que votre docker exec n'a pas de paramètre -it comme paramètres tty ou interactifs nécessitent d'utiliser winpty (situé là où git bash est installé). De plus, cette solution n'est pas Angular spécifique, elle est plus spécifique à docker, fonctionne de la même manière pour n'importe quelle application webpack-dev-server.

De plus, phpStorm affiche périodiquement File Cache Conflict dialogue sur la différence de fichier. Pour désactiver cette invite, vous pouvez désactiver la synchronisation des fichiers. https://stackoverflow.com/a/6628645

2
laser

Une solution peut être le wrapper chokidar, qui est une dépendance du package angular. Je ne sais pas, si c'était le statut en 2017. Vous n'avez pas besoin d'exposer de ports supplémentaires. Juste utilisez une variable d'environnement dans votre docker-compose.

Configuration de base:

Dockerfile

CMD ng serve --Host 0.0.0.0

docker-compose.yml

environment:
  - CHOKIDAR_USEPOLLING=true

Cela devrait recharger à chaud votre navigateur. Testé sur Chrome et Angular 8

Paquet pour une enquête plus approfondie: https://github.com/paulmillr/chokidar

1
hmartini