运行Angular 17容器后Localhost仅显示NGINX欢迎页问题求助

核心问题分析 #

1. 端口访问错误：你将容器80端口映射到了主机的4201端口，因此正确的访问地址应为http://localhost:4201，而非http://localhost:80
2. 自定义Nginx配置未生效：Dockerfile中未将你的nginx.conf复制到容器的Nginx配置目录，容器默认使用自带的配置文件，该配置指向Nginx官方欢迎页

修复步骤 #

1. 修改Dockerfile，添加自定义Nginx配置复制逻辑 #

更新后的Dockerfile需将本地配置替换容器内默认的Nginx站点配置：

# Stage 1: Build the Angular application
FROM node:18.14 AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build -- --configuration production

# Stage 2: Serve the Angular application using Nginx
FROM nginx:latest
# 复制自定义配置，覆盖默认站点配置
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/dist/dwir-app /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2. 确认Angular构建产物路径正确性 #

检查构建后的/app/dist/dwir-app目录是否包含index.html及其他静态资源：

# 临时运行builder阶段镜像查看产物
docker run --rm -it --entrypoint ls $(docker build -q --target builder .) /app/dist/dwir-app

3. 重新构建镜像并启动容器 #

# 重新构建镜像
docker build -t dwiraversion1 .
# 清理旧容器
docker stop dwira_website_version2 && docker rm dwira_website_version2
# 启动新容器
docker run -d --name dwira_website_version2 -p 4201:80 dwiraversion1

4. 验证应用访问 #

访问http://localhost:4201即可加载你的Angular应用

额外排查（若问题仍存在） #

• 查看容器日志，确认Nginx配置加载状态：

  docker logs dwira_website_version2
  

• 进入容器检查静态文件是否正确部署：

  docker exec -it dwira_website_version2 ls /usr/share/nginx/html
  

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