运行Angular应用Docker容器后Localhost仅显示NGINX欢迎页求助

1. 验证Angular构建产物路径正确性 #

• 本地执行npm run build，查看dist目录结构，确认产物是否在dist/application_immobilier/browser下。如果路径不符，修改Dockerfile中COPY --from=builder后的目标路径，比如产物直接在dist/browser就改成/usr/src/app/dist/browser。

2. 检查容器内静态文件目录内容 #

• 启动容器后，进入容器查看/usr/share/nginx/html下的文件：

  docker exec -it <容器ID/名称> sh
  ls /usr/share/nginx/html
  

• 若目录下仍存在NGINX默认的index.html，说明构建产物未正确复制。此时需检查Dockerfile的COPY命令路径，或重新构建镜像并查看日志（docker build -t angular-app .），确认npm install、build阶段是否有报错。

3. 确认端口映射与NGINX监听端口匹配 #

• NGINX默认监听容器内80端口，Dockerfile中EXPOSE 4200仅为声明，未实际修改NGINX配置。启动容器时需将本地端口映射到容器80端口：

  docker run -p 4200:80 angular-app
  

• 访问时使用localhost:4200，若映射的是其他端口（如80:80）则访问localhost。

4. 添加Angular路由兼容的NGINX配置 #

• 若应用使用Angular路由，默认NGINX配置会导致路由异常，需自定义配置：
  1. 在项目根目录创建nginx.conf：

     server {
       listen 80;
       root /usr/share/nginx/html;
       index index.html;
       location / {
         try_files $uri $uri/ /index.html;
       }
     }
     

  2. 修改Dockerfile，添加复制配置的命令：

     # ... 构建阶段不变 ...
     FROM nginx:1.15.8-alpine
     RUN rm -rf /usr/share/nginx/html/*
     COPY --from=builder /usr/src/app/dist/application_immobilier/browser /usr/share/nginx/html/
     COPY nginx.conf /etc/nginx/conf.d/default.conf  # 新增这行
     CMD ["nginx", "-g", "daemon off;"]
     EXPOSE 80  # 改为80更贴合实际
     

5. 清理缓存后重新构建运行 #

• 旧镜像缓存可能导致问题，先清理：

  docker stop <容器名> && docker rm <容器名>
  docker rmi angular-app
  

• 重新构建并启动容器：

  docker build -t angular-app .
  docker run -p 4200:80 angular-app
  

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