Share feedback
Answers are generated based on the documentation.

使用容器进行 Angular 开发

Table of contents

先决条件

完成 容器化 Angular 应用程序。

概述

在本节中，您将学习如何使用 Docker Compose 为您的容器化 Angular 应用程序设置生产环境和开发环境。此设置允许您通过 Nginx 提供静态生产构建，并使用 Compose Watch 在容器内高效开发。

您将学习如何：

  • 为生产和开发配置独立的容器
  • 在开发中启用使用 Compose Watch 的自动文件同步
  • 实时调试和预览更改，无需手动重新构建

自动更新服务（开发模式）

使用 Compose Watch 将源文件更改自动同步到您的容器化开发环境中。这提供了无缝、高效的开发体验，无需手动重启或重新构建容器。

步骤 1：创建开发 Dockerfile

在项目根目录中创建一个名为 Dockerfile.dev 的文件，内容如下：

# =========================================
# 阶段 1：开发 - Angular 应用程序
# =========================================

# 定义要使用的 Node.js 版本（使用 Alpine 以减小镜像体积）
ARG NODE_VERSION=24.12.0-alpine

# 设置开发的基础镜像
FROM node:${NODE_VERSION} AS dev

# 设置环境变量以指示开发模式
ENV NODE_ENV=development

# 设置容器内的工作目录
WORKDIR /app

# 首先仅复制依赖文件以优化 Docker 缓存
COPY package.json package-lock.json* ./

# 使用 npm 安装依赖项，并启用缓存以加速后续构建
RUN --mount=type=cache,target=/root/.npm npm install

# 将所有应用程序源文件复制到容器中
COPY . .

# 暴露 Angular 开发服务器使用的端口（默认为 4200）
EXPOSE 4200

# 启动 Angular 开发服务器并将其绑定到所有网络接口
CMD ["npm", "start", "--", "--host=0.0.0.0"]

此文件使用开发服务器为您的 Angular 应用程序设置了一个轻量级的开发环境。

步骤 2：更新您的 compose.yaml 文件

打开您的 compose.yaml 文件并定义两个服务：一个用于生产 (angular-prod)，一个用于开发 (angular-dev)。

以下是 Angular 应用程序的示例配置：

services:
  angular-prod:
    build:
      context: .
      dockerfile: Dockerfile
    image: docker-angular-sample
    ports:
      - "8080:8080"

  angular-dev:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "4200:4200"
    develop:
      watch:
        - action: sync
          path: .
          target: /app
  • angular-prod 服务使用 Nginx 构建并提供您的静态生产应用程序。
  • angular-dev 服务运行您的 Angular 开发服务器，支持实时重新加载和热模块替换。
  • watch 触发与 Compose Watch 的文件同步。
Note

更多详情，请参阅官方指南： 使用 Compose Watch。

完成前面的步骤后，您的项目目录现在应包含以下文件：

├── docker-angular-sample/
│ ├── Dockerfile
│ ├── Dockerfile.dev
│ ├── .dockerignore
│ ├── compose.yaml
│ ├── nginx.conf
│ └── README.Docker.md

步骤 4：启动 Compose Watch

从项目根目录运行以下命令以在观察模式下启动容器

$ docker compose watch angular-dev

步骤 5：使用 Angular 测试 Compose Watch

要验证 Compose Watch 是否正常工作：

  1. 在文本编辑器中打开 src/app/app.component.html 文件。

  2. 找到以下行：

    <h1>Docker Angular Sample Application</h1>

  3. 将其更改为：

    <h1>Hello from Docker Compose Watch</h1>

  4. 保存文件。

  5. 在浏览器中打开 http://localhost:4200。

您应该会看到更新后的文本立即出现，而无需手动重新构建容器。这证实了文件监视和自动同步按预期工作。

总结

在本节中，您使用 Docker 和 Docker Compose 为您的 Angular 应用程序设置了一个完整的开发和生产工作流程。

您已完成以下工作：

  • 创建了 Dockerfile.dev 以通过热重载简化本地开发
  • 在您的 compose.yaml 文件中定义了独立的 angular-dev 和 angular-prod 服务
  • 启用了使用 Compose Watch 的实时文件同步，以获得更流畅的开发体验
  • 通过修改和预览组件验证了实时更新是否无缝工作

借助此设置，您现在可以完全在容器内构建、运行和迭代您的 Angular 应用程序——在各个环境中高效且一致地进行。

相关资源

通过这些指南加深您的知识并改进您的容器化开发工作流程：

后续步骤

在下一节中，您将学习如何在 Docker 容器内为您的 Angular 应用程序运行单元测试。这确保了在所有环境中进行一致的测试，并消除了对本地机器设置的依赖。

在容器中运行 Angular 测试 »