[英]How to configure `ng serve` to catch changes in a dockersized Angular 2 app?
我正在'dockersizing'(我希望这是正确的词)一个现有的Angular 2应用程序,该应用程序在angular-cli
(1.0.0-beta.31)上运行。
每当我更新工作目录中的文件时,我都在努力寻找一种使ng serve
捕获的方法,因此-像往常一样刷新我的应用程序。 否则,我每次更改文件时都需要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
来捕获当前工作目录中的更改并重新构建Angular 2应用程序?
PS:我使用的是docker -compose版本1.11.1(内部版本7c5d5e4),该版本通过Docker for Mac在Mac (Sierra 10.12.3)上运行。
您可以使用以下npm软件包: https ://www.npmjs.com/package/supervisor只需使用该supervisor进程运行该进程,并指定它应监视-w
文件夹以进行更改并重新启动。
希望有帮助!
这可能不是您想要的答案,但是这是我们在开发工作流程中解决此问题的方式:
不要在docker中运行ng serve
。 在您的主机上运行它。 这样,您可以避免与Docker共享文件的所有错误。 您将肯定会碰到它们,传播到Docker VM的主机上的文件更改存在已知问题。
在docker-compose
中设置反向代理,以代理对后端和angular项目的请求。 很可能您已经在这样做了。
web: image: nginx ports: - "80:80" links: - backend extra_hosts: - "frontend:192.168.99.1"
请注意,我们没有指定链接到frontend
,而是指定extra_hosts
指向我们的主机IP地址。
将IP地址添加到主机上的lo0接口,以便可以从docker VM内部访问它。
sudo ifconfig lo0 inet 192.168.99.1/32 add
此设置不会在重新启动后持续存在,因此您将再次进行设置。
这里唯一需要注意的是选择一个合理的IP地址,以避免与您的本地网络和您可能使用的任何VPN软件冲突。
希望这可以帮助。
我有一个类似的问题。 Webpack不在监视更改。 参见https://webpack.js.org/configuration/watch/
在webpack.common.js中,您可以添加
watchOptions: {
poll: 1000, // a poll interval in milliseconds
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.