Docker 文档指南：使用容器进行 Angular 开发-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00885/article/details/148548486

Docker 文档指南：使用容器进行 Angular 开发

docs Source repo for Docker's Documentation 项目地址: https://gitcode.com/gh_mirrors/docs3/docs

前言

在现代前端开发中，Docker 已经成为不可或缺的工具。本文将详细介绍如何利用 Docker 容器为 Angular 应用程序搭建高效的开发环境，实现开发与生产环境的无缝切换。

环境准备

在开始之前，请确保已完成以下准备工作：

已安装最新版 Docker 和 Docker Compose
已完成 Angular 应用的容器化（参考容器化 Angular 应用指南）
具备基本的 Angular 开发经验

开发环境架构设计

我们将采用双环境架构：

开发环境：基于 Node.js 的 Angular 开发服务器，支持热重载
生产环境：使用 Nginx 提供静态文件服务

这种架构的优势在于：

开发环境提供实时反馈
生产环境模拟真实部署场景
保持开发与生产环境的一致性

开发环境配置详解

1. 创建开发专用 Dockerfile

Dockerfile.dev 是专为开发环境设计的构建文件，其核心特点包括：

# 使用 Alpine 版本的 Node.js 镜像，体积小巧
ARG NODE_VERSION=22.14.0-alpine

FROM node:${NODE_VERSION} AS dev

# 明确设置开发环境标识
ENV NODE_ENV=development

WORKDIR /app

# 分阶段复制文件优化构建缓存
COPY package.json package-lock.json ./

# 使用缓存加速依赖安装
RUN --mount=type=cache,target=/root/.npm npm ci

COPY . .

# 暴露 Angular 开发服务器默认端口
EXPOSE 4200

# 启动开发服务器并允许外部访问
CMD ["npm", "start", "--", "--host=0.0.0.0"]

关键点说明：

使用 Alpine 基础镜像减少体积
明确设置 NODE_ENV=development 确保开发模式
利用 Docker 构建缓存优化依赖安装速度
开发服务器监听 0.0.0.0 允许宿主机访问

2. 配置 Docker Compose 多服务环境

compose.yaml 文件定义了完整的服务架构：

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

配置解析：