Docker-Compose部署Angular前端，带路径访问Nginx返回404

Angular是单页应用（SPA），所有路由由浏览器端的Angular Router处理。当直接访问http://localhost:3000/testPath这类深层链接时，Nginx会尝试在服务器上查找对应路径的文件，但该文件实际不存在，因此返回404错误。

要解决这个问题，需要配置Nginx将所有请求重定向到index.html，让Angular Router来处理路由。以下是具体步骤：

1. 创建自定义Nginx配置文件 #

在前端项目根目录下创建nginx.conf文件，内容如下：

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

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

该配置会先尝试访问请求的文件或目录，若不存在则返回index.html，确保Angular能接管路由逻辑。

2. 修改Dockerfile #

更新前端的Dockerfile，将自定义配置文件复制到Nginx的配置目录中，替换默认配置：

FROM node:latest as builder

WORKDIR /app

COPY . .

RUN npm install && npm run ng build

FROM nginx:alpine

WORKDIR /usr/share/nginx/html

RUN rm -rf ./*

COPY --from=builder /app/dist/frontend .
# 复制自定义Nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

ENTRYPOINT ["nginx", "-g", "daemon off;"]

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

执行以下命令重新构建前端镜像并启动容器：

docker-compose build frontend
docker-compose up -d frontend

完成后，再次访问http://localhost:3000/testPath这类深层链接，就能正常加载对应的Angular路由页面了。

内容的提问来源于stack exchange，提问作者yyy-t