我正在尝试配置Docker以在本地开发Angular应用程序,因为我有一个数据库和一个Node.js应用程序,我正在使用docker compose配置它。我正在寻找一个配置,在那里我可以使用我的编辑器在本地进行更改,Angular应该检测到从Docker中自动重新加载的更改(就像没有Docker时一样)。
我对Docker比较陌生,所以我的理解是在Dockerfile中使用COPY
语句意味着我的本地文件的副本被制作到镜像中,因此本地更改不会触发重新编译。我的理解是我需要将本地应用程序挂载为卷,并使其在/app
中可用,然后事情应该可以工作。然而,我使用的是Mac,基础镜像是基于Linux的(我使用的是FROM node:12-slim
),所以npm包必须在镜像中获取和构建。我从本地文件夹结构中删除了node_modules
。
为了实现这些目标,我是这样配置AngularDockerfile的
FROM node:12-slim
COPY package.json /app/package.json
WORKDIR /app
RUN npm install
RUN npm install -g @angular/cli@8.1.2
ENV PATH /app/node_modules/.bin:$PATH
RUN apt-get update
RUN apt-get install -y vim
RUN apt-get install -y curl
这就是我如何配置docker-compose.yml
文件
version: '3'
services:
... other services ...
blackmirrorhq:
image: <angular app image>
expose:
- 4200
ports:
- 4200:4200
restart: on-failure
volumes:
- <path to angular app>:/app
working_dir: /app
command: "npm install && npm install -g @angular/cli@8.1.2 && ng serve --open --host 0.0.0.0 --port 4200 --disable-host-check"
# command: "ng serve --open --host 0.0.0.0 --port 4200 --disable-host-check"
volumes:
postgres-volume:
我认为当docker compose启动时,node_modules文件夹会因为卷绑定而被覆盖。服务器无法引用丢失的包。所以,我使用docker-compose文件并使用命令:
npm install && npm install -g @angular/cli@8.1.2 && ng serve --open --host 0.0.0.0 --port 4200 --disable-host-check
然而,当它获取所有的包时,它并没有启动服务器。但是node_modules
文件夹被创建。
在此之后,我注解掉这一行,并取消注解掉仅启动服务器的下一行:
ng serve --open --host 0.0.0.0 --port 4200 --disable-host-check
有了这个,我就可以让它工作了。但是,我不认为这是正确的方法,我想知道我需要做什么改变才能正确地配置它。
1条答案
按热度按时间yr9zkbsy1#
为了让你安心,你最后使用的方法是正确的。如果你想知道为什么,请阅读下面的内容:
有一些以IDE为中心的实现使整个过程变得简单而简单,但由于我们不是特定于IDE的,所以我将使用一般的想法。
最流行的方法是完全在docker容器上开发,这意味着你没有(或至少不使用)任何本地环境。
其基本精神(正如您所指出的)正在制作一个安装了依赖项和CLI的基本容器(在本例中为angular CLI),然后运行此映像,并在容器启动和运行时进行更改,并让angular在我们开发时自动重新编译。现在,我们将代码连接到容器的方式是使用bind mounts,这允许我们从本地机器编辑器和运行的容器中看到相同的文件它。
下面是用于此用例简单的docker-composer和基本容器Dockerfile:
Dockerfile
因为我们不关心node_modules,所以我们可以将它们作为docker卷保存在容器中
docker-compose.yml
markfknight.dev的工作示例
如果您想看一个工作示例,this可能会帮助您理解这个概念