angular - 为 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

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

标签： angulardockerdocker-compose

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 卷保存

码头工人-compose.yml

version: '3.7'
services:
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的工作示例

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