配置Angular应用Docker+Nginx容器化部署时始终显示Nginx默认页面

我用Docker+Nginx容器化Angular应用，流程是先通过node-alpine镜像构建产物，再用Nginx镜像提供静态服务。现在访问localhost时显示的是Nginx默认欢迎页，但直接访问localhost/index.html能正常加载Angular的页面。进入容器查看/usr/share/nginx/html目录，确认里面的index.html确实是Angular构建后的文件，推测问题出在Nginx配置，但修改配置后始终没效果。

相关配置文件如下：

.dockerignore #

.git
.editorconfig
/.vscode/*
/node_modules
/e2e
/docs
.gitignore
*.zip
/dist

Dockerfile #

FROM node:18.18-alpine3.18 as build

WORKDIR /app
COPY . .

RUN npm ci
RUN npm run build


FROM nginx:latest
COPY --from=build /app/dist/dev-ops-frontend /usr/share/nginx/html

nginx.conf #

events{}

http {
    include /etc/nginx/mime.types; 

    server {        
        root /usr/share/nginx/html;

        index index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

angular.json（关键片段） #

"build": {
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    "outputPath": "dist/dev-ops-frontend",
    // ...其他配置
  }
}

额外发现：执行ng build后，产物实际在/dist/dev-ops-frontend/browser目录下（因为用了Angular 17+的application builder），但新建的旧版Angular项目产物直接在/dist/new-project根目录下。

已尝试的无效操作：

• 调整Dockerfile的COPY路径，分别尝试/app/dist/dev-ops-frontend/browser和/app/dist/dev-ops-frontend
• 修改nginx.conf中root指令的位置，移至location块内
• 替换src目录后重新构建（添加了--no-cache参数）
• 移除nginx.conf中的location /配置块

1. 核心问题：自定义Nginx配置未生效 #

你的Dockerfile只复制了Angular构建产物，但没有将本地的nginx.conf替换掉容器内Nginx的默认配置文件，容器一直使用默认的Nginx配置，导致你修改本地的nginx.conf完全不起作用。

2. 修正Dockerfile #

需要将本地的nginx.conf复制到容器的/etc/nginx/nginx.conf路径（替换默认配置），同时注意Angular 17+的application builder产物在browser子目录，所以COPY路径要准确：

FROM node:18.18-alpine3.18 as build

WORKDIR /app
COPY . .

RUN npm ci
# 指定构建生产环境产物，可选
RUN npm run build --configuration production

FROM nginx:latest
# 替换Nginx默认配置文件
COPY ./nginx.conf /etc/nginx/nginx.conf
# 复制Angular构建后的browser目录内容到Nginx静态文件目录
COPY --from=build /app/dist/dev-ops-frontend/browser /usr/share/nginx/html

3. 验证Nginx配置逻辑 #

当前的nginx.conf配置是正确的，重点确认两点：

• index index.html;明确将index.html设为默认索引文件
• try_files $uri $uri/ /index.html;处理Angular单页应用的路由刷新问题

4. 彻底清理并重新构建 #

执行以下命令清除旧的容器和镜像，重新构建运行：

# 停止并删除旧容器（如果存在）
docker stop angular-container && docker rm angular-container
# 删除旧镜像
docker rmi angular-app-image
# 重新构建镜像
docker build -t angular-app-image .
# 运行容器，映射本地80端口到容器80端口
docker run -d -p 80:80 --name angular-container angular-app-image

5. 无效尝试的原因说明 #

• 调整COPY路径但未替换Nginx配置：默认Nginx配置可能优先加载其他默认页（比如nginx-debian.html），即使静态目录里有index.html，也不会自动优先使用
• 修改本地nginx.conf但未复制到容器：容器根本没有使用你本地的配置文件，所有修改都不会生效

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