selfbits/compose-angular

Angular CLI环境镜像（支持Docker-in-Docker）

概述

本镜像提供了预配置的Angular CLI开发环境，并集成docker-in-docker（DinD）支持。旨在为开发人员和CI/CD流程提供一致的工作环境，可直接在容器内完成Angular应用的创建、开发、构建，以及Docker镜像的构建和推送等操作。

核心功能和特性

• 预安装Angular CLI：包含最新稳定版Angular CLI，支持Angular项目的全生命周期管理
• Docker-in-Docker支持：集成Docker引擎，允许在容器内部执行docker命令，实现容器内构建和管理Docker镜像
• 开发工具集成：包含Node.js、npm/yarn包管理器，满足Angular开发依赖需求
• 环境隔离：提供独立的开发环境，避免本地环境配置差异导致的问题
• 灵活挂载：支持将本地项目目录挂载到容器，实现实时开发和代码同步

使用场景和适用范围

• Angular应用开发：本地开发环境快速搭建，无需手动配置Node.js和Angular CLI
• CI/CD流水线：在持续集成流程中作为构建环境，完成代码编译、测试和Docker镜像构建
• 团队协作：统一开发环境，确保团队成员使用相同版本的依赖工具
• 教学和演示：快速创建可复现的Angular开发环境，用于教学或技术演示

使用方法和配置说明

基本使用（交互式开发）

bash
docker run -it \
  --privileged \
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v $(pwd):/app \
  -w /app \
  --name angular-dev-env \
  [镜像名称]:[标签]

参数说明：

• --privileged：启用特权模式，支持Docker-in-Docker功能
• -v /var/run/docker.sock:/var/run/docker.sock：挂载宿主机Docker套接字（推荐方式，替代完整DinD）
• -v $(pwd):/app：将当前目录挂载到容器内的/app工作目录
• -w /app：设置工作目录为/app
• --name angular-dev-env：指定容器名称

创建新Angular项目

在容器内执行以下命令创建新项目：

bash
ng new my-angular-app
cd my-angular-app
ng serve --host 0.0.0.0 --port 4200

端口映射（访问开发服务器）

如需从宿主机访问Angular开发服务器，添加端口映射参数：

bash
docker run -it \
  --privileged \
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v $(pwd):/app \
  -w /app \
  -p 4200:4200 \
  [镜像名称]:[标签]

Docker Compose配置示例

yaml
version: '3'
services:
  angular-dev:
    image: [镜像名称]:[标签]
    privileged: true
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - ./:/app
    working_dir: /app
    ports:
      - "4200:4200"
    tty: true
    stdin_open: true

环境变量配置

容器内Docker操作示例

在容器内构建并推送Docker镜像：

bash
# 假设项目根目录包含Dockerfile
docker build -t my-angular-app:latest .
docker tag my-angular-app:latest [ registry-url ]/my-angular-app:latest
docker push [ registry-url ]/my-angular-app:latest

注意事项

• 使用--privileged模式可能存在安全风险，建议仅在可信环境中使用
• 挂载/var/run/docker.sock方式比完整DinD更轻量，推荐优先使用
• 首次启动容器时可能需要安装项目依赖：npm install或yarn install
• 确保宿主机已安装Docker引擎，且版本与容器内Docker兼容