web-dev-qa-db-ja.com

DockerコンテナがリロードしないAngular app

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接続で確認してコンテナ内のファイルを編集しているのでファイルが変更されたと確信しています。コンテナが再起動されると、すべての変更が適用されます。これを作成するためにドッカーだけで建物のイメージに切り替えると、これは消えるだろうと思いましたが、消えませんでした。

docker execwebpackからtouch touchファイルを呼び出すと、すべてのファイルがリロードされ、コンテナーを再起動しなくても機能します。

誰かが解決策を持っていますか？

angulardockerdocker-composecontainers
17
gargi258

私は両方の問題の解決策を見つけました：

  1. inotify->編集package.json"scripts"この行のセクション："start": "ng serve --Host 0.0.0.0 --poll"、Windowsホストにのみ必要、

  2. ホットリロード->追加expose 49153 in Dockerfileおよびポート- '49153:49153'docker-compose.yml @kstromeiraosのような。

20
gargi258

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"
14
kstromeiraos

Node：slimを使用した私のソリューション。

データをコンテナーにコピーする必要はありません。ボリュームを使用するだけです。

Dockerfile：

[〜＃〜]ノート[〜＃〜]：--poll 1

FROM node：slim 
 
 RUN npm install @ angular/cli @ latest -g 
 
 RUN mkdir -p/home/boilerplate 
 
 WORKDIR /home/boilerplate

EXPOSE 4200 
 
 CMD ng serve --port 4200 --Host 0.0.0.0 --poll 1

作成：

プロジェクト：
イメージ：プロジェクト
ビルド：
コンテキスト：。
 dockerfile：projectdir/Dockerfile 
ボリューム：
-./projectdir:/home/boilerplate
 ports：
-4200：4200
9
quasipolynomial

ポーリングなしの別のソリューション。

背景：

私は大規模なAngularおよびReactプロジェクトを扱っています。10秒ごとにポーリングしても（--poll 10000）、ネットワークトラフィックが大量に発生します（タスクマネージャでパフォーマンスを確認できます） docker natインターフェース）そして、高いCPU負荷を生み出します。

ソリューション：

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

注：ttyまたはインタラクティブパラメータはwinptyを使用する必要があるため、docker execにパラメータ-itがないことが重要です（git bashがある場所にあります）インストール済み）。また、このソリューションはAngular固有ではありません。Docker固有であり、どのwebpack-dev-serverアプリでも同じように機能します。

また、phpStormはファイルの違いについてFile Cache Conflictダイアログを定期的に表示します。このプロンプトを無効にするには、ファイルの同期をオフにします。 https://stackoverflow.com/a/6628645

2
laser

解決策は、angularパッケージの依存関係であるchokidarラッパーです。2017年のステータスであるかどうかはわかりません。追加のポートを公開する必要はありません。 docker-composeで環境変数を使用します。

基本構成：

Dockerfile

CMD ng serve --Host 0.0.0.0

docker-compose.yml

environment:
  - CHOKIDAR_USEPOLLING=true

これにより、ブラウザがホットリロードされます。 ChromeおよびAngular 8

さらなる調査のためのパッケージ： https://github.com/paulmillr/chokidar

1
hmartini