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

Question

我正在尝试配置 Docker 以在本地开发 Angular 应用程序，并且由于我有一个数据库和一个 Node.js 应用程序，所以我正在使用 docker compose 配置它。我正在寻找一种配置，可以使用编辑器在本地进行更改，并且 Angular 应该检测到从 Docker 内部自动重新加载的更改（就像没有 Docker 时会发生的情况一样）。

我对 Docker 比较陌生，所以我的理解是使用COPYDockerfile 中的语句意味着将本地文件的副本制作到映像中，因此本地更改不会触发重新编译。我的理解是，我需要将本地应用程序安装为卷，并使其在内部可用，/app然后一切就可以正常工作了。但是，我使用的是 Mac，并且基础映像是基于 Linux 的（我正在使用FROM node:12-slim），因此必须在映像内获取并构建 npm 包。我node_modules从本地文件夹结构中删除了。

为了实现这些目标，这就是我配置 Angular Dockerfile 的方式

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

有了这个，我就能让它发挥作用。但是，我认为这不是处理它的正确方法，并且想了解我需要进行哪些更改才能正确配置它。

Answer 1

放心吧，你最后用的方法是正确的。如果您想了解原因，请阅读以下内容：

有一些以 IDE 为中心的实现，使整个过程变得有点无知和简单，但由于我们不是特定于 IDE 的，所以我将使用一般想法。

最流行的方法是完全在 docker 容器上开发，这意味着您没有（或至少不使用）任何本地环境。

它的基本要点（正如您所指出的）是使用我们的依赖项和安装的 CLI（在本例中为 Angular CLI）制作一个基本容器，然后运行此映像，在容器启动并运行时进行更改，并让 Angular 在我们运行时自动重新编译发展。现在，我们将代码连接到容器的方式是使用绑定安装，它允许我们从本地机器编辑器和运行它的容器中看到相同的文件。

这是针对此用例的简单 docker-compose 和基本容器 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

如果您想查看一个工作示例，这可能会帮助您掌握这个概念