为Angular应用程序配置docker-compose的正确方法

bvhaajcl  于 2023-04-11  发布在  Docker
关注(0)|答案(1)|浏览(199)

我正在尝试配置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

有了这个,我就可以让它工作了。但是,我不认为这是正确的方法,我想知道我需要做什么改变才能正确地配置它。

yr9zkbsy

yr9zkbsy1#

为了让你安心,你最后使用的方法是正确的。如果你想知道为什么,请阅读下面的内容:

有一些以IDE为中心的实现使整个过程变得简单而简单,但由于我们不是特定于IDE的,所以我将使用一般的想法。
最流行的方法是完全在docker容器上开发,这意味着你没有(或至少不使用)任何本地环境。
其基本精神(正如您所指出的)正在制作一个安装了依赖项和CLI的基本容器(在本例中为angular CLI),然后运行此映像,并在容器启动和运行时进行更改,并让angular在我们开发时自动重新编译。现在,我们将代码连接到容器的方式是使用bind mounts,这允许我们从本地机器编辑器和运行的容器中看到相同的文件它。
下面是用于此用例简单的docker-composer和基本容器Dockerfile:

Dockerfile

FROM node:lts
RUN mkdir /home/node/app && chown node:node /home/node/app
RUN mkdir /home/node/app/node_modules && chown node:node /home/node/app/node_modules
WORKDIR  /home/node/app
USER node
COPY --chown=node:node package.json package-lock.json ./
RUN npm ci --quiet
COPY --chown=node:node . .

因为我们不关心node_modules,所以我们可以将它们作为docker卷保存在容器中

docker-compose.yml

version: '3.7'
services:
  app:
    build: .
    command: sh -c "npm start"
    ports:
      - 4200:4200
    working_dir: /home/node/app
    volumes:
      - ./:/home/node/app
      - node_modules:/home/node/app/node_modules
volumes:
  node_modules:

markfknight.dev的工作示例
如果您想看一个工作示例,this可能会帮助您理解这个概念

相关问题