Docker容器中Nginx显示默认页而非Angular应用的问题

问题排查与修复步骤 #

1. 清理Dockerfile中的冗余配置 #

你的Dockerfile重复执行了COPY nginx.conf /etc/nginx/conf.d/default.conf，虽然这不会直接导致默认页问题，但属于冗余操作，建议删除第二行重复的配置：

FROM node:18-alpine AS build

WORKDIR /app

COPY package*.json ./

RUN npm install

RUN npx ngcc --properties es2023 browser module main --first-only --create-ivy-entry-points

COPY . .

RUN npm run build

FROM nginx:stable

# 仅保留一次nginx.conf复制操作
COPY nginx.conf /etc/nginx/conf.d/default.conf

COPY --from=build /app/dist/portfolio-client/ /usr/share/nginx/html

EXPOSE 80

2. 确认Angular构建输出路径准确性 #

Angular的构建输出目录由angular.json里的outputPath配置决定，默认是dist/<项目名称>，但可能因配置变动改变。你可以通过以下命令验证：

# 构建build阶段镜像并查看dist目录结构
docker build --target build -t angular-build-temp .
docker run --rm angular-build-temp ls /app/dist

如果输出的目录不是portfolio-client，需要修改Dockerfile中COPY --from=build的路径，比如输出目录是dist，就改成/app/dist/。

3. 配置Nginx正确适配Angular应用 #

默认Nginx配置可能未处理Angular的SPA路由，或根目录指向错误。请确保你的nginx.conf包含以下内容：

server {
    listen 80;
    server_name localhost;

    # 指向Angular构建后的静态文件目录
    root /usr/share/nginx/html;
    index index.html index.htm;

    # 处理SPA路由：所有请求重定向到index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存优化
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

4. 重新构建并验证服务 #

完成修改后，重新构建启动容器：

docker-compose down
docker-compose build
docker-compose up -d

检查容器内是否存在Angular构建文件：

docker exec angular-docker ls /usr/share/nginx/html

如果能看到index.html及其他应用文件，说明复制成功，刷新浏览器即可看到你的Angular应用。

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