无法用Docker部署Angular 17生产环境构建的网站

你的Dockerfile存在两个核心问题：

• 第二阶段使用node:18-alpine镜像，但该镜像默认未安装Nginx，执行nginx命令会提示未找到；同时该阶段未安装Angular CLI，ng s命令也无法运行。
• 生产环境无需运行Angular开发服务器(ng s)，应使用静态文件服务器托管构建后的产物。

修改Dockerfile，第二阶段改用官方Nginx镜像，专门用于静态文件托管：

# 构建阶段
FROM node:18-alpine as build
WORKDIR /app
RUN npm i -g @angular/cli
COPY package*.json ./
RUN npm ci
COPY . ./
# Angular 17默认构建输出到dist/[项目名]/browser目录，需确认路径匹配你的项目
RUN ng build --configuration production

# 运行阶段：使用Nginx镜像
FROM nginx:alpine
EXPOSE 80
# 删除默认Nginx站点文件
RUN rm -rf /usr/share/nginx/html/*
# 复制构建产物到Nginx静态文件目录
COPY --from=build /app/dist/web-site/browser /usr/share/nginx/html
# Nginx容器启动时会自动运行服务，无需额外启动命令

同时调整Docker Compose的端口映射，匹配Nginx默认监听的80端口：

angular-app:
  build:
    context: ./web-site
    dockerfile: web-site.Dockerfile
  ports:
    - "4200:80" # 主机4200端口映射到容器80端口
  networks:
    - cp_network
  depends_on:
    - dotnet-api

若不想依赖Nginx，可在Node镜像中安装serve包托管静态文件：

# 构建阶段
FROM node:18-alpine as build
WORKDIR /app
RUN npm i -g @angular/cli
COPY package*.json ./
RUN npm ci
COPY . ./
RUN ng build --configuration production

# 运行阶段：使用Node+serve
FROM node:18-alpine
WORKDIR /app
EXPOSE 4200
# 安装静态文件服务器serve
RUN npm i -g serve
# 复制构建产物到容器内目录
COPY --from=build /app/dist/web-site/browser ./public
# 启动serve服务，指定静态文件目录和端口
CMD ["serve", "-s", "public", "-l", "4200"]

此方案下Docker Compose的端口映射保持"4200:4200"即可。

• Angular 17采用了新的构建输出结构，默认生成dist/[项目名]/browser目录，需确认你的项目构建产物路径与配置一致，否则会导致服务器找不到静态文件。
• depends_on仅保证dotnet-api容器先启动，但不保证API服务已就绪可接收请求，若Angular应用依赖API服务，建议添加健康检查逻辑或启动脚本等待API就绪。

内容的提问来源于stack exchange，提问作者Mauricio Gracia Gutierrez