Question

我正在进行“码头化”活动。（我希望这是正确的术语）现有的Angular 2应用程序，运行在ng serve（1.0.0-beta.31）。

每当我更新工作目录中的文件时，我都在努力找到一种方法来捕获docker-compose up --build，因此 - 刷新我的应用程序（像往常一样）。否则，我每次更改文件时都需要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

如何配置#spec/features/visitors/sign_up_spec.rb feature 'Sign Up' do scenario 'visitor can sign up with valid email address and password' do visit new_user_registration_path fill_in 'user_email', with: "#{SecureRandom.hex}}@example.com" fill_in 'user_password', with: "password" click_button 'Sign up' #other code here end end以捕获当前工作目录中的更改并重新构建我的Angular 2应用程序？

PS：我使用 docker-compose 版本1.11.1（版本7c5d5e4），在 Mac （Sierra 10.12.3）上通过 Docker for Mac运行

Answer 1

您可以使用此npm包：https://www.npmjs.com/package/supervisor 只需使用该超级用户进程运行该进程，并指定它应该监视哪些文件夹-w进行更改并重新启动。

希望有所帮助！

Answer 2

这可能不是您所追求的答案，但这是我们在开发工作流程中解决此问题的方法：

不要在泊坞窗中运行ng serve。在您的主机上运行它。这样您就可以避免使用docker进行文件共享的所有错误。您肯定会遇到它们，主机上的文件更改会传播到Docker VM时出现已知问题。
在docker-compose中设置反向代理，代理对后端和角项目的请求。最有可能的是，你已经这样做了。
```
web:
  image: nginx
  ports:
    - "80:80"
  links:
    - backend
  extra_hosts:
    - "frontend:192.168.99.1"
```
请注意，我们指定frontend指向我们的主机IP地址，而不是链接到extra_hosts。
将IP地址添加到主机上的lo0接口，以便可以从docker VM内部访问它。
```
sudo ifconfig lo0 inet 192.168.99.1/32 add
```
此设置在重新启动时不会保留，因此您将再次执行此操作。

唯一需要注意的是选择一个合理的IP地址，以避免与您的本地网络和您可能正在使用的任何VPN软件发生冲突。

希望这有帮助。

Answer 3

我有类似的问题。 Webpack并没有关注变化。见https://webpack.js.org/configuration/watch/

在webpack.common.js中，您可以添加

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

如何配置`ng serve`来捕获dockersized Angular 2应用程序中的更改？

3 个答案: