Docker部署Angular应用显示Nginx默认页而非应用内容问题

1. 端口映射错误（最直接原因） #

你的docker-compose.yml里前端服务的端口映射是4200:80，意味着容器内的Nginx监听80端口，映射到宿主机的4200端口。你访问http://localhost:80自然看不到Angular应用，因为宿主机80端口未被前端容器占用。

解决方法：

• 直接访问http://localhost:4200
• 或修改docker-compose.yml里前端的端口映射为80:80：

  frontend:
    build: ./frontend
    ports:
      - "80:80"
    depends_on:
      - backend
  

2. Angular构建产物路径验证 #

即便确认构建成功，也要确保Dockerfile里复制的路径和实际构建生成的目录一致。Angular构建后的产物默认在dist/[项目名称]下，项目名称由package.json里的name字段决定。

检查步骤：

1. 本地执行npm run build，查看dist目录下的子目录名称（比如frontend或你的项目自定义名称）
2. 修正Dockerfile里的COPY命令路径：

   # 替换为实际构建后的目录名，比如dist/my-app
   COPY --from=build /app/dist/my-app /usr/share/nginx/html
   

3. Nginx配置是否正确加载 #

你删除了默认的default.conf，但要确保自定义的nginx.conf被正确加载：

• 确认nginx.conf的文件名以.conf结尾，Nginx会自动加载/etc/nginx/conf.d/下所有.conf后缀的文件
• 可进入前端容器验证配置：

  # 查看前端容器ID
  docker ps
  # 进入容器
  docker exec -it [容器ID] bash
  # 查看Nginx完整配置
  nginx -T
  

如果配置未生效，修改Dockerfile的复制命令，明确指定覆盖默认配置：

COPY nginx.conf /etc/nginx/conf.d/default.conf

4. 清理Docker缓存重新构建 #

旧的镜像缓存可能导致修改未生效，执行以下命令重新构建：

docker-compose down
docker-compose up --build

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