Question

我有一个现有的Ionic app，我已经停靠了。 build和up命令成功，我可以在http://localhost:8100/ionic-lab访问该应用程序。但是，热重载并不起作用。每当我编辑HTML或CSS时，这些更改都不会反映出来。

我的dockerfile：

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-output的输出：

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无法将本地文件更改正确传播到容器中。因此，serve程序无法捕获文件更改。

解决方案是直接使用ng服务并通过运行带有ng serve标志：poll的{{1}}来启用轮询。

ng serve --poll 200 --host=0.0.0.0 --port=8100每200毫秒积极寻找文件更改
--poll 200设置主机。 --host=0.0.0.0过去可通过其他容器访问
0.0.0.0用于获得与离子发球用途相同的端口（仅为方便起见）

Answer 2

你说“热重装不起作用”，这是正确的。

如果你重新构建docker容器，那么只会看到代码更改，因为你的源代码需要在docker-container中复制。

只需运行docker-compose up -d或重建docker容器，然后您就会看到代码更改。

Answer 3

您正在将本地8100端口映射到cointainer 8100端口，这可以。您正在从容器中以外部方式运行离子。尝试“离子发球-外部”

Dockerized离子应用程序热重装不起作用

3 个答案: