如何使用Docker为Angular CLI项目动态分配环境变量？

看起来你已经搭好了Angular项目Docker构建的第一阶段，我帮你把整个配置补全，同时给出Node项目的Docker配置，以及用来管理两个容器的Docker Compose文件，确保它们能在独立容器里正常运行还能互相通信～

Angular CLI 项目完整 Dockerfile #

### STAGE 1: Build ###
# 标记构建阶段为builder，使用node:carbon作为基础镜像
FROM node:carbon as builder

# 复制package依赖文件到容器当前目录
COPY package.json package-lock.json ./

# 优化npm安装效率，清理缓存
RUN npm set progress=false && npm config set depth 0 && npm cache clean --force

# 安装依赖后，创建项目目录并把node_modules移过去（利用Docker缓存层，避免重复安装）
RUN npm i && mkdir /ng-app && cp -R ./node_modules ./ng-app/

# 切换到项目工作目录
WORKDIR /ng-app

# 复制整个Angular项目文件到容器
COPY . .

# 构建生产环境的Angular应用包
RUN npm run build --prod

### STAGE 2: Run ###
# 使用轻量的nginx镜像作为运行阶段的基础，大幅减小最终镜像体积
FROM nginx:alpine

# 从builder阶段复制构建好的dist目录到nginx的静态文件托管目录
COPY --from=builder /ng-app/dist /usr/share/nginx/html

# 暴露nginx默认的80端口
EXPOSE 80

# 启动nginx并保持前台运行（避免容器启动后立即退出）
CMD ["nginx", "-g", "daemon off;"]

Node 项目 Dockerfile #

假设你的Node项目是Express或类似的后端服务，配置如下：

# 使用和Angular构建阶段一致的node:carbon镜像（也可根据项目需求替换为更高版本）
FROM node:carbon

# 创建并切换到项目工作目录
WORKDIR /node-app

# 先复制依赖文件，利用Docker缓存层优化构建速度
COPY package.json package-lock.json ./

# 安装项目依赖
RUN npm set progress=false && npm config set depth 0 && npm cache clean --force && npm i

# 复制整个Node项目文件到容器
COPY . .

# 暴露后端服务的端口（根据你的项目实际端口调整，这里假设是3000）
EXPOSE 3000

# 启动Node服务（根据你的项目启动脚本调整，比如node server.js或npm start）
CMD ["npm", "start"]

Docker Compose 配置（docker-compose.yml） #

用这个文件可以一键启动两个容器，并让它们处于同一个网络中，方便Angular前端调用Node后端：

version: '3.8'

services:
  angular-frontend:
    build: ./your-angular-project-path  # 替换成你的Angular项目所在的本地目录路径
    ports:
      - "8080:80"  # 主机的8080端口映射到容器的80端口，可根据需求调整
    networks:
      - app-shared-network

  node-backend:
    build: ./your-node-project-path  # 替换成你的Node项目所在的本地目录路径
    ports:
      - "3000:3000"  # 主机的3000端口映射到容器的3000端口，可根据需求调整
    networks:
      - app-shared-network
    # 如果你的Node项目需要环境变量，在这里添加
    # environment:
    #   - NODE_ENV=production
    #   - DATABASE_URL=your-db-url

networks:
  app-shared-network:
    driver: bridge

关键注意事项 #

• 容器间通信：Angular前端调用后端API时，不要用localhost:3000，而是用服务名node-backend:3000（因为Docker Compose会自动给服务名做DNS解析，同一网络内的容器可以通过服务名访问）。
• 缓存优化：所有Dockerfile都先复制package.json再安装依赖，这样只有当依赖文件变化时，才会重新执行npm i，否则会复用之前的缓存层，大幅加快构建速度。
• 运行命令：在Docker Compose文件所在目录执行docker-compose up --build，第一次运行会构建镜像，之后再次运行会复用已有镜像；如果需要后台运行，加上-d参数。

内容的提问来源于stack exchange，提问作者Manjunath PV