Dockerized Ionic 应用程序热重载不起作用

Question

我有一个现有的 Ionic 应用程序，我已经对其进行了 dockerized。构建和启动命令成功，我可以通过 http://localhost:8100/ionic-lab 访问该应用程序.但是，热重载不起作用。每当我编辑 HTML 或 CSS 时，这些更改也不会反射(reflect)出来。

我的码头文件:

FROM node:8
COPY package.json /opt/library/
WORKDIR /opt/library
RUN npm install -g cordova ionic && cordova telemetry off 
# && echo n | ionic start dockerized-ionic-app --skip-npm --v2 --ts
RUN npm install && npm cache verify
COPY . /opt/library
#CMD ["ionic", "serve", "--all"]

和 docker-compose.yml:

app:
  build: .
  ports:
    - '8100:8100'
    - '35729:35729'
  volumes:
    - .:/opt/library
    - /opt/library/node_modules
  command: ionic serve --lab

为什么会发生？有什么不见了？

更新:

docker-compose build --no-cache 的输出

D:\Development\personal_projects\library>docker-compose build --no-cache
Building app
Step 1/6 : FROM node:8
 ---> b87c2ad8344d                                                                                                      Step 2/6 : COPY package.json /opt/library/
 ---> 4422d0333b92
Step 3/6 : WORKDIR /opt/library
Removing intermediate container 1cfdd60477f9                                                                             ---> 1ca3dc5f5bd6                                                                                                      Step 4/6 : RUN npm install -g cordova ionic && cordova telemetry off
 ---> Running in d7e9bf4e6d7b
/usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova
/usr/local/bin/ionic -> /usr/local/lib/node_modules/ionic/bin/ionic
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/ionic/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ cordova@8.0.0
+ ionic@3.19.1
added 660 packages in 29.173s
You have been opted out of telemetry. To change this, run: cordova telemetry on.
Removing intermediate container d7e9bf4e6d7b
 ---> 3fedee0878af
Step 5/6 : RUN npm install && npm cache verify
 ---> Running in 8d482b23f6bb
> node-sass@4.5.3 install /opt/library/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.5.3/linux-x64-57_binding.node
Download complete
Binary saved to /opt/library/node_modules/node-sass/vendor/linux-x64-57/binding.node
Caching binary to /root/.npm/node-sass/4.5.3/linux-x64-57_binding.node

> uglifyjs-webpack-plugin@0.4.6 postinstall /opt/library/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js


> node-sass@4.5.3 postinstall /opt/library/node_modules/node-sass
> node scripts/build.js

Binary found at /opt/library/node_modules/node-sass/vendor/linux-x64-57/binding.node
Testing binary
Binary is fine
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 548 packages in 30.281s
Cache verified and compressed (~/.npm/_cacache):
Content verified: 1476 (55779072 bytes)
Index entries: 2306
Finished in 9.736s
Removing intermediate container 8d482b23f6bb
 ---> 5815e391f2c6
Step 6/6 : COPY . /opt/library
 ---> 5cc9637a678c
Successfully built 5cc9637a678c
Successfully tagged library_app:latest

D:\Development\personal_projects\library>

以及 docker-compose up 的输出:

D:\Development\personal_projects\library>docker-compose up
Recreating library_app_1 ... done
Attaching to library_app_1
         Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --nobrowser --lab - Ctrl+C to cancel
app_1  | [14:45:19]  watch started ...
app_1  | [14:45:19]  build dev started ...
app_1  | [14:45:19]  clean started ...
app_1  | [14:45:19]  clean finished in 78 ms
app_1  | [14:45:19]  copy started ...
app_1  | [14:45:19]  deeplinks started ...
app_1  | [14:45:20]  deeplinks finished in 60 ms
app_1  | [14:45:20]  transpile started ...
app_1  | [14:45:24]  transpile finished in 4.54 s
app_1  | [14:45:24]  preprocess started ...
app_1  | [14:45:24]  preprocess finished in 1 ms
app_1  | [14:45:24]  webpack started ...
app_1  | [14:45:24]  copy finished in 5.33 s
app_1  | [14:45:31]  webpack finished in 6.73 s
app_1  | [14:45:31]  sass started ...
app_1  | [14:45:32]  sass finished in 1.46 s
app_1  | [14:45:32]  postprocess started ...
app_1  | [14:45:32]  postprocess finished in 40 ms
app_1  | [14:45:32]  lint started ...
app_1  | [14:45:32]  build dev finished in 13.64 s
app_1  | [14:45:32]  watch ready in 13.73 s
app_1  | [14:45:32]  dev server running: http://localhost:8100/
app_1  |
         [OK] Development server running!
app_1  |      Local: http://localhost:8100
app_1  |      External: http://172.17.0.2:8100
app_1  |      DevApp: library@8100 on 1643dcb6c0d7
app_1  |
app_1  | [14:45:35]  lint finished in 2.51 s

Answer 1

您的 Dockerfile 和 Docker-Compose 完全满足您的需求。
与 - .:/opt/library行正确安装卷，您的本地更改也将在容器中生效。

如果您使用的是 Windows，问题是 Hyper-V 无法将本地文件更改正确传播到容器中。因此，服务程序无法捕获文件更改。

解决方案是直接使用 ng serve 并通过运行 ng serve 启用轮询。与 poll标志:ng serve --poll 200 --host=0.0.0.0 --port=8100 .

--poll 200每 200 毫秒正在积极寻找文件更改

--host=0.0.0.0设置主机。 0.0.0.0用于从其他容器访问

--port=8100用于获取与 ionic serve 使用的端口相同的端口(只是为了方便)