Nginx:alpine镜像部署Angular应用路由及页面加载异常排查

你的问题源于两个核心问题：一是初始Dockerfile的文件复制逻辑错误，二是Nginx默认不支持Angular的前端路由跳转。以下是具体修复步骤：

1. 修正Dockerfile，实现正确的项目构建与部署 #

直接复制整个项目到Nginx目录无效，因为Angular需要先编译为静态资源。采用多阶段构建的Dockerfile更高效：

# 第一阶段：编译Angular项目
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 执行生产环境构建，产物会生成在dist目录下
RUN npm run build --prod

# 第二阶段：部署到Nginx
FROM nginx:alpine
# 替换Nginx默认配置文件
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 将编译后的静态资源复制到Nginx默认静态文件目录
COPY --from=builder /app/dist/your-project-name /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

注意：将your-project-name替换为你Angular项目执行npm run build后，dist目录下的实际文件夹名称。

2. 配置Nginx支持前端路由 #

在项目根目录创建nginx.conf文件，添加SPA路由兼容配置：

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html index.htm;

    # 核心：所有非静态文件请求转发到index.html，由Angular路由处理
    location / {
        try_files $uri $uri/ /index.html;
    }

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

try_files指令会让Nginx优先查找对应路径的静态文件，找不到则将请求转发到index.html，确保Angular的前端路由能正常接管。

3. 构建并启动容器 #

执行以下命令完成部署：

# 构建镜像
docker build -t angular-quiz-app .
# 启动容器，将本地8080端口映射到容器80端口
docker run -d -p 8080:80 angular-quiz-app

此时访问http://localhost:8080和http://localhost:8080/quiz即可正常加载对应页面。

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