怎样定制适配 Angular 项目的精简版生产环境运行时镜像

定制精简版生产镜像需分两阶段：构建阶段用 node:20-alpine 安装依赖并执行 ng build --configuration=production；运行阶段用 nginx:alpine 仅复制 dist 产物，配置 try_files 实现 Angular 路由 fallback，最终镜像 15–25MB。

定制精简版生产环境运行时镜像，核心是剥离构建依赖、只保留静态资源与轻量 Web 服务器。Angular 本身不依赖 Node.js 运行时，所以最终镜像里不该有 node_modules、npm 或任何开发工具。

用多阶段构建分离编译与运行

避免把整个项目源码和构建环境塞进最终镜像。推荐在单个 Dockerfile 中分两阶段：

• 构建阶段：基于 node:20-alpine（或匹配你项目 Node 版本），复制 package.json → 安装依赖 → 复制源码 → 执行 ng build --configuration=production
• 运行阶段：基于 nginx:alpine，仅 COPY 构建产物（如 dist/your-app-name）到 /usr/share/nginx/html/

这样最终镜像体积通常控制在 15–25MB，不含任何 Node 相关二进制或 dev 依赖。

精简 Nginx 配置，适配 Angular 路由

Angular 的前端路由（如 routerLink 或直接访问 /dashboard）需要服务端支持——Nginx 必须把所有非静态资源请求 fallback 到 index.html，否则刷新页面会 404。

在 nginx.conf 或 default.conf 中配置：

• 用 location / 块配合 try_files $uri $uri/ /index.html;
• 禁用默认日志（access_log off;）、关闭 server tokens（server_tokens off;）
• 可选：添加缓存头，如对 .js、.css 设置 Cache-Control: public, max-age=31536000

剔除无用文件，验证构建输出

确保 ng build 输出的是纯静态文件（HTML、JS、CSS、assets），且没有意外包含：

• src/、e2e/、node_modules/ 等源码目录
• tsconfig.json、angular.json、.git 等非运行时文件
• 未启用 outputHashing: "all" 导致的缓存失效风险（建议开启）

可在构建后执行 ls -la dist/your-app-name | head -20 快速检查目录结构是否干净。

可选：用 Alpine + BusyBox 替代 Nginx（极简场景）

如果对 HTTP 功能要求极低（如内网预览、CI 验证），可用更轻量方案：

• 基础镜像改用 alpine:latest
• 安装 busybox-httpd 或 lighttpd（约 5MB）
• COPY dist 后启动服务：httpd -f -p 80 -h /usr/share/nginx/html

注意：该方式不支持重写规则，仅适用于 HashLocationStrategy 或纯首页访问场景。